tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSC: nav with modal event

Browse source
This commit is contained in:
Tykayn 2025-09-26 12:42:25 +02:00 • committed by tykayn
parent 8ef68379de
commit 2303c9d612
6 changed files with 55 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

24
my-workspace/projects/sae-lib/alert-box/alert-box.html
View file

@ -1,16 +1,18 @@
<div class="alert is-{{alertKind}}">
@if (alertKind == "warning") {
<i class="ri-triangle-line"></i>
}
@if (alertKind == "danger") {
<i class="ri-triangle-line"></i>
}
@if (alertKind == "error") {
<i class="ri-triangle-line"></i>
}
<slot [innerHTML]="message " name="main">
<div class="icon">
@if (alertKind == "warning") {
<i class="ri-triangle-line"></i>
}
@if (alertKind == "danger") {
<i class="ri-triangle-line"></i>
}
@if (alertKind == "error") {
<i class="ri-triangle-line"></i>
}
</div>
<slot [innerHTML]="message " name="main">
<ng-content></ng-content>
</slot>
<div (click)="onCloseClicked()" class="close-button button">x</div>
<ng-content></ng-content>
</div>

6
my-workspace/projects/sae-lib/alert-box/alert-box.scss
View file

@ -1,6 +1,12 @@
@use '../src/styles/variables';
:host {
.alert {
display: flex;
align-content: center;
justify-items: center;
}
i {
margin-right: 16px;
}

18
my-workspace/projects/sae-lib/modal/confirm/confirm.html
View file

@ -22,12 +22,18 @@
</div>
<div class="actions">
<ng-content (click)="confirm()" select="modal-confirm">
<sae-m-button [kind]="'ghost'">Yes</sae-m-button>
</ng-content>
<ng-content (click)="reject()" select="modal-reject">
<sae-m-button [kind]="'primary'">No, i stay</sae-m-button>
</ng-content>
<div (click)="confirm()" class="confirm">
<ng-content select="modal-confirm">
<sae-m-button [kind]="'ghost'">Yes</sae-m-button>
</ng-content>
</div>
<div (click)="reject()" class="reject">
<ng-content select="modal-reject">
<sae-m-button [kind]="'primary'">No, i stay</sae-m-button>
</ng-content>
</div>
</div>
</div>
</div>

10
my-workspace/projects/sae-lib/modal/confirm/confirm.ts
View file

@ -1,4 +1,4 @@
import {Component, Input} from '@angular/core';
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {MainButton} from '../../buttons/main-button/main-button';
import {AlertBox} from '../../alert-box/alert-box';
@ -14,12 +14,16 @@ import {AlertBox} from '../../alert-box/alert-box';
export class Confirm {
@Input() showWhen: any = false;
@Output() onConfirmation: EventEmitter<any> = new EventEmitter();
@Output() onRejection: EventEmitter<any> = new EventEmitter();
confirm() {
console.log('confirm button clicked')
this.onConfirmation.emit('confirmed');
}
reject() {
console.log('reject button clicked')
this.onRejection.emit('rejected');
}
}