asksuite-citrus 2.0.0-beta.4 → 2.0.0-beta.6

package/lib/components/modal/confirmation-modal/confirmation-modal.component.d.ts

@@ -1,4 +1,5 @@
-import { ModalRef } from "../../../services/modal";
+import { ButtonAppearance, ButtonColor } from '../../../directives/button/ask-base-button.directive';
+import { ModalRef } from '../../../services/modal';
 import * as i0 from "@angular/core";
 export declare class ConfirmationModalComponent {
     protected modalRef: ModalRef;
@@ -6,6 +7,7 @@ export declare class ConfirmationModalComponent {
     protected text: string;
     protected confirmButtonText: string | undefined;
     protected cancelButtonText: string | undefined;
+    protected buttons: ButtonConfig[];
     constructor(modalRef: ModalRef, data: AskModalConfirmData);
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmationModalComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmationModalComponent, "lib-confirmation-modal", never, {}, {}, never, never, false, never>;
@@ -13,6 +15,14 @@ export declare class ConfirmationModalComponent {
 export interface AskModalConfirmData {
     title: string;
     text: string;
+    buttons?: ButtonConfig[];
     confirmButtonText?: string;
     cancelButtonText?: string;
 }
+type ButtonConfig = {
+    text: string;
+    appearance?: ButtonAppearance;
+    color: ButtonColor;
+    value: string;
+};
+export {};

package/lib/directives/button/ask-base-button.directive.d.ts

@@ -1,11 +1,17 @@
-import { ElementRef, OnChanges, SimpleChanges } from "@angular/core";
+import { ElementRef, OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare abstract class AskBaseButtonDirective implements OnChanges {
     private el;
-    color: 'primary' | 'secondary' | '';
+    color: ButtonColor;
+    size: ButtonSize;
     protected constructor(el: ElementRef, className: string);
     ngOnChanges(changes: SimpleChanges): void;
     private updateColor;
+    private updateSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<AskBaseButtonDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AskBaseButtonDirective, never, never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AskBaseButtonDirective, never, never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
 }
+type ButtonSize = 'x-large' | 'large' | 'default' | 'medium' | 'small' | 'mini';
+export type ButtonAppearance = 'outline' | 'text' | 'default';
+export type ButtonColor = 'primary' | 'secondary' | 'danger';
+export {};

package/lib/services/modal/modal.config.d.ts

@@ -1,9 +1,10 @@
-import { InjectionToken } from "@angular/core";
+import { InjectionToken } from '@angular/core';
 export type ModalConfig = {
     hasBackdrop?: boolean;
     onScroll?: 'close' | 'keep';
     data?: any;
     fullscreen?: boolean;
+    maxWidth?: number;
 };
 export declare const ASK_MODAL_CONFIG: InjectionToken<ModalConfig>;
 export declare const ASK_MODAL_DATA: InjectionToken<any>;

package/lib/services/modal/modal.service.d.ts

@@ -1,9 +1,9 @@
+import { Overlay } from '@angular/cdk/overlay';
 import { Injector } from '@angular/core';
-import { Overlay } from "@angular/cdk/overlay";
-import { ModalRef } from "./modal-ref";
-import { ModalConfig } from "./modal.config";
-import { ComponentType } from "../../components/modal/modal.component";
-import { AskModalConfirmData } from "../../components/modal/confirmation-modal/confirmation-modal.component";
+import { AskModalConfirmData } from '../../components/modal/confirmation-modal/confirmation-modal.component';
+import { ComponentType } from '../../components/modal/modal.component';
+import { ModalRef } from './modal-ref';
+import { ModalConfig } from './modal.config';
 import * as i0 from "@angular/core";
 export declare class ModalService {
     private overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asksuite-citrus",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "peerDependencies": {
     "@angular/common": "^17.3.7",
     "@angular/core": "^17.3.7",

package/styles/button.scss

@@ -1,23 +1,47 @@
 @import "./tokens";
 
 @mixin baseButton {
-  padding: 8px 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 16px 24px;
   border-radius: $radii-sm;
   border: none;
   outline: none;
-  height: 48px;
   font-size: $font-md;
   transition: background-color .1s, box-shadow .1s;
   cursor: pointer;
   font-weight: $font-weight-medium;
   color: var(--grey-500);
+
+  &.-x-large {
+    padding: 24px 32px;
+  }
+
+  &.-large {
+    padding: 20px 28px;
+  }
+
+  &.-medium {
+    padding: 12px 20px;
+  }
+
+  &.-small {
+    padding: 8px 16px;
+  }
+
+  &.-mini {
+    padding: 4px 8px;
+  }
 }
 
 .ask-button {
   @include baseButton;
   background: white;
 
-  &:not(.-primary, .-secondary) {
+  &:not(.-primary, .-secondary, .-danger) {
     box-shadow: 0 1px 2px 0 rgba(42, 48, 66, 0.16);
   }
 
@@ -36,16 +60,24 @@
     background-color: rgba(#fff,.8);
   }
 
-  &:disabled {
-    cursor: not-allowed;
-    background-color: $grey-300;
+  &.-danger:active:not(:disabled) {
+    background-color: rgba($error-red,.8);
+  }
+
+  &.-danger {
+    background: $error-red;
+    color: white;
   }
 
-  // types
   &.-primary {
     background: $asksuite-orange;
     color: white;
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: $grey-300;
+  }
 }
 
 .ask-text-button {
@@ -57,18 +89,27 @@
     text-decoration: none;
     background: $grey-50;
   }
-  &:disabled {
-    cursor: not-allowed;
-    color: $grey-300;
-  }
 
   &.-primary {
-  color: var(--asksuite-orange);
+    color: var(--asksuite-orange);
   }
 
   &.-secondary {
     color: $grey-500;
   }
+
+  &.-danger {
+    color: $error-red;
+  }
+
+  &.-danger:active:not(:disabled) {
+    background-color: rgba($error-red, .1);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: $grey-300;
+  }
 }
 
 .ask-stroked-button {
@@ -86,18 +127,26 @@
     color: $grey-500;
   }
 
-  &:disabled {
-    cursor: not-allowed;
-    border-color: $grey-300;
-    color: $grey-300;
+  &.-danger {
+    color: $error-red;
+    border-color: $error-red;
   }
 
   &.-primary:active:not(:disabled) {
     background-color: rgba($asksuite-orange, .1);
   }
 
+  &.-danger:active:not(:disabled) {
+    background-color: rgba($error-red, .1);
+  }
+
   &.-secondary:active:not(:disabled) {
     background-color: rgba($grey-300, .8);
   }
 
+  &:disabled {
+    cursor: not-allowed;
+    border-color: $grey-300;
+    color: $grey-300;
+  }
 }

package/styles/modal.scss

@@ -27,6 +27,5 @@
   box-sizing: border-box;
   min-height: 52px;
   margin: 0;
-  padding: 8px;
   border-top: 1px solid rgba(0,0,0,0);
 }