platformcommons-web-lib 1.0.0

package/src/lib/modules/confirmation-modal/components/confirmation-modal/confirmation-modal.component.scss

@@ -0,0 +1,395 @@
+.cc-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn 0.2s ease-in-out;
+
+    &--side-panel {
+        align-items: stretch;
+        justify-content: flex-end;
+    }
+}
+
+.cc-modal-container {
+    background: var(--cc-modal-bg);
+    border-radius: var(--cc-modal-radius);
+    box-shadow: var(--cc-modal-shadow);
+    border: var(--cc-modal-border, none);
+
+    display: flex;
+    flex-direction: column;
+    max-height: 90vh;
+    max-width: 90vw;
+    animation: slideIn 0.3s ease-out;
+    overflow: hidden;
+
+    &.side-panel {
+        max-height: 100vh;
+        animation: slideInRight 0.3s ease-out;
+        z-index: 1001;
+    }
+}
+
+// Header Styles
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cc-modal-header-padding);
+    border-bottom: var(--cc-modal-header-border-bottom);
+
+    &__content {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem; // 12px
+        flex: 1;
+    }
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        mat-icon {
+            font-size: var(--cc-modal-icon-size, 1.5rem);
+            width: var(--cc-modal-icon-size, 1.5rem);
+            height: var(--cc-modal-icon-size, 1.5rem);
+        }
+    }
+
+    &__custom-icon {
+        width: var(--cc-modal-icon-size, 1.5rem);
+        height: var(--cc-modal-icon-size, 1.5rem);
+        object-fit: contain;
+    }
+
+    &__title {
+        margin: 0;
+        font-size: var(--cc-modal-title-size);
+        font-weight: var(--cc-modal-title-weight);
+        line-height: 1.4;
+        color: var(--cc-modal-title-color);
+    }
+
+    &__close {
+        background: none;
+        border: none;
+        padding: 0.25rem; // 4px
+        cursor: pointer;
+        color: #6B7280;
+        transition: color 0.2s;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+            color: #111827;
+        }
+
+        mat-icon {
+            font-size: var(--cc-modal-close-icon-size, 1.25rem);
+            width: var(--cc-modal-close-icon-size, 1.25rem);
+            height: var(--cc-modal-close-icon-size, 1.25rem);
+        }
+    }
+
+    &__code-btn {
+        background: none;
+        border: none;
+        padding: 0.25rem;
+        margin-right: 0.5rem;
+        cursor: pointer;
+        color: #6B7280;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+            color: #EF4444;
+            transform: scale(1.1);
+        }
+
+        mat-icon {
+            font-size: 1.15rem;
+            width: 1.15rem;
+            height: 1.15rem;
+        }
+    }
+
+    &--dark {
+        background-color: var(--cc-modal-header-bg-dark, #262125);
+        border-bottom: none;
+
+        .modal-header__title {
+            color: var(--cc-modal-header-title-color-dark, #FFFFFF);
+        }
+
+        .modal-header__close {
+            color: var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, 0.7));
+
+            &:hover {
+                color: #FFFFFF;
+            }
+        }
+
+        .modal-header__code-btn {
+            color: var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, 0.7));
+
+            &:hover {
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+
+// Body Styles
+.cc-modal-body {
+    padding: var(--cc-modal-body-padding);
+    overflow-y: auto;
+    flex: 1;
+    color: var(--cc-modal-body-color);
+    font-size: 0.875rem; // 14px
+    line-height: 1.6;
+
+    // Allow custom form fields, inputs, etc.
+    ::ng-deep {
+
+        // Text inputs
+        input[type="text"],
+        textarea,
+        select {
+            width: 100%;
+            padding: var(--cc-modal-input-padding, 0.625rem 0.75rem);
+            border: 0.0625rem solid #D1D5DB; // 1px
+            border-radius: var(--cc-modal-input-radius, 0.375rem);
+            font-size: var(--cc-modal-input-font-size, 0.875rem);
+            transition: border-color 0.2s;
+
+            &:focus {
+                outline: none;
+                border-color: var(--cc-btn-primary-bg, #3b82f6);
+                box-shadow: 0 0 0 0.1875rem rgba(59, 130, 246, 0.1); // 3px
+            }
+        }
+
+        textarea {
+            resize: vertical;
+            min-height: var(--cc-modal-textarea-min-height, 6.25rem);
+        }
+
+        // Labels
+        label {
+            display: block;
+            margin-bottom: var(--cc-modal-label-margin-bottom, 0.5rem);
+            font-weight: 500;
+            color: var(--cc-modal-body-color);
+        }
+
+        // Required indicator
+        // .required::after {
+        //     content: ' *';
+        //     color: #EF4444;
+        // }
+    }
+}
+
+// Footer Styles
+.cc-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem; // 12px
+    padding: var(--cc-modal-footer-padding);
+    border-top: var(--cc-modal-footer-border-top);
+    background: var(--cc-modal-footer-bg);
+}
+
+// Button Styles - Delegating to Standard Button Theme Variables
+.cc-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem; // 8px
+    padding: var(--cc-btn-padding, 0.5rem 1rem);
+    font-family: var(--cc-btn-font-family, inherit);
+    font-weight: var(--cc-btn-font-weight, 500);
+    font-size: var(--cc-btn-font-size, 0.875rem);
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 5rem; // 80px
+
+    &:disabled {
+        opacity: var(--cc-btn-disabled-opacity, 0.6);
+        cursor: var(--cc-btn-disabled-cursor, not-allowed);
+    }
+
+    // Secondary (Cancel) - Mapped to Secondary Button Theme
+    &-secondary {
+        background: var(--cc-btn-secondary-bg);
+        color: var(--cc-btn-secondary-color);
+        border: var(--cc-btn-secondary-border);
+        border-radius: var(--cc-btn-secondary-radius);
+    }
+
+    // Primary - Mapped to Primary Button Theme
+    &-primary {
+        background: var(--cc-btn-primary-bg);
+        color: var(--cc-btn-primary-color);
+        border: var(--cc-btn-primary-border);
+        border-radius: var(--cc-btn-primary-radius);
+    }
+
+    // Danger
+    &-danger {
+        background: var(--cc-btn-danger-bg);
+        color: var(--cc-btn-danger-color);
+        border: var(--cc-btn-danger-border);
+        border-radius: var(--cc-btn-danger-radius);
+    }
+
+    // Warning
+    &-warning {
+        background: var(--cc-btn-warning-bg);
+        color: var(--cc-btn-warning-color);
+        border: var(--cc-btn-warning-border);
+        border-radius: var(--cc-btn-warning-radius);
+    }
+}
+
+// Loading Spinner
+.cc-btn-spinner {
+    width: var(--cc-modal-spinner-size, 1rem);
+    height: var(--cc-modal-spinner-size, 1rem);
+    border: 0.125rem solid rgba(255, 255, 255, 0.3); // 2px
+    border-top-color: #ffffff;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+}
+
+// Animations
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-1.25rem);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// Responsive
+@media (max-width: 40rem) {
+
+    // 640px
+    .cc-modal-container {
+        width: 95vw !important;
+        max-height: 95vh;
+    }
+
+    .modal-header {
+        padding: 1rem;
+    }
+
+    // 16px
+    .cc-modal-body {
+        padding: 1rem;
+    }
+
+    // 16px
+    .cc-modal-footer {
+        padding: 0.75rem 1rem; // 12px 16px
+        flex-direction: column;
+
+        .cc-btn {
+            width: 100%;
+        }
+    }
+}
+
+// Modal mode — strips card-inside-card appearance from smart-form content
+.cc-modal-body--form-mode {
+    padding: 0;
+    // min-height: 360px;
+
+    ::ng-deep {
+        .smart-form-wrapper,
+        .smart-form-skeleton {
+            box-shadow: none !important;
+            border: none !important;
+            padding: 0 !important;
+            border-radius: 0 !important;
+        }
+
+        // Disable the entry animation — translateY briefly causes the body to
+        // overflow and flash a scrollbar before settling
+        .smart-form-wrapper {
+            animation: none !important;
+        }
+
+        // Replace the tall multi-section skeleton with a centred spinner that
+        // occupies the same 360px as the body so the modal never changes height
+        .smart-form-skeleton {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            min-height: 360px !important;
+            gap: 0 !important;
+
+            > * { display: none !important; }
+
+            &::after {
+                content: '';
+                display: block;
+                width: 28px;
+                height: 28px;
+                border: 3px solid #E5E7EB;
+                border-top-color: #6366F1;
+                border-radius: 50%;
+                animation: cc-modal-skeleton-spin 0.7s linear infinite;
+            }
+        }
+
+        .form-section-container {
+            box-shadow: none !important;
+            border: none !important;
+        }
+    }
+}
+
+@keyframes cc-modal-skeleton-spin {
+    to { transform: rotate(360deg); }
+}

package/src/lib/modules/confirmation-modal/components/confirmation-modal/confirmation-modal.component.ts

@@ -0,0 +1,266 @@
+import {
+    Component,
+    Input,
+    Output,
+    EventEmitter,
+    OnInit,
+    OnDestroy,
+    HostListener
+} from '@angular/core';
+import { ConfirmationModalConfig } from '../../confirmation-modal.models';
+
+@Component({
+    selector: 'cc-confirmation-modal',
+    templateUrl: './confirmation-modal.component.html',
+    styleUrls: ['./confirmation-modal.component.scss'],
+    standalone: false
+})
+export class ConfirmationModalComponent implements OnInit, OnDestroy {
+    @Input() config!: ConfirmationModalConfig;
+    @Input() isOpen = false;
+    @Input() confirmDisabled = false;
+    @Input() confirmLoading = false;
+
+    @Output() confirm = new EventEmitter<void>();
+    @Output() cancel = new EventEmitter<void>();
+    @Output() close = new EventEmitter<void>();
+    @Output() showCodeSnippet = new EventEmitter<void>();
+
+    // Default configuration
+    private defaultConfig: Partial<ConfirmationModalConfig> = {
+        headerTheme: 'dark', // Changed to dark as per new default requirement
+        width: '560px',
+        size: 'md',
+        type: 'modal',
+        panelPosition: 'right',
+        panelSpacing: '0px',
+        closeOnBackdrop: true,
+        closeOnEsc: true,
+        showCloseButton: true,
+        cancelButton: {
+            label: '',
+            show: true
+        }
+    };
+
+    mergedConfig!: ConfirmationModalConfig;
+    private previousActiveElement: HTMLElement | null = null;
+    private isSubmitting = false;
+    private _resetSubmittingTimer?: ReturnType<typeof setTimeout>;
+
+    ngOnInit(): void {
+        this.updateConfig();
+        // Store currently focused element
+        this.previousActiveElement = document.activeElement as HTMLElement;
+
+        // Prevent body scroll when modal is open
+        if (this.isOpen) {
+            this.toggleBodyScroll(true);
+        }
+    }
+
+    ngOnChanges(): void {
+        this.updateConfig();
+        if (this.isOpen !== undefined) {
+            this.toggleBodyScroll(this.isOpen);
+            if (!this.isOpen) {
+                this.isSubmitting = false; // Reset submission guard when modal closes
+            }
+        }
+        // Reset submission guard when loading state finishes
+        if (this.isSubmitting && !this.confirmLoading && !this.mergedConfig.confirmButton.loading) {
+            this.isSubmitting = false;
+        }
+    }
+
+    private updateConfig(): void {
+        if (!this.config) {
+            this.mergedConfig = { ...this.defaultConfig } as ConfirmationModalConfig;
+            return;
+        }
+
+        // Merge user config with defaults
+        this.mergedConfig = {
+            ...this.defaultConfig,
+            ...this.config,
+            cancelButton: {
+                ...this.defaultConfig.cancelButton,
+                ...this.config.cancelButton
+            },
+            confirmButton: {
+                ...this.config.confirmButton
+            }
+        };
+
+        if (this.mergedConfig.confirmButton) {
+            // Logic handled by input/flag
+        }
+    }
+
+    ngOnDestroy(): void {
+        clearTimeout(this._resetSubmittingTimer);
+
+        // Restore body scroll
+        this.toggleBodyScroll(false);
+
+        // Restore focus to previous element
+        if (this.previousActiveElement) {
+            this.previousActiveElement.focus();
+        }
+    }
+
+    private toggleBodyScroll(disable: boolean): void {
+        if (disable) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+    }
+
+    @HostListener('document:keydown.escape', ['$event'])
+    handleEscape(event: KeyboardEvent): void {
+        if (this.isOpen && this.mergedConfig.closeOnEsc) {
+            event.preventDefault();
+            this.onClose();
+        }
+    }
+
+    onBackdropClick(event: MouseEvent): void {
+        // Only close if clicking directly on backdrop, not modal content
+        if (
+            this.mergedConfig.closeOnBackdrop &&
+            event.target === event.currentTarget
+        ) {
+            this.onClose();
+        }
+    }
+
+    onConfirm(): void {
+        const isDisabled = this.confirmDisabled || this.mergedConfig.confirmButton.disabled;
+        const isLoading = this.confirmLoading || this.mergedConfig.confirmButton.loading;
+
+        if (!isDisabled && !isLoading && !this.isSubmitting) {
+            this.isSubmitting = true;
+            this.confirm.emit();
+            // If the parent doesn't start loading within 300 ms (e.g. because client-side
+            // validation failed and no API call was made), reset the guard so the user
+            // can correct the form and try again.
+            clearTimeout(this._resetSubmittingTimer);
+            this._resetSubmittingTimer = setTimeout(() => {
+                if (!this.confirmLoading && !this.mergedConfig?.confirmButton?.loading) {
+                    this.isSubmitting = false;
+                }
+            }, 300);
+        }
+    }
+
+    onCancel(): void {
+        this.cancel.emit();
+    }
+
+    onClose(): void {
+        this.close.emit();
+    }
+
+    onShowCodeSnippet(): void {
+        this.showCodeSnippet.emit();
+    }
+
+    getModalWidth(): string {
+        if (this.mergedConfig.type === 'side-panel') {
+            return this.mergedConfig.panelWidth || this.mergedConfig.width || '400px';
+        }
+        if (this.mergedConfig.size) {
+            const sizeMap: Record<string, string> = {
+                sm: '400px',
+                md: '560px',
+                lg: '720px',
+                xl: '1200px'
+            };
+            return sizeMap[this.mergedConfig.size];
+        }
+        return this.mergedConfig.width || '560px';
+    }
+
+    getModalStyles(): any {
+        const styles: any = {};
+        const config = this.mergedConfig;
+
+        if (config.type === 'side-panel') {
+            const spacing = config.panelSpacing || '0px';
+            const pos = config.panelPosition || 'right';
+            
+            // Set position and spacing
+            styles.position = 'fixed';
+            styles.top = spacing;
+            styles.bottom = spacing;
+            styles[pos] = spacing;
+            
+            // Set dimensions
+            if (pos === 'left' || pos === 'right') {
+                styles.width = this.getModalWidth();
+                styles.height = config.panelHeight || `calc(100% - (${spacing} * 2))`;
+            } else {
+                styles.height = config.panelHeight || 'auto';
+                styles.width = config.panelWidth || `calc(100% - (${spacing} * 2))`;
+                styles.left = spacing;
+                styles.right = spacing;
+                if (pos === 'top') {
+                    styles.bottom = 'auto';
+                } else {
+                    styles.top = 'auto';
+                }
+            }
+            
+            // Visual enhancements for panel
+            styles['border-radius'] = config.borderRadius || '12px';
+            styles['box-shadow'] = '0 10px 40px rgba(0,0,0,0.15)';
+        } else {
+            // Modal mode
+            styles.width = this.getModalWidth();
+            if (config.backgroundColor) styles['background-color'] = config.backgroundColor;
+            if (config.borderRadius) styles['border-radius'] = config.borderRadius;
+            if (config.padding) styles.padding = config.padding;
+        }
+
+        return styles;
+    }
+
+    getConfirmButtonClass(): string {
+        const typeMap: Record<string, string> = {
+            primary: 'cc-btn-primary',
+            danger: 'cc-btn-danger',
+            warning: 'cc-btn-warning'
+        };
+        const isLoading = this.confirmLoading || this.mergedConfig.confirmButton.loading;
+        return `cc-btn ${typeMap[this.mergedConfig.confirmButton.type]} ${isLoading ? 'cc-btn-loading' : ''}`;
+    }
+
+    getHeaderClass(): string {
+        return `modal-header modal-header--${this.mergedConfig.headerTheme}`;
+    }
+
+    resolveIconType(icon: any): 'material' | 'custom' | 'img' {
+        if (typeof icon === 'string') {
+            if (icon.includes('/') || icon.includes('.') || icon.startsWith('http')) {
+                return 'img';
+            }
+            return 'material';
+        }
+        if (icon && typeof icon === 'object') {
+            if (icon.type === 'custom' || (icon.value && (icon.value.includes('/') || icon.value.includes('.') || icon.value.startsWith('http')))) {
+                return 'custom';
+            }
+            return icon.type || 'material';
+        }
+        return 'material';
+    }
+
+    getIconValue(icon: any): string {
+        return typeof icon === 'string' ? icon : icon?.value;
+    }
+
+    getIconColor(icon: any): string | undefined {
+        return typeof icon === 'object' ? icon.color : undefined;
+    }
+}