commons-assessment 12.1.2-dev.0 → 12.1.2-dev.2

package/lib/modules/assessment-maker/assessment-maker.component.d.ts

@@ -49,7 +49,14 @@ export declare class AssessmentMakerComponent implements OnInit {
     responseCount: number;
     proctoringEnabled: boolean;
     durationMinutes: number | null;
+    activeDropdownId: string | null;
+    dropdownPlacementMap: {
+        [id: string]: 'top' | 'bottom';
+    };
     private readonly PROCTORING_CONFIG_KEY;
+    toggleDropdown(id: string, event?: Event): void;
+    onDocumentClick(event: MouseEvent): void;
+    closeAllDropdowns(): void;
     constructor(assessmentMakerService: AssessmentMakerService, assessmentBuilderService: AssessmentBuilderService, dialog: MatDialog);
     ngOnInit(): void;
     private loadResponseCount;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-assessment",
-  "version": "12.1.2-dev.0",
+  "version": "12.1.2-dev.2",
   "peerDependencies": {
     "@angular/common": ">=12.0.0",
     "@angular/core": ">=12.0.0",

package/src/lib/assets/theme/styles.global.scss

@@ -26,16 +26,20 @@ GLOBAL stylesheet for commons-assessment library
 
 .assessment-dialog {
     overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--assessment-grey-six, #bdc9d3) transparent;
 
     /* Angular <= v14 (legacy) */
     .mat-dialog-container {
         padding: 0;
+        overflow: hidden;
     }
 
     /* Angular v15+ (MDC) */
     .mat-mdc-dialog-container {
         padding: 0;
         max-width: unset;
+        overflow: hidden;
     }
 
     @extend .assessment-custom-scrollbar-thumb;
@@ -58,19 +62,30 @@ GLOBAL stylesheet for commons-assessment library
 }
 
 .assessment-custom-scrollbar-thumb {
+    scrollbar-width: thin;
+    scrollbar-color: var(--assessment-grey-six, #bdc9d3) transparent;
+
+    &::-webkit-scrollbar,
     ::-webkit-scrollbar {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
+        width: 6px !important;
+        height: 6px !important;
     }
 
+    &::-webkit-scrollbar-track,
     ::-webkit-scrollbar-track {
-        box-shadow: inset 0 0 6px var(--assessment-grey-four) !important;
-        border-radius: inherit !important;
+        background: transparent !important;
     }
 
+    &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
-        background-color: var(--assessment-grey-six) !important;
-        border-radius: inherit !important;
+        background-color: var(--assessment-grey-six, #cbd5e1) !important;
+        border-radius: 10px !important;
+        transition: background-color 0.2s ease;
+    }
+
+    &::-webkit-scrollbar-thumb:hover,
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: var(--assessment-grey-eight, #94a3b8) !important;
     }
 }
 
@@ -126,6 +141,21 @@ GLOBAL stylesheet for commons-assessment library
 }
 
 .assessment-panel {
+    overflow: visible !important;
+
+    &.mat-expanded {
+        overflow: visible !important;
+
+        .mat-expansion-panel-content {
+            overflow: visible !important;
+        }
+
+        .mat-expansion-panel-body {
+            overflow: visible !important;
+            padding: 0;
+        }
+    }
+
     .mat-expansion-panel-body {
         padding: 0;
     }
@@ -206,4 +236,95 @@ GLOBAL stylesheet for commons-assessment library
     .mat-mdc-tab-header {
         display: none !important;
     }
+}
+
+/* ---------------------------------------------------------------------------
+ * 2. Assessment Dropdown Menu Animations & Styling
+ * --------------------------------------------------------------------------- */
+.assessment-bloom-down {
+    transform-origin: top left;
+    animation: ctaMenuBloomDown 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
+    will-change: transform, opacity;
+}
+
+.assessment-bloom-up {
+    transform-origin: bottom left;
+    animation: ctaMenuBloomUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
+    will-change: transform, opacity;
+}
+
+.assessment-dropdown-menu {
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
+
+    .dropdown-item {
+        position: relative;
+        cursor: pointer;
+        background-color: transparent;
+        transition: background-color 0.2s ease;
+        user-select: none;
+
+        img,
+        .menu-action-icon,
+        span,
+        .menu-item-text {
+            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+                        color 0.18s ease;
+            display: inline-block;
+        }
+
+        span,
+        .menu-item-text {
+            color: var(--assessment-grey-ten, #1e293b);
+        }
+
+        img,
+        .menu-action-icon {
+            flex-shrink: 0;
+        }
+
+        &:hover,
+        &:focus-visible {
+            background-color: var(--assessment-palette-EDF3FD, #edf3fd) !important;
+
+            img,
+            .menu-action-icon,
+            span,
+            .menu-item-text {
+                transform: translateX(2.5px);
+            }
+
+            span,
+            .menu-item-text {
+                color: var(--assessment-primary-one, #467dd6) !important;
+            }
+        }
+
+        &:active {
+            transform: scale(0.99);
+            background-color: var(--assessment-palette-C8DAF9, #c8daf9) !important;
+        }
+    }
+}
+
+@keyframes ctaMenuBloomDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes ctaMenuBloomUp {
+    0% {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }