@besaitech/ng-design-system 0.0.80 → 0.0.81

package/index.d.ts

@@ -2901,6 +2901,8 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
     private readonly cvaDisabled;
     private readonly trigger;
     private panelEl;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    private readonly overlay;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly filled: _angular_core.Signal<boolean>;
     protected readonly onBrand: _angular_core.Signal<boolean>;
@@ -2946,11 +2948,8 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
     private typeTimer?;
     private typeAhead;
     private scrollHighlightedIntoView;
-    private readonly reflow;
-    private listening;
-    private addReflowListeners;
-    private removeReflowListeners;
-    private positionPanel;
+    /** Attach once the panel exists — it is rendered inside an `@if`. */
+    private attachPanel;
     protected onDocumentClick(event: MouseEvent): void;
     ngOnDestroy(): void;
     private setValue;
@@ -3060,6 +3059,8 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
     private readonly cvaDisabled;
     private readonly trigger;
     private panelEl;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    private readonly overlay;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly normalizedOptions: _angular_core.Signal<NormOption[]>;
     protected readonly filteredOptions: _angular_core.Signal<NormOption[]>;
@@ -3109,11 +3110,8 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
     private typeTimer?;
     private typeAhead;
     private scrollHighlightedIntoView;
-    private readonly reflow;
-    private listening;
-    private addReflowListeners;
-    private removeReflowListeners;
-    private positionPanel;
+    /** Attach once the panel exists — it is rendered inside an `@if`. */
+    private attachPanel;
     protected onDocumentClick(event: MouseEvent): void;
     ngOnDestroy(): void;
     private setValue;
@@ -3127,6 +3125,79 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
 }
 
+/**
+ * Where a floating panel goes, and the plumbing that keeps it there.
+ *
+ * <p><b>Why this exists.</b> Ten components in this library append a panel to `<body>` and position
+ * it against their trigger, and nine of them had their own copy of the same twenty-odd lines. The
+ * copies had already drifted: some clamp the panel inside the viewport vertically and some only
+ * flip it, some match the trigger's width and some do not. Worse, the *lifecycle* was duplicated
+ * too — and `sds-autocomplete` shipped a version that removed the panel through a `viewChild`
+ * already cleared by `ngOnDestroy`, orphaning it in `<body>` for ever. That bug could only exist in
+ * one copy of nine.
+ */
+type SdsPanelAlign = 'start' | 'end';
+type SdsPanelDirection = 'below' | 'above';
+interface SdsPanelOptions {
+    /** Space between trigger and panel. */
+    gap?: number;
+    /** Space kept clear of the viewport edges. */
+    margin?: number;
+    /** Which edge of the panel lines up with the trigger. */
+    align?: SdsPanelAlign;
+    /** Open upwards when there is room, instead of the default "below unless it does not fit". */
+    prefer?: SdsPanelDirection;
+}
+interface SdsRect {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+interface SdsSize {
+    width: number;
+    height: number;
+}
+/**
+ * The arithmetic, with no DOM in it.
+ *
+ * <p>Vertical: below the trigger, flipped above when it does not fit below and fits better above —
+ * then <b>clamped inside the viewport</b>. The clamp is not decoration: without it a panel taller
+ * than the space either side is pushed off the top edge and its first rows become unreachable, and
+ * four of the nine copies were missing it.
+ *
+ * <p>Horizontal: the panel's start (or end) edge meets the trigger's, then clamped the same way. A
+ * panel wider than the viewport pins to the left margin rather than running off both sides.
+ */
+declare function placePanel(trigger: SdsRect, panel: SdsSize, viewport: SdsSize, options?: SdsPanelOptions): {
+    top: number;
+    left: number;
+};
+/**
+ * The DOM half: append to `<body>`, place, follow scroll and resize, and — the part that was worth
+ * centralising — take it all down again exactly once.
+ *
+ * <p>Hold one of these per component and call {@link detach} from `ngOnDestroy`. It keeps its own
+ * reference to the panel element, so it does not depend on a `viewChild` that Angular has already
+ * cleared by the time the component is torn down.
+ */
+declare class SdsOverlayPanel {
+    private trigger;
+    private panel;
+    private options;
+    private listening;
+    private readonly reflow;
+    /** Attach (or re-attach) the panel to the body and start following the trigger. */
+    attach(trigger: HTMLElement, panel: HTMLElement, options?: SdsPanelOptions & {
+        matchTriggerWidth?: boolean;
+    }): void;
+    reposition(): void;
+    /** Does the panel contain this node? For "did the click land outside" checks. */
+    contains(node: Node | null): boolean;
+    /** Stop following, and remove the panel from the body. Safe to call more than once. */
+    detach(): void;
+}
+
 /**
  * Where the options come from.
  *
@@ -3229,15 +3300,8 @@ declare class SdsAutocomplete implements ControlValueAccessor, OnDestroy {
     private readonly cvaDisabled;
     /** Every option this control has seen, by value — how a chip keeps its label after a new search. */
     private readonly seen;
-    /**
-     * A plain reference to the body-appended panel, not just the viewChild.
-     *
-     * <p>On destroy the viewChild is already cleared — it lives inside an `@if` — so removing through
-     * it removes nothing and the panel is orphaned in `<body>` for ever. A test caught it: a leaked
-     * panel from one spec was still in the document when the next one queried for its own.
-     * `sds-select` keeps the same raw handle, for the same reason.
-     */
-    private panelEl;
+    /** Body-appending, positioning, follow-on-scroll and teardown all live in here now. */
+    private readonly overlay;
     private timer;
     private seq;
     private destroyed;
@@ -3269,11 +3333,8 @@ declare class SdsAutocomplete implements ControlValueAccessor, OnDestroy {
     protected onKeydown(event: KeyboardEvent): void;
     protected close(): void;
     protected onDocumentClick(event: MouseEvent): void;
-    private readonly reflow;
-    private listening;
-    private addReflow;
-    private removeReflow;
-    private position;
+    /** Attach once the panel exists in the DOM — it is inside an `@if`. */
+    private place;
     ngOnDestroy(): void;
     private setValue;
     private onChange;
@@ -3422,6 +3483,8 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
     private readonly anchor;
     private readonly field;
     private panelEl;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    private readonly overlay;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     /** Countries after applying [onlyCountries] and [preferredCountries] ordering. */
     protected readonly availableCountries: _angular_core.Signal<SdsPhoneCountry[]>;
@@ -3452,11 +3515,8 @@ declare class SdsPhoneInput implements ControlValueAccessor, Validator, OnDestro
     private handleNavKey;
     private move;
     private scrollHighlightedIntoView;
-    private readonly reflow;
-    private listening;
-    private addReflowListeners;
-    private removeReflowListeners;
-    private positionPanel;
+    /** Attach once the panel exists — it is rendered inside an `@if`. */
+    private attachPanel;
     protected onDocumentClick(event: MouseEvent): void;
     protected markTouched(): void;
     ngOnDestroy(): void;
@@ -5793,5 +5853,5 @@ declare const SDS_CHART_CONFIG: InjectionToken<SdsChartConfig>;
  */
 declare function provideSdsCharts(config: SdsChartConfig): Provider;
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAutocomplete, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsSeverity, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
-export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAutocompleteDisplay, SdsAutocompleteSearchFn, SdsAutocompleteSize, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsChartConfig, SdsChartLabels, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsDateRange, SdsDateRangePickerSize, SdsDateRangePreset, SdsEnvBannerEnv, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsFormActionsPosition, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsKpiChangeText, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsSeverityLevel, SdsSeveritySize, SdsSeverityVariant, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsSparklineSummaryText, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTabsVariant, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTrendDirection, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAutocomplete, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsOverlayPanel, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsSeverity, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, placePanel, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export type { SdsAccordionActive, SdsAccordionValue, SdsAddressAutocompleteAppearance, SdsAddressAutocompleteShape, SdsAddressAutocompleteSize, SdsAddressExtraContext, SdsAddressExtraPosition, SdsAddressLocateFn, SdsAddressSearchFn, SdsAddressSuggestion, SdsAllergen, SdsAutocompleteDisplay, SdsAutocompleteSearchFn, SdsAutocompleteSize, SdsAvatarShape, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsBulkBarPosition, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsChartConfig, SdsChartLabels, SdsCheckboxSize, SdsChecklistStatus, SdsChipOption, SdsChipSize, SdsCropRect, SdsDatePickerSize, SdsDateRange, SdsDateRangePickerSize, SdsDateRangePreset, SdsEnvBannerEnv, SdsFileDropAppearance, SdsFileRejection, SdsFileRejectionReason, SdsFormActionsPosition, SdsIconName, SdsIconSize, SdsImageCropperBlobOptions, SdsImageCropperShape, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsKpiChangeText, SdsLanguageOption, SdsLanguageSwitcherAlign, SdsLanguageSwitcherAppearance, SdsLanguageSwitcherDirection, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuAction, SdsMenuAlign, SdsMenuEntry, SdsMenuItemTone, SdsMenuSeparator, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsNavItemBadgeTone, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPanelAlign, SdsPanelDirection, SdsPanelOptions, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsRadioSize, SdsRect, SdsScoreSize, SdsScoreTier, SdsScoreVariant, SdsSearchAppearance, SdsSearchItem, SdsSegmentedOption, SdsSegmentedSize, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsSeverityLevel, SdsSeveritySize, SdsSeverityVariant, SdsShellBackground, SdsSidebarAppearance, SdsSize, SdsSortOrder, SdsSortableAppearance, SdsSortableItemContext, SdsSortableReorderEvent, SdsSparklineSummaryText, SdsStatusTileState, SdsTabValue, SdsTableCellCommitEvent, SdsTableCellContext, SdsTableCellErrors, SdsTableColumn, SdsTableEditTrigger, SdsTableEditor, SdsTableEmptyContext, SdsTableHeaderContext, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSelectOption, SdsTableSize, SdsTableSortEvent, SdsTabsVariant, SdsTextareaAppearance, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeMode, SdsThemeToggleAppearance, SdsTimeInputAppearance, SdsTimeInputSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsTrendDirection, SdsTriState, SdsTriStateChipSize, SdsUiPrefs, SdsUserMenuAlign, SdsUserMenuAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"