mn-angular-lib 1.0.99 → 1.0.101

package/fesm2022/mn-angular-lib.mjs

@@ -253,6 +253,11 @@ const mnButtonVariants = tv({
         disabled: {
             true: 'opacity-50 pointer-events-none',
         },
+        // Busy state: dim and block interaction like `disabled`, and hint the wait cursor.
+        // The spinner itself is rendered in the template (see mn-button.html).
+        loading: {
+            true: 'opacity-50 pointer-events-none cursor-wait',
+        },
         wrap: {
             true: 'whitespace-normal',
             false: 'whitespace-nowrap',
@@ -333,6 +338,7 @@ const mnButtonVariants = tv({
         color: 'primary',
         borderRadius: 'lg',
         disabled: false,
+        loading: false,
         wrap: false,
         hover: true,
     },
@@ -340,6 +346,7 @@ const mnButtonVariants = tv({
 
 class MnButton {
     data = {};
+    // A loading button is treated as non-interactive: it blocks clicks and is unfocusable,
     // Bind the computed classes to the host element
     get hostClasses() {
         return mnButtonVariants({
@@ -348,33 +355,45 @@ class MnButton {
             color: this.data.color,
             borderRadius: this.data.borderRadius,
             disabled: this.data.disabled,
+            loading: this.data.loading,
             wrap: this.data.wrap,
             hover: this.data.hover,
         });
     }
+    // Signals assistive tech that the control is busy while a loading action runs.
+    get ariaBusy() {
+        return this.data.loading ? 'true' : null;
+    }
     // For accessibility (works for both <button> and <a>)
     get ariaDisabled() {
         return this.data.disabled ? 'true' : null;
     }
     // Only meaningful for <button>. For <a> it does nothing semantically.
     get disabledAttr() {
-        return this.data.disabled ? '' : null;
+        return this.isBlocked ? '' : null;
     }
-    // Make disabled anchors unfocusable + prevent activation
+    // Make disabled/loading anchors unfocusable + prevent activation
     get tabIndex() {
-        return this.data.disabled ? '-1' : null;
+        return this.isBlocked ? '-1' : null;
+    }
+    // so an in-flight action cannot be triggered a second time.
+    get isBlocked() {
+        return !!(this.data.disabled || this.data.loading);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnButton, isStandalone: true, selector: "button[mnButton], a[mnButton]", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses", "attr.aria-disabled": "this.ariaDisabled", "attr.disabled": "this.disabledAttr", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<ng-content></ng-content>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnButton, isStandalone: true, selector: "button[mnButton], a[mnButton]", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses", "attr.aria-busy": "this.ariaBusy", "attr.aria-disabled": "this.ariaDisabled", "attr.disabled": "this.disabledAttr", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "@if (data.loading) {\n  <span\n    aria-hidden=\"true\"\n    class=\"inline-block h-4 w-4 shrink-0 mr-2 animate-spin rounded-full border-2 border-current border-r-transparent\"\n  ></span>\n}\n<ng-content></ng-content>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnButton, decorators: [{
             type: Component,
-            args: [{ selector: 'button[mnButton], a[mnButton]', standalone: true, template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'button[mnButton], a[mnButton]', standalone: true, template: "@if (data.loading) {\n  <span\n    aria-hidden=\"true\"\n    class=\"inline-block h-4 w-4 shrink-0 mr-2 animate-spin rounded-full border-2 border-current border-r-transparent\"\n  ></span>\n}\n<ng-content></ng-content>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], ariaBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
             }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
@@ -6621,7 +6640,14 @@ class MnModalShellComponent {
     config;
     modalRef;
     isClosing = false;
-    isStacked = false;
+    /**
+     * Whether another modal is stacked on top of this one. Set imperatively by
+     * `MnModalService` on the already-rendered shell below the newly opened one, so it must
+     * be a signal: mutating a plain field there changes the host `[class]` after the view was
+     * checked (NG0100 ExpressionChangedAfterItHasBeenChecked) and does not schedule change
+     * detection in a zoneless app. A signal write both notifies the host binding and schedules CD.
+     */
+    isStacked = signal(false, ...(ngDevMode ? [{ debugName: "isStacked" }] : []));
     ModalKind = ModalKind;
     previouslyFocusedElement = null;
     focusTrapListener = null;
@@ -6796,7 +6822,7 @@ class MnModalShellComponent {
             ? this.config.animation
             : this.config.animation?.type || 'slide';
         const animation = ` anim-${animType}`;
-        const stacked = this.isStacked ? ' is-stacked' : '';
+        const stacked = this.isStacked() ? ' is-stacked' : '';
         const mobileSheet = this.isMobileSheet ? ' mobile-sheet' : '';
         const swiping = this.swipeDismissing ? ' swipe-dismissing' : '';
         return `modal-shell modal-${size}${animation}${stacked}${mobileSheet}${swiping}`;
@@ -7061,7 +7087,7 @@ class MnModalService {
         // Update stack and dim previous modal
         if (this.modalStack.length > 0) {
             const prevModal = this.modalStack[this.modalStack.length - 1];
-            prevModal.component.isStacked = true;
+            prevModal.component.isStacked.set(true);
         }
         this.modalStack.push(modalRef);
         // Attach to application
@@ -7078,7 +7104,7 @@ class MnModalService {
                 this.modalStack.splice(index, 1);
                 if (this.modalStack.length > 0) {
                     const topModal = this.modalStack[this.modalStack.length - 1];
-                    topModal.component.isStacked = false;
+                    topModal.component.isStacked.set(false);
                 }
             }
         });