@coreui/angular-pro 5.7.21 → 5.7.22

package/fesm2022/coreui-angular-pro.mjs

@@ -679,6 +679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 class DropdownService {
     #dropdownState = new BehaviorSubject({});
     dropdownState$ = this.#dropdownState.asObservable();
+    alignment = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
     toggle(state) {
         this.#dropdownState.next(state);
     }
@@ -699,7 +701,7 @@ class DropdownMenuDirective {
     #focusKeyManager;
     /**
      * Set alignment of dropdown menu.
-     * @returns 'start' | 'end'
+     * @returns DropdownAlignment
      */
     alignment = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
@@ -711,11 +713,10 @@ class DropdownMenuDirective {
     visible = linkedSignal({ ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), source: this.visibleInput,
         computation: (value) => value });
     hostClasses = computed(() => {
-        const alignment = this.alignment();
         const visible = this.visible();
         return {
             'dropdown-menu': true,
-            [`dropdown-menu-${alignment}`]: !!alignment,
+            ...alignmentClasses(this.alignment() ?? this.#dropdownService.alignment()),
             show: visible
         };
     }, /* @ts-ignore */
@@ -798,6 +799,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     }
                 }]
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], visibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], dropdownItemsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DropdownItemDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+const alignmentClasses = (alignment) => {
+    if (!alignment) {
+        return {};
+    }
+    if (typeof alignment === 'string') {
+        return { [`dropdown-menu-${alignment}`]: true };
+    }
+    return Object.fromEntries(Object.entries(alignment).map(([breakpoint, direction]) => [
+        `dropdown-menu${breakpoint === BreakpointInfix.xs ? '' : `-${breakpoint}`}-${direction}`,
+        true
+    ]));
+};
 
 // lightweight injection token
 class DropdownToken {
@@ -898,12 +911,15 @@ class DropdownComponent {
     }
     /**
      * Set alignment of dropdown menu.
-     * @returns {'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}}
+     * @returns DropdownAlignment
      */
     alignment = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
     /**
-     * Automatically close dropdown when clicking outside the dropdown menu.
+     * Configure the auto close behavior: `true` closes the dropdown on a click inside or
+     * outside the menu, `false` only on the toggle button or an explicit hide/toggle call
+     * and not on the Esc key, `inside` only on a click inside the menu, `outside` only on
+     * a click outside it.
      * @returns boolean | 'inside' | 'outside'
      * @default true
      */
@@ -911,7 +927,7 @@ class DropdownComponent {
     ...(ngDevMode ? [{ debugName: "autoClose" }] : /* istanbul ignore next */ []));
     /**
      * Sets a specified  direction and location of the dropdown menu.
-     * @returns 'dropup' | 'dropend' | 'dropstart'
+     * @returns 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
      */
     direction = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "direction" }] : /* istanbul ignore next */ []));
@@ -929,9 +945,17 @@ class DropdownComponent {
      * @default true
      */
     popper = input(true, { ...(ngDevMode ? { debugName: "popper" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    #popperEnabled = computed(() => this.popper() && typeof this.alignment() !== 'object', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#popperEnabled" }] : /* istanbul ignore next */ []));
+    #alignmentEffect = effect(() => {
+        this.dropdownService.alignment.set(this.alignment());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#alignmentEffect" }] : /* istanbul ignore next */ []));
     /**
-     * Optional popper Options object, `placement` prop takes precedence over
+     * Optional Popper.js options object; the `placement` prop takes precedence over the
+     * placement set here. See https://popper.js.org/docs/v2/constructors/#options
      * @returns Partial<Options>
+     * @default {}
      */
     popperOptionsInput = input({}, { ...(ngDevMode ? { debugName: "popperOptionsInput" } : /* istanbul ignore next */ {}), alias: 'popperOptions' });
     #popperOptionsEffect = effect(() => {
@@ -1081,7 +1105,7 @@ class DropdownComponent {
                 // workaround for popper position calculate (see also: dropdown-menu.component)
                 _menu.elementRef.nativeElement.style.visibility = 'hidden';
                 _menu.elementRef.nativeElement.style.display = 'block';
-                if (this.popper()) {
+                if (this.#popperEnabled()) {
                     this.popperInstance = createPopper(_toggler.elementRef.nativeElement, _menu.elementRef.nativeElement, {
                         ...this.popperOptions
                     });
@@ -5820,7 +5844,7 @@ class BreadcrumbItemComponent {
     active = input(undefined, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * The `url` prop for the inner `[routerLink]` directive
-     * @returns string
+     * @returns string | any[]
      */
     url = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
@@ -5994,7 +6018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 class ButtonGroupComponent {
     /**
      * Size the component small or large.
-     * @returns '' | 'sm' | 'lg' | string
+     * @returns '' | 'sm' | 'lg'
      */
     size = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
@@ -7766,6 +7790,10 @@ class CalendarComponent {
      */
     ariaPrevYearLabel = input('Previous year', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaPrevYearLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Event emitted on calendar cell hover.
+     * @returns Date | null
+     */
     calendarCellHover = output();
     // used with calendarService
     hoverDate = signal(null, /* @ts-ignore */
@@ -8133,7 +8161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 class CardImgDirective {
     /**
      * Optionally orientate the image to the top, bottom, or make it overlaid across the card.
-     * @returns {'top | 'bottom'}
+     * @returns 'top' | 'bottom' | 'start' | 'end'
      */
     orientation = input(undefined, { ...(ngDevMode ? { debugName: "orientation" } : /* istanbul ignore next */ {}), alias: 'cCardImg' });
     hostClasses = computed(() => {
@@ -8429,7 +8457,7 @@ class CarouselComponent {
     ...(ngDevMode ? [{ debugName: "#intervalEffect" }] : /* istanbul ignore next */ []));
     /**
      * Sets which event handlers you’d like provided to your pause prop. You can specify one trigger or an array of them.
-     * @returns 'hover' | 'focus' | 'click'
+     * @returns Triggers | Triggers[] | false
      */
     pause = input('hover', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pause" }] : /* istanbul ignore next */ []));
@@ -12524,7 +12552,7 @@ class ListGroupItemDirective {
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
-     * @returns InputSignal<Colors | undefined>
+     * @returns Colors
      */
     color = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
@@ -13113,8 +13141,7 @@ class NavbarTogglerDirective {
     }
     /**
      * Reference to navbar collapse element (via # template variable)
-     * @returns string
-     * @default 'button'
+     * @returns CollapseDirective
      */
     collapseRef = input(undefined, { ...(ngDevMode ? { debugName: "collapseRef" } : /* istanbul ignore next */ {}), alias: 'cNavbarToggler' });
     /**
@@ -14806,7 +14833,7 @@ class PaginationComponent {
     ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     /**
      * Size the component small or large.
-     * @returns '' | 'sm' | 'lg' | string
+     * @returns '' | 'sm' | 'lg'
      */
     size = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
@@ -20192,6 +20219,11 @@ class TabPaneComponent {
             active: this.active
         };
     }
+    /**
+     * Element role.
+     * @returns string
+     * @default 'tabpanel'
+     */
     role = 'tabpanel';
     ngOnDestroy() {
         this.subscribeTabService(false);
@@ -20494,7 +20526,7 @@ class TabsComponent {
     tabsService = inject(TabsService);
     /**
      * The active item key.
-     * @returns <string | number | undefined>
+     * @returns number | string
      */
     activeItemKey = model(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "activeItemKey" }] : /* istanbul ignore next */ []));
@@ -21648,7 +21680,7 @@ class WidgetStatFComponent extends CardComponent {
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     /**
      * Value for your widget to display
-     * @returns string
+     * @returns string | number
      */
     value = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));