@pecb-ui/components 1.1.13 → 1.1.15

package/layout/index.d.ts

@@ -1 +1 @@
-export { AccordionItemComponent, AccordionSmallComponent, AccordionVariant, CardBodyComponent, CardComponent, CardElevation, CardFooterComponent, CardHeaderComponent, CardRadius, CardRole, ContentStyle, DashboardGridComponent, DashboardGridGap, DashboardGridLayout, DividerComponent, DividerType, GridAlign, GridColumns, GridComponent, GridGap, GridItemComponent, GridItemSpan, GridPadding, GridVerticalAlign, HeaderSearchType, ProfileType, ProjectLayoutComponent, QuizType, SpacerComponent, SpacerSize } from '@pecb-ui/components';
+export { AccordionItemComponent, AccordionSmallComponent, AccordionVariant, CardBodyComponent, CardComponent, CardElevation, CardFooterComponent, CardHeaderComponent, CardRadius, CardRole, ContentStyle, DashboardGridComponent, DashboardGridGap, DashboardGridLayout, DividerComponent, DividerType, FormSectionCardComponent, GridAlign, GridColumns, GridComponent, GridGap, GridItemComponent, GridItemSpan, GridPadding, GridVerticalAlign, HeaderSearchType, ProfileType, ProjectLayoutComponent, QuizType, SpacerComponent, SpacerSize } from '@pecb-ui/components';

package/overlays/index.d.ts

@@ -1 +1 @@
-export { BottomSheetComponent, ColumnOption, ConfirmationComponent, ConfirmationIconType, FilterColumnsActiveTab, FilterColumnsApplyEvent, FilterColumnsComponent, FilterField, FilterFieldType, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, RightModalSize, SidebarComponent, SidebarMenuItem, SidebarSection, TooltipComponent, TooltipDirective, TooltipPointerPosition, TooltipTheme, TourComponent, TourIndicatorType, TourPlacement, TourStep, TourType } from '@pecb-ui/components';
+export { BottomSheetComponent, ColumnOption, ConfirmationComponent, ConfirmationIconType, FilterColumnsActiveTab, FilterColumnsApplyEvent, FilterColumnsComponent, FilterField, FilterFieldType, FullscreenModalComponent, FullscreenModalContentDirective, FullscreenModalFooterDirective, FullscreenModalHeaderDirective, PeriodPaymentModalComponent, PeriodPaymentModalPeriod, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, RightModalSize, SidebarComponent, SidebarMenuItem, SidebarSection, TooltipComponent, TooltipDirective, TooltipPointerPosition, TooltipTheme, TourComponent, TourIndicatorType, TourPlacement, TourStep, TourType } from '@pecb-ui/components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pecb-ui/components",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "Professional Angular UI Components Library with TypeScript and SCSS by PECB",
   "author": "PECB",
   "license": "MIT",

package/styles/components/_overlays.scss

@@ -0,0 +1,65 @@
+// =============================================================================
+// OVERLAY LAYERING & CDK PANE COMPATIBILITY
+//
+// Global fixes for pecb-ui components that render inside the Angular CDK
+// overlay (dropdown, datepicker, confirmation, pagination, header dropdowns).
+// Shipped with main.scss so consuming apps no longer need local patches.
+// =============================================================================
+
+// ---------------------------------------------------------------------------
+// Double-boxing guard
+//
+// Some app shells (e.g. the legacy pecb-libs-ui global stylesheet) paint every
+// `.cdk-overlay-pane` with a white background + border + shadow, intended for
+// Material select/menu panels. pecb-ui overlay components render their OWN
+// surface inside the pane, so they end up double-boxed — a second white box
+// around the real panel. Strip the outer box for panes that contain a pecb-ui
+// panel; Material panes (which contain `.mat-mdc-*`, not `.pecb-*`) are
+// unaffected.
+// ---------------------------------------------------------------------------
+
+.cdk-overlay-pane:has(.pecb-dropdown__panel),
+.cdk-overlay-pane:has(.pecb-datepicker__calendar),
+.cdk-overlay-pane:has(.pecb-confirmation__panel),
+.cdk-overlay-pane:has(.pecb-pagination__dropdown),
+.cdk-overlay-pane:has(.pecb-header__dropdown) {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  margin-top: 0 !important;
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown option panel width
+//
+// The pane's width is synced to the trigger, but the inner panel doesn't
+// stretch to fill it — force it to fill the pane so options aren't cramped
+// in a narrow box.
+// ---------------------------------------------------------------------------
+
+.cdk-overlay-pane .pecb-dropdown__panel {
+  width: 100%;
+  min-width: 160px;
+  box-sizing: border-box;
+}
+
+// ---------------------------------------------------------------------------
+// Layering tokens
+//
+// Apps whose shell stacks above the CDK default (z-index: 1000) — e.g. a
+// header at z-index 999999 — can lift every pecb overlay at once by setting
+// the custom properties on :root, without `!important` overrides:
+//
+//   :root {
+//     --pecb-z-modal: 1000000;             // bottom sheet, fullscreen modal
+//     --pecb-z-overlay-container: 1000001; // CDK overlays (dropdowns, modals)
+//   }
+//
+// Keep the overlay container ABOVE the modals, or a dropdown opened inside a
+// right-modal renders behind it.
+// ---------------------------------------------------------------------------
+
+.cdk-overlay-container {
+  z-index: var(--pecb-z-overlay-container, 1000);
+}

package/styles/main.scss

@@ -8,5 +8,8 @@
 @use "base/reset";
 @use "base/container";
 
+// Component-adjacent global fixes (CDK overlay layering & pane compatibility)
+@use "components/overlays";
+
 // Utility classes (directive-driven)
 @use "../lib/components/shadow/shadow.directive";