@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
|
@@ -18660,6 +18660,7 @@ class AiPromptCardComponent {
|
|
|
18660
18660
|
case 'edited': return 'Edited';
|
|
18661
18661
|
case 'duplicated': return 'Duplicated';
|
|
18662
18662
|
case 'deleted': return 'Deleted';
|
|
18663
|
+
case 'converted': return 'Converted';
|
|
18663
18664
|
default: return '';
|
|
18664
18665
|
}
|
|
18665
18666
|
}
|
|
@@ -18669,6 +18670,7 @@ class AiPromptCardComponent {
|
|
|
18669
18670
|
case 'edited': return { bg: '#FFFBEB', text: '#B45309', border: '#FDE68A' };
|
|
18670
18671
|
case 'duplicated': return { bg: '#EEF2FF', text: '#4338CA', border: '#C7D2FE' };
|
|
18671
18672
|
case 'deleted': return { bg: '#FEF2F2', text: '#B42318', border: '#FECACA' };
|
|
18673
|
+
case 'converted': return { bg: '#CFFAFE', text: '#155E75', border: '#A5F3FC' };
|
|
18672
18674
|
default: return { bg: '#F3F4F6', text: '#374151', border: '#E5E7EB' };
|
|
18673
18675
|
}
|
|
18674
18676
|
}
|
|
@@ -45641,33 +45643,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
45641
45643
|
|
|
45642
45644
|
/**
|
|
45643
45645
|
* Confirmation dialog shown before editing an AI-Agent step whose execution has
|
|
45644
|
-
* already generated sub-steps (CON-926).
|
|
45645
|
-
*
|
|
45646
|
+
* already generated sub-steps (CON-926). Also used by CON-1166 to review
|
|
45647
|
+
* AI-generated steps before persisting.
|
|
45648
|
+
*
|
|
45649
|
+
* The caller supplies the whole payload via the `config` input (one object, one
|
|
45650
|
+
* reference change = one re-render). `isOpen` stays separate so open/close
|
|
45651
|
+
* transitions don't force callers to rebuild the payload.
|
|
45646
45652
|
*/
|
|
45647
45653
|
class SubStepsConfirmationDialogComponent {
|
|
45648
|
-
constructor() {
|
|
45654
|
+
constructor(cdr) {
|
|
45655
|
+
this.cdr = cdr;
|
|
45649
45656
|
this.isOpen = false;
|
|
45650
|
-
this.
|
|
45651
|
-
this.description = '';
|
|
45652
|
-
this.options = [];
|
|
45653
|
-
this.cancelLabel = 'Cancel';
|
|
45654
|
-
this.disableBackdropClose = false;
|
|
45657
|
+
this.config = { options: [] };
|
|
45655
45658
|
this.selectionChange = new EventEmitter();
|
|
45656
45659
|
this.confirm = new EventEmitter();
|
|
45657
45660
|
this.closeModal = new EventEmitter();
|
|
45661
|
+
this.timeoutExpired = new EventEmitter();
|
|
45662
|
+
this.remainingSeconds = 0;
|
|
45663
|
+
this._tickIntervalId = null;
|
|
45664
|
+
this._timeoutEmitted = false;
|
|
45658
45665
|
}
|
|
45659
45666
|
ngOnChanges(changes) {
|
|
45660
|
-
var _a, _b;
|
|
45661
|
-
if (changes['
|
|
45662
|
-
const
|
|
45663
|
-
|
|
45664
|
-
|
|
45667
|
+
var _a, _b, _c, _d, _e;
|
|
45668
|
+
if (changes['config'] || changes['isOpen']) {
|
|
45669
|
+
const options = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : [];
|
|
45670
|
+
const incoming = (_c = this.config) === null || _c === void 0 ? void 0 : _c.selectedValue;
|
|
45671
|
+
const stillValid = options.some(o => o.value === this.selectedValue);
|
|
45672
|
+
if (incoming != null && options.some(o => o.value === incoming)) {
|
|
45673
|
+
this.selectedValue = incoming;
|
|
45674
|
+
}
|
|
45675
|
+
else if (!stillValid) {
|
|
45676
|
+
this.selectedValue = options.length ? options[0].value : undefined;
|
|
45677
|
+
}
|
|
45678
|
+
}
|
|
45679
|
+
if (changes['isOpen'] || changes['config']) {
|
|
45680
|
+
const timeoutSeconds = (_d = this.config) === null || _d === void 0 ? void 0 : _d.timeoutSeconds;
|
|
45681
|
+
if (this.isOpen && typeof timeoutSeconds === 'number' && timeoutSeconds > 0) {
|
|
45682
|
+
const prevTimeout = changes['config']
|
|
45683
|
+
? (_e = changes['config'].previousValue) === null || _e === void 0 ? void 0 : _e.timeoutSeconds
|
|
45684
|
+
: undefined;
|
|
45685
|
+
const opening = !!changes['isOpen'] && this.isOpen;
|
|
45686
|
+
if (opening || timeoutSeconds !== prevTimeout || this._tickIntervalId == null) {
|
|
45687
|
+
this._startCountdown(timeoutSeconds);
|
|
45688
|
+
}
|
|
45689
|
+
}
|
|
45690
|
+
else {
|
|
45691
|
+
this._stopCountdown();
|
|
45665
45692
|
}
|
|
45666
45693
|
}
|
|
45667
45694
|
}
|
|
45695
|
+
ngOnDestroy() {
|
|
45696
|
+
this._stopCountdown();
|
|
45697
|
+
}
|
|
45698
|
+
get title() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : 'This step has generated sub-steps'; }
|
|
45699
|
+
get description() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''; }
|
|
45700
|
+
get subtitle() { var _a; return (_a = this.config) === null || _a === void 0 ? void 0 : _a.subtitle; }
|
|
45701
|
+
get options() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : []; }
|
|
45702
|
+
get cancelLabel() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.cancelLabel) !== null && _b !== void 0 ? _b : 'Cancel'; }
|
|
45703
|
+
get disableBackdropClose() { var _a; return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.disableBackdropClose); }
|
|
45704
|
+
get hideCloseButton() { var _a; return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.hideCloseButton); }
|
|
45705
|
+
get hideCancel() { var _a; return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.hideCancel); }
|
|
45706
|
+
get warnings() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.warnings) !== null && _b !== void 0 ? _b : []; }
|
|
45707
|
+
get previewItems() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.previewItems) !== null && _b !== void 0 ? _b : []; }
|
|
45708
|
+
get previewOverflowCount() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.previewOverflowCount) !== null && _b !== void 0 ? _b : 0; }
|
|
45668
45709
|
get currentOption() {
|
|
45710
|
+
return this.options.find(o => o.value === this.selectedValue);
|
|
45711
|
+
}
|
|
45712
|
+
get showCountdown() {
|
|
45669
45713
|
var _a;
|
|
45670
|
-
|
|
45714
|
+
const t = (_a = this.config) === null || _a === void 0 ? void 0 : _a.timeoutSeconds;
|
|
45715
|
+
return typeof t === 'number' && t > 0;
|
|
45716
|
+
}
|
|
45717
|
+
get countdownLabel() {
|
|
45718
|
+
const total = Math.max(0, this.remainingSeconds);
|
|
45719
|
+
const m = Math.floor(total / 60);
|
|
45720
|
+
const s = total % 60;
|
|
45721
|
+
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
45671
45722
|
}
|
|
45672
45723
|
isSelected(option) {
|
|
45673
45724
|
return option.value === this.selectedValue;
|
|
@@ -45679,8 +45730,7 @@ class SubStepsConfirmationDialogComponent {
|
|
|
45679
45730
|
this.selectionChange.emit(option.value);
|
|
45680
45731
|
}
|
|
45681
45732
|
onRadioChange(event) {
|
|
45682
|
-
|
|
45683
|
-
const option = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(o => o.value === event.value);
|
|
45733
|
+
const option = this.options.find(o => o.value === event.value);
|
|
45684
45734
|
if (option)
|
|
45685
45735
|
this.onSelect(option);
|
|
45686
45736
|
}
|
|
@@ -45701,25 +45751,37 @@ class SubStepsConfirmationDialogComponent {
|
|
|
45701
45751
|
return;
|
|
45702
45752
|
this.confirm.emit(this.selectedValue);
|
|
45703
45753
|
}
|
|
45754
|
+
_startCountdown(seconds) {
|
|
45755
|
+
this._stopCountdown();
|
|
45756
|
+
this.remainingSeconds = seconds;
|
|
45757
|
+
this._timeoutEmitted = false;
|
|
45758
|
+
this._tickIntervalId = setInterval(() => {
|
|
45759
|
+
if (this.remainingSeconds > 0) {
|
|
45760
|
+
this.remainingSeconds--;
|
|
45761
|
+
this.cdr.markForCheck();
|
|
45762
|
+
if (this.remainingSeconds === 0 && !this._timeoutEmitted) {
|
|
45763
|
+
this._timeoutEmitted = true;
|
|
45764
|
+
this.timeoutExpired.emit();
|
|
45765
|
+
this._stopCountdown();
|
|
45766
|
+
}
|
|
45767
|
+
}
|
|
45768
|
+
}, 1000);
|
|
45769
|
+
}
|
|
45770
|
+
_stopCountdown() {
|
|
45771
|
+
if (this._tickIntervalId) {
|
|
45772
|
+
clearInterval(this._tickIntervalId);
|
|
45773
|
+
this._tickIntervalId = null;
|
|
45774
|
+
}
|
|
45775
|
+
}
|
|
45704
45776
|
}
|
|
45705
|
-
SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45706
|
-
SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen",
|
|
45777
|
+
SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
45778
|
+
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 });
|
|
45707
45779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, decorators: [{
|
|
45708
45780
|
type: Component,
|
|
45709
|
-
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
|
|
45710
|
-
}], propDecorators: { isOpen: [{
|
|
45711
|
-
type: Input
|
|
45712
|
-
}], title: [{
|
|
45713
|
-
type: Input
|
|
45714
|
-
}], description: [{
|
|
45715
|
-
type: Input
|
|
45716
|
-
}], options: [{
|
|
45717
|
-
type: Input
|
|
45718
|
-
}], selectedValue: [{
|
|
45719
|
-
type: Input
|
|
45720
|
-
}], cancelLabel: [{
|
|
45781
|
+
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: [] }]
|
|
45782
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
|
|
45721
45783
|
type: Input
|
|
45722
|
-
}],
|
|
45784
|
+
}], config: [{
|
|
45723
45785
|
type: Input
|
|
45724
45786
|
}], selectionChange: [{
|
|
45725
45787
|
type: Output
|
|
@@ -45727,6 +45789,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
45727
45789
|
type: Output
|
|
45728
45790
|
}], closeModal: [{
|
|
45729
45791
|
type: Output
|
|
45792
|
+
}], timeoutExpired: [{
|
|
45793
|
+
type: Output
|
|
45730
45794
|
}] } });
|
|
45731
45795
|
|
|
45732
45796
|
class UiKitModule {
|