Merge pull request #17 from criar-art/hidden-actions

Add `hiddenActions` Functionality to Dialog Component
criar-art · Oct 17, 2024 · 1d6606a · 1d6606a
2 parents 6c7e3e6 + f53e222
commit 1d6606a
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -98,44 +98,50 @@ export class WindowExampleComponent {
    ```
 
 - **`@Input() cancelText: string = 'Cancel';`**
-    - Example: Customize the cancel button text.
-    ```html
-    <up-window-angular cancelText="Dismiss" />
-    ```
+   - Example: Customize the cancel button text.
+   ```html
+   <up-window-angular cancelText="Dismiss" />
+   ```
 
 - **`@Input() confirmType: string = 'primary';`**
-    - Example: Set the style of the confirm button.
-    ```html
-    <up-window-angular confirmType="success" />
-    ```
+   - Example: Set the style of the confirm button.
+   ```html
+   <up-window-angular confirmType="success" />
+   ```
 
 - **`@Input() cancelType: string = 'default';`**
-    - Example: Set the style of the cancel button.
-    ```html
-    <up-window-angular cancelType="danger" />
-    ```
+   - Example: Set the style of the cancel button.
+   ```html
+   <up-window-angular cancelType="danger" />
+   ```
 
 - **`@Input() buttonAlignment: 'start' | 'end' | 'center' = 'end';`**
-    - Example: Align the buttons to the center.
-    ```html
-    <up-window-angular buttonAlignment="center" />
-    ```
+   - Example: Align the buttons to the center.
+   ```html
+   <up-window-angular buttonAlignment="center" />
+   ```
 
 - **`@Input() onConfirmClick: () => void = () => this.onConfirm();`**
-    - Example: Custom confirm action.
-    ```typescript
-    onConfirm() {
-      console.log('Confirmed!');
-    }
-    ```
+   - Example: Custom confirm action.
+   ```typescript
+   onConfirm() {
+     console.log('Confirmed!');
+   }
+   ```
 
 - **`@Input() onCancelClick: () => void = () => this.onCancel();`**
-    - Example: Custom cancel action.
-    ```typescript
-    onCancel() {
-      console.log('Cancelled!');
-    }
-    ```
+   - Example: Custom cancel action.
+   ```typescript
+   onCancel() {
+     console.log('Cancelled!');
+   }
+   ```
+
+- **`@Input() hiddenActions: boolean = false;`**
+   - Example: Control the visibility of action buttons (confirm and cancel). When set to `true`, the action buttons will not be displayed.
+   ```html
+   <up-window-angular [hiddenActions]="true" />
+   ```
 
 ### Outputs
 

diff --git a/projects/up-window-angular/README.md b/projects/up-window-angular/README.md
@@ -98,44 +98,50 @@ export class WindowExampleComponent {
    ```
 
 - **`@Input() cancelText: string = 'Cancel';`**
-    - Example: Customize the cancel button text.
-    ```html
-    <up-window-angular cancelText="Dismiss" />
-    ```
+   - Example: Customize the cancel button text.
+   ```html
+   <up-window-angular cancelText="Dismiss" />
+   ```
 
 - **`@Input() confirmType: string = 'primary';`**
-    - Example: Set the style of the confirm button.
-    ```html
-    <up-window-angular confirmType="success" />
-    ```
+   - Example: Set the style of the confirm button.
+   ```html
+   <up-window-angular confirmType="success" />
+   ```
 
 - **`@Input() cancelType: string = 'default';`**
-    - Example: Set the style of the cancel button.
-    ```html
-    <up-window-angular cancelType="danger" />
-    ```
+   - Example: Set the style of the cancel button.
+   ```html
+   <up-window-angular cancelType="danger" />
+   ```
 
 - **`@Input() buttonAlignment: 'start' | 'end' | 'center' = 'end';`**
-    - Example: Align the buttons to the center.
-    ```html
-    <up-window-angular buttonAlignment="center" />
-    ```
+   - Example: Align the buttons to the center.
+   ```html
+   <up-window-angular buttonAlignment="center" />
+   ```
 
 - **`@Input() onConfirmClick: () => void = () => this.onConfirm();`**
-    - Example: Custom confirm action.
-    ```typescript
-    onConfirm() {
-      console.log('Confirmed!');
-    }
-    ```
+   - Example: Custom confirm action.
+   ```typescript
+   onConfirm() {
+     console.log('Confirmed!');
+   }
+   ```
 
 - **`@Input() onCancelClick: () => void = () => this.onCancel();`**
-    - Example: Custom cancel action.
-    ```typescript
-    onCancel() {
-      console.log('Cancelled!');
-    }
-    ```
+   - Example: Custom cancel action.
+   ```typescript
+   onCancel() {
+     console.log('Cancelled!');
+   }
+   ```
+
+- **`@Input() hiddenActions: boolean = false;`**
+   - Example: Control the visibility of action buttons (confirm and cancel). When set to `true`, the action buttons will not be displayed.
+   ```html
+   <up-window-angular [hiddenActions]="true" />
+   ```
 
 ### Outputs
 

diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.html b/projects/up-window-angular/src/lib/up-window-angular.component.html
@@ -15,7 +15,7 @@
     [ngClass]="getClass()"
     (click)="$event.stopPropagation()"
   >
-    @if(!restrictMode) {
+    @if(!restrictMode || hiddenActions) {
       <button
         class="close-window"
         aria-label="Close window"
@@ -43,23 +43,25 @@ <h4 id="dialog-description" class="up-window-subtitle">
       <ng-content></ng-content>
     </div>
 
-    <div class="up-window-footer" [ngClass]="'align-' + buttonAlignment">
-      <button
-        class="btn btn-cancel"
-        [ngClass]="getButtonClass(cancelType)"
-        (click)="onCancel()"
-        [attr.aria-label]="cancelText"
-      >
-        {{ cancelText }}
-      </button>
-      <button
-        class="btn btn-confirm"
-        [ngClass]="getButtonClass(confirmType)"
-        (click)="onConfirm()"
-        [attr.aria-label]="confirmText"
-      >
-        {{ confirmText }}
-      </button>
-    </div>
+    @if(!hiddenActions) {
+      <div class="up-window-footer" [ngClass]="'align-' + buttonAlignment">
+        <button
+          class="btn btn-cancel"
+          [ngClass]="getButtonClass(cancelType)"
+          (click)="onCancel()"
+          [attr.aria-label]="cancelText"
+        >
+          {{ cancelText }}
+        </button>
+        <button
+          class="btn btn-confirm"
+          [ngClass]="getButtonClass(confirmType)"
+          (click)="onConfirm()"
+          [attr.aria-label]="confirmText"
+        >
+          {{ confirmText }}
+        </button>
+      </div>
+    }
   </div>
 </div>
diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts b/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts
@@ -213,4 +213,28 @@ describe('UpWindowAngularComponent', () => {
     const overlayElement = fixture.debugElement.query(By.css('.overlay'));
     expect(overlayElement.classes['blur']).toBeFalsy();
   });
+
+  it('should not show confirm and cancel buttons if hiddenActions is true', () => {
+    component.hiddenActions = true;
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const confirmButton = fixture.debugElement.query(By.css('.btn-confirm'));
+    const cancelButton = fixture.debugElement.query(By.css('.btn-cancel'));
+
+    expect(confirmButton).toBeNull();
+    expect(cancelButton).toBeNull();
+  });
+
+  it('should show confirm and cancel buttons if hiddenActions is false', () => {
+    component.hiddenActions = false;
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const confirmButton = fixture.debugElement.query(By.css('.btn-confirm'));
+    const cancelButton = fixture.debugElement.query(By.css('.btn-cancel'));
+
+    expect(confirmButton).toBeTruthy();
+    expect(cancelButton).toBeTruthy();
+  });
 });
diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.ts b/projects/up-window-angular/src/lib/up-window-angular.component.ts
@@ -33,6 +33,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   @Input() restrictMode: boolean = false;
   @Input() fullScreen: boolean = false;
   @Input() blur: boolean = false;
+  @Input() hiddenActions: boolean = false;
   @Input() confirmText: string = 'Confirm';
   @Input() cancelText: string = 'Cancel';
   @Input() confirmType: string = 'primary';

diff --git a/src/app/examples/mode/mode.component.html b/src/app/examples/mode/mode.component.html
@@ -28,6 +28,7 @@ <h2 class="content-title">Mode</h2>
       [isOpen]="isWindowOpenFullScreen"
       title="Fullscreen Mode"
       [fullScreen]="true"
+      [hiddenActions]="true"
     >
       <p class="fullscreen-description">
         Welcome to the Fullscreen Mode! This mode allows you to immerse yourself