@cqa-lib/cqa-ui 1.1.508 → 1.1.509
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/ai-prompt-card/ai-prompt-card.component.mjs +3 -1
- package/esm2020/lib/sub-steps-confirmation-dialog/sub-steps-confirmation-dialog.component.mjs +94 -31
- package/fesm2015/cqa-lib-cqa-ui.mjs +95 -31
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +94 -29
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/ai-prompt-card/ai-prompt-card.component.d.ts +1 -1
- package/lib/sub-steps-confirmation-dialog/sub-steps-confirmation-dialog.component.d.ts +72 -11
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -18684,6 +18684,7 @@ class AiPromptCardComponent {
|
|
|
18684
18684
|
case 'edited': return 'Edited';
|
|
18685
18685
|
case 'duplicated': return 'Duplicated';
|
|
18686
18686
|
case 'deleted': return 'Deleted';
|
|
18687
|
+
case 'converted': return 'Converted';
|
|
18687
18688
|
default: return '';
|
|
18688
18689
|
}
|
|
18689
18690
|
}
|
|
@@ -18693,6 +18694,7 @@ class AiPromptCardComponent {
|
|
|
18693
18694
|
case 'edited': return { bg: '#FFFBEB', text: '#B45309', border: '#FDE68A' };
|
|
18694
18695
|
case 'duplicated': return { bg: '#EEF2FF', text: '#4338CA', border: '#C7D2FE' };
|
|
18695
18696
|
case 'deleted': return { bg: '#FEF2F2', text: '#B42318', border: '#FECACA' };
|
|
18697
|
+
case 'converted': return { bg: '#CFFAFE', text: '#155E75', border: '#A5F3FC' };
|
|
18696
18698
|
default: return { bg: '#F3F4F6', text: '#374151', border: '#E5E7EB' };
|
|
18697
18699
|
}
|
|
18698
18700
|
}
|
|
@@ -45491,31 +45493,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
45491
45493
|
|
|
45492
45494
|
/**
|
|
45493
45495
|
* Confirmation dialog shown before editing an AI-Agent step whose execution has
|
|
45494
|
-
* already generated sub-steps (CON-926).
|
|
45495
|
-
*
|
|
45496
|
+
* already generated sub-steps (CON-926). Also used by CON-1166 to review
|
|
45497
|
+
* AI-generated steps before persisting.
|
|
45498
|
+
*
|
|
45499
|
+
* The caller supplies the whole payload via the `config` input (one object, one
|
|
45500
|
+
* reference change = one re-render). `isOpen` stays separate so open/close
|
|
45501
|
+
* transitions don't force callers to rebuild the payload.
|
|
45496
45502
|
*/
|
|
45497
45503
|
class SubStepsConfirmationDialogComponent {
|
|
45498
|
-
constructor() {
|
|
45504
|
+
constructor(cdr) {
|
|
45505
|
+
this.cdr = cdr;
|
|
45499
45506
|
this.isOpen = false;
|
|
45500
|
-
this.
|
|
45501
|
-
this.description = '';
|
|
45502
|
-
this.options = [];
|
|
45503
|
-
this.cancelLabel = 'Cancel';
|
|
45504
|
-
this.disableBackdropClose = false;
|
|
45507
|
+
this.config = { options: [] };
|
|
45505
45508
|
this.selectionChange = new EventEmitter();
|
|
45506
45509
|
this.confirm = new EventEmitter();
|
|
45507
45510
|
this.closeModal = new EventEmitter();
|
|
45511
|
+
this.timeoutExpired = new EventEmitter();
|
|
45512
|
+
this.remainingSeconds = 0;
|
|
45513
|
+
this._tickIntervalId = null;
|
|
45514
|
+
this._timeoutEmitted = false;
|
|
45508
45515
|
}
|
|
45509
45516
|
ngOnChanges(changes) {
|
|
45510
|
-
if (changes['
|
|
45511
|
-
const
|
|
45512
|
-
|
|
45513
|
-
|
|
45517
|
+
if (changes['config'] || changes['isOpen']) {
|
|
45518
|
+
const options = this.config?.options ?? [];
|
|
45519
|
+
const incoming = this.config?.selectedValue;
|
|
45520
|
+
const stillValid = options.some(o => o.value === this.selectedValue);
|
|
45521
|
+
if (incoming != null && options.some(o => o.value === incoming)) {
|
|
45522
|
+
this.selectedValue = incoming;
|
|
45523
|
+
}
|
|
45524
|
+
else if (!stillValid) {
|
|
45525
|
+
this.selectedValue = options.length ? options[0].value : undefined;
|
|
45526
|
+
}
|
|
45527
|
+
}
|
|
45528
|
+
if (changes['isOpen'] || changes['config']) {
|
|
45529
|
+
const timeoutSeconds = this.config?.timeoutSeconds;
|
|
45530
|
+
if (this.isOpen && typeof timeoutSeconds === 'number' && timeoutSeconds > 0) {
|
|
45531
|
+
const prevTimeout = changes['config']
|
|
45532
|
+
? changes['config'].previousValue?.timeoutSeconds
|
|
45533
|
+
: undefined;
|
|
45534
|
+
const opening = !!changes['isOpen'] && this.isOpen;
|
|
45535
|
+
if (opening || timeoutSeconds !== prevTimeout || this._tickIntervalId == null) {
|
|
45536
|
+
this._startCountdown(timeoutSeconds);
|
|
45537
|
+
}
|
|
45538
|
+
}
|
|
45539
|
+
else {
|
|
45540
|
+
this._stopCountdown();
|
|
45514
45541
|
}
|
|
45515
45542
|
}
|
|
45516
45543
|
}
|
|
45544
|
+
ngOnDestroy() {
|
|
45545
|
+
this._stopCountdown();
|
|
45546
|
+
}
|
|
45547
|
+
get title() { return this.config?.title ?? 'This step has generated sub-steps'; }
|
|
45548
|
+
get description() { return this.config?.description ?? ''; }
|
|
45549
|
+
get subtitle() { return this.config?.subtitle; }
|
|
45550
|
+
get options() { return this.config?.options ?? []; }
|
|
45551
|
+
get cancelLabel() { return this.config?.cancelLabel ?? 'Cancel'; }
|
|
45552
|
+
get disableBackdropClose() { return !!this.config?.disableBackdropClose; }
|
|
45553
|
+
get hideCloseButton() { return !!this.config?.hideCloseButton; }
|
|
45554
|
+
get hideCancel() { return !!this.config?.hideCancel; }
|
|
45555
|
+
get warnings() { return this.config?.warnings ?? []; }
|
|
45556
|
+
get previewItems() { return this.config?.previewItems ?? []; }
|
|
45557
|
+
get previewOverflowCount() { return this.config?.previewOverflowCount ?? 0; }
|
|
45517
45558
|
get currentOption() {
|
|
45518
|
-
return this.options
|
|
45559
|
+
return this.options.find(o => o.value === this.selectedValue);
|
|
45560
|
+
}
|
|
45561
|
+
get showCountdown() {
|
|
45562
|
+
const t = this.config?.timeoutSeconds;
|
|
45563
|
+
return typeof t === 'number' && t > 0;
|
|
45564
|
+
}
|
|
45565
|
+
get countdownLabel() {
|
|
45566
|
+
const total = Math.max(0, this.remainingSeconds);
|
|
45567
|
+
const m = Math.floor(total / 60);
|
|
45568
|
+
const s = total % 60;
|
|
45569
|
+
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
45519
45570
|
}
|
|
45520
45571
|
isSelected(option) {
|
|
45521
45572
|
return option.value === this.selectedValue;
|
|
@@ -45527,7 +45578,7 @@ class SubStepsConfirmationDialogComponent {
|
|
|
45527
45578
|
this.selectionChange.emit(option.value);
|
|
45528
45579
|
}
|
|
45529
45580
|
onRadioChange(event) {
|
|
45530
|
-
const option = this.options
|
|
45581
|
+
const option = this.options.find(o => o.value === event.value);
|
|
45531
45582
|
if (option)
|
|
45532
45583
|
this.onSelect(option);
|
|
45533
45584
|
}
|
|
@@ -45548,25 +45599,37 @@ class SubStepsConfirmationDialogComponent {
|
|
|
45548
45599
|
return;
|
|
45549
45600
|
this.confirm.emit(this.selectedValue);
|
|
45550
45601
|
}
|
|
45602
|
+
_startCountdown(seconds) {
|
|
45603
|
+
this._stopCountdown();
|
|
45604
|
+
this.remainingSeconds = seconds;
|
|
45605
|
+
this._timeoutEmitted = false;
|
|
45606
|
+
this._tickIntervalId = setInterval(() => {
|
|
45607
|
+
if (this.remainingSeconds > 0) {
|
|
45608
|
+
this.remainingSeconds--;
|
|
45609
|
+
this.cdr.markForCheck();
|
|
45610
|
+
if (this.remainingSeconds === 0 && !this._timeoutEmitted) {
|
|
45611
|
+
this._timeoutEmitted = true;
|
|
45612
|
+
this.timeoutExpired.emit();
|
|
45613
|
+
this._stopCountdown();
|
|
45614
|
+
}
|
|
45615
|
+
}
|
|
45616
|
+
}, 1000);
|
|
45617
|
+
}
|
|
45618
|
+
_stopCountdown() {
|
|
45619
|
+
if (this._tickIntervalId) {
|
|
45620
|
+
clearInterval(this._tickIntervalId);
|
|
45621
|
+
this._tickIntervalId = null;
|
|
45622
|
+
}
|
|
45623
|
+
}
|
|
45551
45624
|
}
|
|
45552
|
-
SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45553
|
-
SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen",
|
|
45625
|
+
SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
45626
|
+
SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen", config: "config" }, outputs: { selectionChange: "selectionChange", confirm: "confirm", closeModal: "closeModal", timeoutExpired: "timeoutExpired" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n style=\"position: fixed; inset: 0; z-index: 9999;\">\n <div\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n {{ title }}\n </h2>\n <span *ngIf=\"subtitle\"\n class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-m-0\">\n {{ subtitle }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <span *ngIf=\"showCountdown\"\n class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4A5565] cqa-rounded cqa-px-2 cqa-py-0.5\"\n style=\"background: #F3F4F6;\"\n [title]=\"'Auto-discards when timer reaches 0'\">\n {{ countdownLabel }}\n </span>\n <button *ngIf=\"!hideCloseButton\" type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n (click)=\"onClose()\"\n aria-label=\"Close\">\n <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n </button>\n </div>\n </div>\n\n <!-- Body -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n <p *ngIf=\"description\"\n class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n {{ description }}\n </p>\n\n <!-- Warnings (amber) -->\n <div *ngIf=\"warnings?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-px-3 cqa-py-2\"\n style=\"background: #FEF3C7; border: 1px solid #FDE68A;\">\n <div *ngFor=\"let warn of warnings\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-text-[12px] cqa-text-[#92400E]\">\n <span aria-hidden=\"true\">\u26A0</span>\n <span>{{ warn }}</span>\n </div>\n </div>\n\n <!-- Preview list (optional) -->\n <div *ngIf=\"previewItems?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-3 cqa-py-2 cqa-max-h-[100px] cqa-overflow-y-auto\">\n <div *ngFor=\"let item of previewItems; let i = index\"\n class=\"cqa-flex cqa-items-baseline cqa-gap-2 cqa-text-[12px] cqa-text-[#101828]\">\n <span class=\"cqa-text-[#4A5565] cqa-flex-shrink-0\">{{ i + 1 }}.</span>\n <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ item.primary }}</span>\n <span *ngIf=\"item.secondary\" class=\"cqa-text-[#4A5565]\">\u2014 {{ item.secondary }}</span>\n </div>\n <div *ngIf=\"previewOverflowCount > 0\"\n class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-italic cqa-mt-1\">\n + {{ previewOverflowCount }} more step<span *ngIf=\"previewOverflowCount !== 1\">s</span>\n </div>\n </div>\n\n <mat-radio-group\n class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n [value]=\"selectedValue\"\n (change)=\"onRadioChange($event)\">\n <label\n *ngFor=\"let option of options\"\n class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n [ngClass]=\"isSelected(option)\n ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span\n class=\"cqa-text-[12px] cqa-font-bold\"\n [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n {{ option.title }}\n </span>\n <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n {{ option.description }}\n </span>\n </div>\n </label>\n </mat-radio-group>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n <div *ngIf=\"!hideCancel\" class=\"cqa-flex-1\" style=\"width: 50%;\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [text]=\"cancelLabel\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1\" [style.width]=\"hideCancel ? '100%' : '50%'\">\n <cqa-button\n *ngIf=\"currentOption\"\n [variant]=\"currentOption.buttonVariant || 'filled'\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [text]=\"currentOption.buttonLabel\"\n (clicked)=\"onConfirm()\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45554
45627
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, decorators: [{
|
|
45555
45628
|
type: Component,
|
|
45556
|
-
args: [{ selector: 'cqa-sub-steps-confirmation-dialog', template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n style=\"position: fixed; inset: 0; z-index: 9999;\">\n <div\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n
|
|
45557
|
-
}], propDecorators: { isOpen: [{
|
|
45558
|
-
type: Input
|
|
45559
|
-
}], title: [{
|
|
45560
|
-
type: Input
|
|
45561
|
-
}], description: [{
|
|
45562
|
-
type: Input
|
|
45563
|
-
}], options: [{
|
|
45564
|
-
type: Input
|
|
45565
|
-
}], selectedValue: [{
|
|
45566
|
-
type: Input
|
|
45567
|
-
}], cancelLabel: [{
|
|
45629
|
+
args: [{ selector: 'cqa-sub-steps-confirmation-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n style=\"position: fixed; inset: 0; z-index: 9999;\">\n <div\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n {{ title }}\n </h2>\n <span *ngIf=\"subtitle\"\n class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-m-0\">\n {{ subtitle }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <span *ngIf=\"showCountdown\"\n class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4A5565] cqa-rounded cqa-px-2 cqa-py-0.5\"\n style=\"background: #F3F4F6;\"\n [title]=\"'Auto-discards when timer reaches 0'\">\n {{ countdownLabel }}\n </span>\n <button *ngIf=\"!hideCloseButton\" type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n (click)=\"onClose()\"\n aria-label=\"Close\">\n <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n </button>\n </div>\n </div>\n\n <!-- Body -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n <p *ngIf=\"description\"\n class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n {{ description }}\n </p>\n\n <!-- Warnings (amber) -->\n <div *ngIf=\"warnings?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-px-3 cqa-py-2\"\n style=\"background: #FEF3C7; border: 1px solid #FDE68A;\">\n <div *ngFor=\"let warn of warnings\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-text-[12px] cqa-text-[#92400E]\">\n <span aria-hidden=\"true\">\u26A0</span>\n <span>{{ warn }}</span>\n </div>\n </div>\n\n <!-- Preview list (optional) -->\n <div *ngIf=\"previewItems?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-3 cqa-py-2 cqa-max-h-[100px] cqa-overflow-y-auto\">\n <div *ngFor=\"let item of previewItems; let i = index\"\n class=\"cqa-flex cqa-items-baseline cqa-gap-2 cqa-text-[12px] cqa-text-[#101828]\">\n <span class=\"cqa-text-[#4A5565] cqa-flex-shrink-0\">{{ i + 1 }}.</span>\n <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ item.primary }}</span>\n <span *ngIf=\"item.secondary\" class=\"cqa-text-[#4A5565]\">\u2014 {{ item.secondary }}</span>\n </div>\n <div *ngIf=\"previewOverflowCount > 0\"\n class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-italic cqa-mt-1\">\n + {{ previewOverflowCount }} more step<span *ngIf=\"previewOverflowCount !== 1\">s</span>\n </div>\n </div>\n\n <mat-radio-group\n class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n [value]=\"selectedValue\"\n (change)=\"onRadioChange($event)\">\n <label\n *ngFor=\"let option of options\"\n class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n [ngClass]=\"isSelected(option)\n ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span\n class=\"cqa-text-[12px] cqa-font-bold\"\n [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n {{ option.title }}\n </span>\n <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n {{ option.description }}\n </span>\n </div>\n </label>\n </mat-radio-group>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n <div *ngIf=\"!hideCancel\" class=\"cqa-flex-1\" style=\"width: 50%;\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [text]=\"cancelLabel\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1\" [style.width]=\"hideCancel ? '100%' : '50%'\">\n <cqa-button\n *ngIf=\"currentOption\"\n [variant]=\"currentOption.buttonVariant || 'filled'\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [text]=\"currentOption.buttonLabel\"\n (clicked)=\"onConfirm()\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
45630
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
|
|
45568
45631
|
type: Input
|
|
45569
|
-
}],
|
|
45632
|
+
}], config: [{
|
|
45570
45633
|
type: Input
|
|
45571
45634
|
}], selectionChange: [{
|
|
45572
45635
|
type: Output
|
|
@@ -45574,6 +45637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
45574
45637
|
type: Output
|
|
45575
45638
|
}], closeModal: [{
|
|
45576
45639
|
type: Output
|
|
45640
|
+
}], timeoutExpired: [{
|
|
45641
|
+
type: Output
|
|
45577
45642
|
}] } });
|
|
45578
45643
|
|
|
45579
45644
|
class UiKitModule {
|