mn-angular-lib 1.0.99 → 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']