@coreui/angular 5.5.23 → 5.5.24

package/fesm2022/coreui-angular.mjs

@@ -5180,6 +5180,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
         }] });
 
 class ModalComponent {
+    static ngAcceptInputType_ariaModalInput;
+    static ngAcceptInputType_scrollable;
+    static ngAcceptInputType_visibleInput;
     #document = inject(DOCUMENT);
     #renderer = inject(Renderer2);
     #hostElement = inject(ElementRef);
@@ -5238,7 +5241,7 @@ class ModalComponent {
      */
     ariaModalInput = input(false, ...(ngDevMode ? [{ debugName: "ariaModalInput", transform: booleanAttribute, alias: 'ariaModal' }] : [{ transform: booleanAttribute, alias: 'ariaModal' }]));
     ariaModal = computed(() => {
-        return this.visible || this.ariaModalInput() ? true : null;
+        return this.visible() || this.ariaModalInput() ? true : null;
     }, ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
     /**
      * Create a scrollable modal that allows scrolling the modal body.
@@ -5252,27 +5255,18 @@ class ModalComponent {
      * @default false
      */
     visibleInput = input(false, ...(ngDevMode ? [{ debugName: "visibleInput", transform: booleanAttribute, alias: 'visible' }] : [{ transform: booleanAttribute, alias: 'visible' }]));
+    visible = linkedSignal(this.visibleInput, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     #visibleInputEffect = effect(() => {
-        const visible = this.visibleInput();
+        const visible = this.visible();
         untracked(() => {
-            this.visible = visible;
+            this.setBodyStyles(visible);
+            this.setBackdrop(this.backdrop() !== false && visible);
+            this.visibleChange?.emit(visible);
         });
     }, ...(ngDevMode ? [{ debugName: "#visibleInputEffect" }] : []));
-    set visible(value) {
-        if (this.#visible() !== value) {
-            this.#visible.set(value);
-            this.setBodyStyles(value);
-            this.setBackdrop(this.backdrop() !== false && value);
-            this.visibleChange?.emit(value);
-        }
-    }
-    get visible() {
-        return this.#visible();
-    }
-    #visible = signal(false, ...(ngDevMode ? [{ debugName: "#visible" }] : []));
     #activeElement = signal(null, ...(ngDevMode ? [{ debugName: "#activeElement" }] : []));
     #visibleEffect = effect(() => {
-        const visible = this.#visible();
+        const visible = this.visible();
         const afterViewInit = this.#afterViewInit();
         untracked(() => {
             if (visible && afterViewInit) {
@@ -5316,13 +5310,13 @@ class ModalComponent {
         };
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     get ariaHidden() {
-        return this.visible ? null : true;
+        return this.visible() ? null : true;
     }
     animateTrigger = computed(() => {
-        return this.visible ? 'visible' : 'hidden';
+        return this.visible() ? 'visible' : 'hidden';
     }, ...(ngDevMode ? [{ debugName: "animateTrigger" }] : []));
     get show() {
-        return this.visible && this.#show();
+        return this.visible() && this.#show();
     }
     set show(value) {
         this.#show.set(value);
@@ -5346,10 +5340,10 @@ class ModalComponent {
                 this.#backdropService.resetScrollbar();
             }
         });
-        this.show = this.visible;
+        this.show = this.visible();
     }
     onKeyUpHandler(event) {
-        if (event.key === 'Escape' && this.keyboard() && this.visible) {
+        if (event.key === 'Escape' && this.keyboard() && this.visible()) {
             if (this.backdrop() === 'static') {
                 this.setStaticBackdrop();
             }
@@ -5391,12 +5385,12 @@ class ModalComponent {
         this.#modalService.modalState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
             if (this === action.modal || this.id === action.id) {
                 if ('show' in action) {
-                    this.visible = action?.show === 'toggle' ? !this.visible : action.show;
+                    this.visible.update((visible) => (action?.show === 'toggle' ? !visible : action.show));
                 }
             }
             else {
-                if (this.visible) {
-                    this.visible = false;
+                if (this.visible()) {
+                    this.visible.set(false);
                 }
             }
         });
@@ -5427,7 +5421,7 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, attrId: { classPropertyName: "attrId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaModalInput: { classPropertyName: "ariaModalInput", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)", "document:keyup": "onKeyUpHandler($event)" }, properties: { "class": "hostClasses()", "attr.role": "role()", "attr.inert": "ariaHidden", "attr.id": "id", "attr.aria-modal": "ariaModal()", "attr.tabindex": "-1", "@showHide": "animateTrigger()" }, classAttribute: "modal" }, viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContentRef"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, attrId: { classPropertyName: "attrId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaModalInput: { classPropertyName: "ariaModalInput", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, visibleInput: { classPropertyName: "visibleInput", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)", "document:keyup": "onKeyUpHandler($event)" }, properties: { "class": "hostClasses()", "attr.role": "role()", "attr.inert": "ariaHidden", "attr.id": "id", "attr.aria-modal": "ariaModal()", "attr.tabindex": "-1", "@showHide": "animateTrigger()" }, classAttribute: "modal" }, viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContentRef"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    @let isVisible = visible();\n    <div [cdkTrapFocus]=\"isVisible\" [cdkTrapFocusAutoCapture]=\"isVisible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // display: 'block'
@@ -5465,7 +5459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         '(mousedown)': 'onMouseDownHandler($event)',
                         '(click)': 'onClickHandler($event)',
                         '(document:keyup)': 'onKeyUpHandler($event)'
-                    }, template: "<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
+                    }, template: "<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    @let isVisible = visible();\n    <div [cdkTrapFocus]=\"isVisible\" [cdkTrapFocusAutoCapture]=\"isVisible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], attrId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaModalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], modalContentRef: [{ type: i0.ViewChild, args: ['modalContentRef', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class ModalModule {