commons-shared-web-ui 0.0.55 → 0.0.56

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

@@ -1,395 +0,0 @@
-.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

@@ -1,266 +0,0 @@
-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;
-    }
-}