ecabs-components 1.1.83 → 1.1.85

package/lib/base/consts/buttons.consts.d.ts

@@ -1 +1,3 @@
 export declare type ButtonStyle = 'basic' | 'raised' | 'flat' | 'stroked' | undefined;
+export declare type ButtonLoadingStyle = 'spinner-only' | 'spinner-label';
+export declare type ButtonSize = 'small' | 'medium' | 'large';

package/lib/ecabs-buttons-v2/ecabs-buttons-v2.component.d.ts

@@ -1,24 +1,23 @@
-import { OnChanges, SimpleChanges } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
-import { ButtonStyle } from '../base/consts/buttons.consts';
+import { ButtonLoadingStyle, ButtonSize, ButtonStyle } from '../base/consts/buttons.consts';
 import * as i0 from "@angular/core";
-export type ButtonSize = 'small' | 'medium' | 'large';
-export declare class ButtonsV2Component implements OnChanges {
+export declare class ButtonsV2Component {
     disabled: boolean;
     loading: boolean;
+    loadingStyle: ButtonLoadingStyle;
     size: ButtonSize;
     type: 'button' | 'submit';
     style: ButtonStyle;
     color: ThemePalette | 'success' | null;
     fullWidth: boolean;
-    hostWidth: string;
-    classAttr: string;
-    ngOnChanges(changes: SimpleChanges): void;
-    private updateHostWidth;
+    get isDisabled(): boolean;
+    get hostWidth(): string;
     get sizeClass(): string;
+    get matColor(): ThemePalette;
+    get showLabel(): boolean;
     get buttonClasses(): {
         [key: string]: boolean;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonsV2Component, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonsV2Component, "ecabs-buttons-v2", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "style": { "alias": "style"; "required": false; }; "color": { "alias": "color"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; }, {}, never, ["mat-icon", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonsV2Component, "ecabs-buttons-v2", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingStyle": { "alias": "loadingStyle"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "style": { "alias": "style"; "required": false; }; "color": { "alias": "color"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; }, {}, never, ["mat-icon", "*"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.83",
+  "version": "1.1.85",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",

package/src/assets/styles/material/overrides/_button.scss

@@ -1,134 +1,155 @@
-button,
-a {
-  &.mdc-button {
-    @extend .btn;
-
-    &.btn__group--item,
-    &.btn {
-      @extend .btn__group--item;
-    }
-
-    .mat-icon {
-      color: inherit;
-    }
-  }
-
-  /**
- * #Basic
- */
-  &.mdc-button.mat-mdc-button {
-    @extend .btn--basic;
-  }
-
-  &.mdc-button--outlined {
-    @extend .btn--basic--outline;
-
-    border: 0;
-  }
-
-  &.mdc-button.mat-mdc-button {
-    @extend .btn--basic--link;
-  }
-
-  &.mdc-button.mat-mdc-button:disabled {
-    @extend .btn__disabled--outline;
-
-    &:after {
-      border: 0;
-    }
-  }
-
-  /**
-  * #Primary
-  */
-  &.mdc-button.mat-primary {
-    @extend .btn--primary;
-  }
-
-  &.mdc-button--outlined.mat-primary {
-    @extend .btn--primary--outline;
-
-    border: 0;
-  }
-
-  &.mat-mdc-button.mat-primary {
-    @extend .btn--primary--link;
-  }
-
-  /**
-  * #Secondary
-  */
-
-  &.mdc-button.mat-accent {
-    @extend .btn--secondary;
-  }
-
-  &.mdc-button--outlined.mat-accent {
-    @extend .btn--secondary--outline;
-
-    border: 0;
-  }
-
-  &.mat-mdc-button.mat-accent {
-    @extend .btn--secondary--link;
-  }
-
-  /**
-  * #Warn
-  */
-
-  &.mdc-button.mat-warn {
-    @extend .btn--warn;
-  }
-
-  &.mdc-button--outlined.mat-warn {
-    @extend .btn--warn--outline;
-
-    border: 0;
-  }
-
-  &.mat-mdc-button.mat-warn {
-    @extend .btn--warn--link;
-  }
-
-  /**
- * #Success
- */
-
-  &.mdc-button.mat-success {
-    @extend .btn--success;
-  }
-
-  &.mdc-button--outlined.mat-success {
-    @extend .btn--success--outline;
-
-    border: 0;
-  }
-
-  &.mat-mdc-button.mat-success {
-    @extend .btn--success--link;
-  }
-
-  &.mat-mdc-unelevated-button:disabled {
-    @extend .btn__disabled;
-  }
-
-  &.mat-mdc-outlined-button:disabled {
-    @extend .btn__disabled--outline;
-  }
-
-  .mdc-button__label {
-    @extend .btn__with-icon--wrapper;
-  }
-
-  &.mat-mdc-icon-button {
-    min-width: auto;
-    line-height: 1;
-  }
-}
-
-// ::TODO Will be fixed in upgrade to >17.2.2
-.mat-mdc-unelevated-button.mat-primary,
-.mat-mdc-raised-button.mat-primary {
-  --mdc-filled-button-label-text-color: var(--color-white) !important;
-}
+button,
+a {
+  &.mdc-button {
+    @extend .btn;
+
+    &.btn__group--item,
+    &.btn {
+      @extend .btn__group--item;
+    }
+
+    .mat-icon {
+      color: inherit;
+    }
+  }
+
+  /**
+ * #Basic
+ */
+  &.mdc-button.mat-mdc-button {
+    @extend .btn--basic;
+  }
+
+  &.mdc-button--outlined {
+    @extend .btn--basic--outline;
+
+    border: 0;
+  }
+
+  &.mdc-button.mat-mdc-button {
+    @extend .btn--basic--link;
+  }
+
+  &.mdc-button.mat-mdc-button:disabled:not(.loading) {
+    @extend .btn__disabled--outline;
+
+    &:after {
+      border: 0;
+    }
+  }
+
+  /**
+  * #Primary
+  */
+  &.mdc-button.mat-primary {
+    @extend .btn--primary;
+  }
+
+  &.mdc-button--outlined.mat-primary {
+    @extend .btn--primary--outline;
+
+    border: 0;
+  }
+
+  &.mat-mdc-button.mat-primary {
+    @extend .btn--primary--link;
+  }
+
+  /**
+  * #Secondary
+  */
+
+  &.mdc-button.mat-accent {
+    @extend .btn--secondary;
+  }
+
+  &.mdc-button--outlined.mat-accent {
+    @extend .btn--secondary--outline;
+
+    border: 0;
+  }
+
+  &.mat-mdc-button.mat-accent {
+    @extend .btn--secondary--link;
+  }
+
+  /**
+  * #Warn
+  */
+
+  &.mdc-button.mat-warn {
+    @extend .btn--warn;
+  }
+
+  &.mdc-button--outlined.mat-warn {
+    @extend .btn--warn--outline;
+
+    border: 0;
+  }
+
+  &.mat-mdc-button.mat-warn {
+    @extend .btn--warn--link;
+  }
+
+  /**
+ * #Success
+ */
+
+  &.mdc-button.mat-success {
+    @extend .btn--success;
+  }
+
+  &.mdc-button--outlined.mat-success {
+    @extend .btn--success--outline;
+
+    border: 0;
+  }
+
+  &.mat-mdc-button.mat-success {
+    @extend .btn--success--link;
+  }
+
+  &.mat-mdc-unelevated-button:disabled:not(.loading) {
+    @extend .btn__disabled;
+  }
+
+  &.mat-mdc-outlined-button:disabled:not(.loading) {
+    @extend .btn__disabled--outline;
+  }
+
+  &.mat-mdc-button,
+  &.mat-mdc-outlined-button,
+  &.mat-mdc-unelevated-button,
+  &.mat-mdc-raised-button {
+    &.ecabs-button-v2--small {
+      @extend .btn--small;
+    }
+
+    &.ecabs-button-v2--medium {
+      @extend .btn--medium;
+    }
+
+    &.ecabs-button-v2--large {
+      @extend .btn--large;
+    }
+  }
+
+  .mdc-button__label {
+    @extend .btn__with-icon--wrapper;
+  }
+
+  ecabs-loading-spinner {
+    --ecabs-spinner-color: currentColor;
+  }
+
+  &.mat-mdc-icon-button {
+    min-width: auto;
+    line-height: 1;
+  }
+}
+
+// ::TODO Will be fixed in upgrade to >17.2.2
+.mat-mdc-unelevated-button.mat-primary,
+.mat-mdc-raised-button.mat-primary {
+  --mdc-filled-button-label-text-color: var(--color-white) !important;
+}