diff --git a/README.md b/README.md index f66f1be..47336dd 100644 --- a/README.md +++ b/README.md @@ -98,44 +98,50 @@ export class WindowExampleComponent { ``` - **`@Input() cancelText: string = 'Cancel';`** - - Example: Customize the cancel button text. - ```html - - ``` + - Example: Customize the cancel button text. + ```html + + ``` - **`@Input() confirmType: string = 'primary';`** - - Example: Set the style of the confirm button. - ```html - - ``` + - Example: Set the style of the confirm button. + ```html + + ``` - **`@Input() cancelType: string = 'default';`** - - Example: Set the style of the cancel button. - ```html - - ``` + - Example: Set the style of the cancel button. + ```html + + ``` - **`@Input() buttonAlignment: 'start' | 'end' | 'center' = 'end';`** - - Example: Align the buttons to the center. - ```html - - ``` + - Example: Align the buttons to the center. + ```html + + ``` - **`@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 + + ``` ### Outputs diff --git a/projects/up-window-angular/README.md b/projects/up-window-angular/README.md index f66f1be..47336dd 100644 --- 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 - - ``` + - Example: Customize the cancel button text. + ```html + + ``` - **`@Input() confirmType: string = 'primary';`** - - Example: Set the style of the confirm button. - ```html - - ``` + - Example: Set the style of the confirm button. + ```html + + ``` - **`@Input() cancelType: string = 'default';`** - - Example: Set the style of the cancel button. - ```html - - ``` + - Example: Set the style of the cancel button. + ```html + + ``` - **`@Input() buttonAlignment: 'start' | 'end' | 'center' = 'end';`** - - Example: Align the buttons to the center. - ```html - - ``` + - Example: Align the buttons to the center. + ```html + + ``` - **`@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 + + ``` ### 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 index b3a6d47..dd5efda 100644 --- 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) { - - + @if(!hiddenActions) { +
+ + +
+ } 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 index d9e5cf6..3493055 100644 --- 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 index 13d16b8..2c20c67 100644 --- 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 index b895082..5a3678a 100644 --- a/src/app/examples/mode/mode.component.html +++ b/src/app/examples/mode/mode.component.html @@ -28,6 +28,7 @@

Mode

[isOpen]="isWindowOpenFullScreen" title="Fullscreen Mode" [fullScreen]="true" + [hiddenActions]="true" >

Welcome to the Fullscreen Mode! This mode allows you to immerse yourself