platformcommons-web-lib 1.0.0

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

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