mn-angular-lib 1.0.98 → 1.0.100

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']
@@ -6785,7 +6804,13 @@ class MnModalShellComponent {
     prevSample = null;
     get hostClasses() {
         const size = this.config.sizeWidth || ModalSize.MD;
-        const closing = this.isClosing ? ' closing' : '';
+        // `closing` is intentionally NOT derived here. startClosing() adds the
+        // `.closing` class imperatively (classList.add) for reliable, zoneless-safe
+        // application. Deriving it from `isClosing` in this getter as well makes the
+        // host class string flip value after the view has been checked, which throws
+        // NG0100 (ExpressionChangedAfterItHasBeenCheckedError) in dev. Angular's class
+        // binding only manages the tokens it emits, so it leaves the imperatively
+        // added `.closing` untouched.
         const animType = typeof this.config.animation === 'string'
             ? this.config.animation
             : this.config.animation?.type || 'slide';
@@ -6793,7 +6818,7 @@ class MnModalShellComponent {
         const stacked = this.isStacked ? ' is-stacked' : '';
         const mobileSheet = this.isMobileSheet ? ' mobile-sheet' : '';
         const swiping = this.swipeDismissing ? ' swipe-dismissing' : '';
-        return `modal-shell modal-${size}${closing}${animation}${stacked}${mobileSheet}${swiping}`;
+        return `modal-shell modal-${size}${animation}${stacked}${mobileSheet}${swiping}`;
     }
     dragStartY = 0;
     /** Whether the sheet can be dismissed at all (drives whether the swipe is armed). */