commons-shared-web-ui 0.0.50 → 0.0.51

package/src/lib/modules/configurable-form/component/configurable-form.component.scss

@@ -1,503 +0,0 @@
-// Configurable Form Component Styles
-:host {
-    display: block;
-    width: 100%;
-}
-
-.configurable-form-container {
-    padding: 0;
-    font-family: var(--cf-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
-
-    // Section Card
-    .section-card {
-        background: var(--cf-surface-background, #ffffff);
-        border: 1px solid var(--cf-border-color, #D1D5DB);
-        border-radius: var(--cf-section-radius, 12px);
-        padding: var(--cf-section-padding, 2rem);
-        margin-bottom: var(--cf-section-spacing, 1.5rem);
-        box-shadow: var(--cf-section-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
-
-        &:last-of-type {
-            margin-bottom: 0;
-        }
-    }
-
-    // Section Header
-    .section-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: var(--cf-section-spacing, 1.5rem);
-        padding-bottom: 1rem;
-        border-bottom: 2px solid var(--cf-border-color, #D1D5DB);
-    }
-
-    .section-title {
-        font-size: var(--cf-section-title-size, 1.25rem);
-        font-weight: var(--cf-section-title-weight, 600);
-        color: var(--cf-text-primary, #111827);
-        margin: 0;
-        letter-spacing: -0.025em;
-    }
-
-    // Form Grid System
-    .form-grid {
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: -0.625rem;
-        margin-right: -0.625rem;
-    }
-
-    .form-col {
-        // Mobile-first: all columns are full width by default
-        position: relative;
-        width: 100%;
-        padding-left: 0.625rem;
-        padding-right: 0.625rem;
-        margin-bottom: 1.25rem; // Vertical spacing
-    }
-
-    // Column classes for mobile
-    @for $i from 1 through 12 {
-        .col-#{$i} {
-            flex: 0 0 percentage($i / 12);
-            max-width: percentage($i / 12);
-        }
-    }
-
-    // Desktop column classes (min-width: 769px)
-    @media (min-width: 769px) {
-        @for $i from 1 through 12 {
-            .col-md-#{$i} {
-                flex: 0 0 percentage($i / 12);
-                max-width: percentage($i / 12);
-            }
-        }
-    }
-
-    // Field Container
-    .field-container {
-        margin-bottom: 0;
-    }
-
-    .field-label {
-        display: block;
-        font-size: var(--cf-label-size, 0.875rem);
-        font-weight: var(--cf-label-weight, 600);
-        color: var(--cf-text-primary, #111827);
-        margin-bottom: 0.5rem;
-        line-height: 1.25rem;
-
-        .text-danger {
-            color: var(--cf-error-color, #DC2626);
-            margin-left: 0.125rem;
-        }
-    }
-
-    // Input Wrapper
-    .input-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-    }
-
-    // Form Input
-    .form-input {
-        width: 100%;
-        padding: var(--cf-input-padding-y, 0.625rem) var(--cf-input-padding-x, 0.875rem);
-        font-size: var(--cf-input-font-size, 0.875rem);
-        line-height: 1.5;
-        color: var(--cf-text-primary, #111827);
-        background-color: var(--cf-input-bg, #ffffff);
-        border: 1.5px solid var(--cf-border-color, #D1D5DB);
-        border-radius: var(--cf-input-radius, 8px);
-        transition: all 0.2s ease;
-        font-family: inherit;
-
-        &:hover:not(:disabled):not([readonly]) {
-            border-color: var(--cf-input-hover-border-color, #9CA3AF);
-        }
-
-        &:focus {
-            outline: none;
-            border-color: var(--cf-primary-color, #3B82F6);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-        }
-
-        &::placeholder {
-            color: #9CA3AF;
-        }
-
-        &:disabled,
-        &[readonly] {
-            background-color: var(--cf-disabled-background, #F3F4F6);
-            color: var(--cf-text-secondary, #6B7280);
-            cursor: not-allowed;
-            border-color: #E5E7EB;
-        }
-
-        &.is-invalid {
-            border-color: var(--cf-error-color, #DC2626);
-            background-color: #FEF2F2;
-
-            &:focus {
-                box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
-            }
-        }
-    }
-
-    select.form-input {
-        appearance: none;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
-        background-position: right 0.5rem center;
-        background-repeat: no-repeat;
-        background-size: 1.5em 1.5em;
-        padding-right: 2.5rem;
-        cursor: pointer;
-
-        &:disabled {
-            cursor: not-allowed;
-        }
-    }
-
-    .form-textarea {
-        resize: vertical;
-        min-height: 100px;
-        font-family: inherit;
-    }
-
-    // Input Suffix
-    .input-suffix {
-        position: absolute;
-        right: 0.75rem;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        pointer-events: none;
-
-        .password-toggle-icon {
-            pointer-events: auto;
-            cursor: pointer;
-
-            &:hover {
-                color: var(--cf-text-primary, #111827);
-            }
-        }
-
-        .suffix-text {
-            font-size: 0.875rem;
-            color: var(--cf-text-secondary, #6B7280);
-            font-weight: 500;
-        }
-
-        mat-icon {
-            font-size: 1.25rem;
-            width: 1.25rem;
-            height: 1.25rem;
-            color: var(--cf-text-secondary, #6B7280);
-        }
-
-        .lock-icon {
-            color: #9CA3AF;
-        }
-
-        &.color-suffix {
-            .suffix-text {
-                color: var(--cf-primary-color, #3B82F6);
-                font-weight: 600;
-            }
-        }
-    }
-
-    // Character Count
-    .char-count-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 0.5rem;
-    }
-
-    .char-count {
-        font-size: 0.75rem;
-        color: var(--cf-text-secondary, #6B7280);
-        font-weight: 500;
-    }
-
-    .hint-text {
-        font-size: var(--cf-hint-size, 0.75rem);
-        color: var(--cf-text-secondary, #6B7280);
-        margin-top: 0.375rem;
-        line-height: 1.25rem;
-    }
-
-    .mt-2 {
-        margin-top: 0.5rem;
-    }
-
-    // Radio Group
-    .radio-group-container {
-        &.is-invalid {
-            .field-label {
-                color: var(--cf-error-color, #DC2626);
-            }
-        }
-    }
-
-    .radio-group {
-        display: flex;
-        gap: 2rem;
-        flex-wrap: wrap;
-        margin-top: 0.5rem;
-    }
-
-    .radio-button {
-        margin: 0;
-    }
-
-    // Composite Fields
-    .composite-container {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-
-        .separator {
-            font-size: 0.875rem;
-            color: var(--cf-text-secondary, #6B7280);
-            font-weight: 500;
-        }
-
-        .input-wrapper {
-            flex: 1;
-        }
-    }
-
-    // File Upload
-    .upload-box {
-        border: 2px dashed var(--cf-border-color, #D1D5DB);
-        border-radius: var(--cf-section-radius, 12px);
-        padding: 2.5rem;
-        text-align: center;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        background-color: var(--cf-hover-background, #F9FAFB);
-
-        &:hover {
-            border-color: var(--cf-primary-color, #3B82F6);
-            background-color: rgba(59, 130, 246, 0.03);
-        }
-
-        &.is-invalid {
-            border-color: var(--cf-error-color, #DC2626);
-            background-color: #FEF2F2;
-        }
-
-        .upload-icon {
-            font-size: 3rem;
-            width: 3rem;
-            height: 3rem;
-            color: var(--cf-primary-color, #3B82F6);
-            margin-bottom: 0.75rem;
-        }
-
-        .upload-text {
-            font-size: 0.875rem;
-            color: var(--cf-text-primary, #111827);
-            font-weight: 500;
-            margin-bottom: 0.375rem;
-        }
-
-        .upload-hint {
-            font-size: 0.75rem;
-            color: var(--cf-text-secondary, #6B7280);
-        }
-    }
-
-    .uploaded-files-list {
-        margin-top: 1rem;
-    }
-
-    .uploaded-file-item {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        padding: 0.875rem;
-        border: 1.5px solid var(--cf-border-color, #D1D5DB);
-        border-radius: 8px;
-        margin-bottom: 0.5rem;
-        background-color: var(--cf-hover-background, #F9FAFB);
-        transition: all 0.2s ease;
-
-        &:hover {
-            border-color: #9CA3AF;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-        }
-
-        .file-icon {
-            mat-icon {
-                font-size: 2rem;
-                width: 2rem;
-                height: 2rem;
-
-                &.pdf-icon {
-                    color: #DC2626;
-                }
-
-                &.doc-icon {
-                    color: #2563EB;
-                }
-
-                &.img-icon {
-                    color: #059669;
-                }
-
-                &.file-icon-default {
-                    color: var(--cf-text-secondary, #6B7280);
-                }
-            }
-        }
-
-        .file-info {
-            flex: 1;
-
-            .file-name {
-                font-size: 0.875rem;
-                color: var(--cf-text-primary, #111827);
-                font-weight: 500;
-                margin-bottom: 0.125rem;
-            }
-
-            .file-size {
-                font-size: 0.75rem;
-                color: var(--cf-text-secondary, #6B7280);
-            }
-        }
-
-        .remove-file-btn {
-            mat-icon {
-                font-size: 1.25rem;
-                width: 1.25rem;
-                height: 1.25rem;
-            }
-        }
-    }
-
-    // Date Picker
-    .relative {
-        position: relative;
-    }
-
-    .date-toggle {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
-    // Repeater Section
-    .repeater-item {
-        padding: 1.5rem;
-        border: 1.5px solid var(--cf-border-color, #D1D5DB);
-        border-radius: 10px;
-        margin-bottom: 1rem;
-        background-color: var(--cf-hover-background, #F9FAFB);
-        transition: all 0.2s ease;
-
-        &:hover {
-            border-color: #9CA3AF;
-            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-        }
-    }
-
-    .repeater-item-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1.25rem;
-        padding-bottom: 0.75rem;
-        border-bottom: 1.5px solid var(--cf-border-color, #D1D5DB);
-
-        .text-small {
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: var(--cf-text-primary, #111827);
-            text-transform: uppercase;
-            letter-spacing: 0.025em;
-        }
-    }
-
-    .repeater-separator {
-        height: 1px;
-        background-color: var(--cf-border-color, #D1D5DB);
-        margin: 1.5rem 0;
-    }
-
-    .add-btn {
-        margin-top: 1rem;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.625rem 1.25rem;
-        background-color: transparent;
-        color: var(--cf-primary-color, #3B82F6);
-        border: 1.5px solid var(--cf-primary-color, #3B82F6);
-        border-radius: 8px;
-        font-size: 0.875rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s ease;
-
-        &:hover:not(:disabled) {
-            background-color: var(--cf-primary-color, #3B82F6);
-            color: white;
-        }
-
-        &:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            border-color: var(--cf-disabled-background, #E5E7EB);
-        }
-
-        mat-icon {
-            font-size: 1.25rem;
-            width: 1.25rem;
-            height: 1.25rem;
-        }
-    }
-
-
-
-    // Mobile Responsive
-    @media (max-width: 768px) {
-        .section-card {
-            padding: 1.25rem;
-            border-radius: 8px;
-        }
-
-        .form-grid {
-            margin-left: -0.5rem;
-            margin-right: -0.5rem;
-        }
-
-        .form-col {
-            padding-left: 0.5rem;
-            padding-right: 0.5rem;
-            margin-bottom: 1rem;
-        }
-
-
-
-        .radio-group {
-            flex-direction: column;
-            gap: 0.75rem;
-        }
-
-        .composite-container {
-            flex-direction: column;
-            align-items: stretch;
-
-            .separator {
-                text-align: center;
-            }
-        }
-    }
-}