@kouji-ui/components 0.9.3 → 0.9.4

package/fesm2022/kouji-ui-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Injectable, booleanAttribute, computed, TemplateRef, viewChild, ElementRef, contentChildren, contentChild, model, ViewChild, PLATFORM_ID, DestroyRef, afterNextRender, effect, signal, SecurityContext, Injector, untracked, output, EventEmitter, Output, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, EnvironmentInjector, Directive, InjectionToken, ViewContainerRef, numberAttribute, afterRenderEffect } from '@angular/core';
 import * as i1 from '@kouji-ui/core';
-import { KjAccordion, KjAccordionTrigger, KjAccordionItem, KjAccordionContent, SHEET_DATA, KjSheetRef, KjSheet, KjIconDirective, KjSheetService, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KJ_AVATAR_GROUP, KjAvatarImage, KjAvatarFallback, KjAvatar, KjPopoverTrigger, KjPopoverContent, KjPopoverArrow, KjPopoverClose, KjPopoverTitle, KjTranslateService, KjOverflowContent, KjAvatarGroup, KjBadge, KjBreadcrumb, KjSize, KjBreadcrumbList, KjBreadcrumbItem, KJ_BREADCRUMB_CONFIG, KjLink, KjBreadcrumbCurrent, KjBreadcrumbSeparator, KjBreadcrumbEllipsis, KjButton, KjButtonGroup, KjCalendar, KjCalendarHeader, KjCalendarGrid, KjCalendarDay, KjCarousel, KjLiveRegion, KjVisuallyHidden, KjCarouselViewport, KjCarouselSlide, KjCarouselPrevious, KjCarouselNext, KJ_CAROUSEL, KjCarouselIndicator, KjCarouselIndicators, KjCarouselAutoplay, KjCarouselPauseToggle, KjChatLog, KjChat, KjChatAvatar, KjChatHeader, KjChatBubble, KjChatFooter, KjChatAnnouncer, KJ_CHAT_CONFIG, parseSlash, matchSlashCommands, KjCheckbox, KjColorPicker, KjColorPickerTrigger, KjColorPickerPanel, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerAlphaSlider, KjColorPickerInput, KjComboboxInput, KjComboboxListbox, KjCombobox, KjComboboxOption, KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, defaultDateRangePresets, KjDateRangePresets, KjDateRangePresetOption, KjLocale, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, KjSpinner, KjVariant, KjEditorLoader, KjEditor, KJ_SIZE_PRESET, KjField, KjFieldLabel, KjFieldHelp, KjFieldError, KjFieldGroup, KjFileUpload, KjFileUploadTrigger, KjFileUploadDropzone, KjFileUploadList, KjFileUploadItem, KjProgressBar, KjProgressBarFill, KjForm, KjFormErrorSummary, KJ_ICON_REGISTRY, KjInput, KjInputGroup, KjInputGroupAddon, KjInputMask, KJ_INPUT_MASK_PRESETS, KjInputOtp, KjInputOtpCell, KjKbd, KJ_KBD_SIZE_PRESET, KjDivider, KJ_VARIANT_PRESET, KjList, KjListRow, KjMenubar, KjMenubarItem, KjNumberInput, KjNumberInputGroup, KjNumberStepper, KJ_OVERLAY_BADGE, KjOverlayBadgeContent, KjOverlayBadge, KjPagination, KjPaginationItem, KjPaginationPrevious, KjPaginationNext, KjPaginationFirst, KjPaginationLast, KjPaginationEllipsis, KjPaginationInfo, KJ_PASSWORD_INPUT, KjPasswordInput, KjPasswordInputScope, KjPasswordToggle, KjPasswordStrength, KjPasswordCapsLockWarning, KjRadioGroup, KjRadio, injectRteOverlayData, createKjImageNode, KJ_RTE_OVERLAY_DATA, KjRichTextEditor, KjRovingTabindex, KjRovingTabindexItemDirective, KjSelect, KjSelectTrigger, KjSelectContent, KjOption, KjSkeleton, KjSkipLink, KjSlider, KjSliderTrack, KjSliderRange, KjSliderThumb, KjSpeedDial, KjSpeedDialTrigger, KjSpeedDialActions, KjSpeedDialAction, KjStepper, KjStep, KjStepLabel, KjStepContent, KjStepperNext, KjStepperPrevious, KjStepperReset, KjToggle, KJ_TABLE, provideKjFilterParams, KjTable, KJ_TABLE_STORAGE, KjTableHeader, KjTableRow, KjTableCell, KjTableKeyboardNav, DRAWER_DATA, KjDrawer, KjDrawerService, bindPresets, KJ_TABS_CONFIG, KjTabs, KjTabList, KjTab, KjTabPanel, KjTag, KjTagRemove, KjTagList, KjTextarea, KjTimePicker, KjTimePickerHours, KjTimePickerMinutes, KjTimePickerSeconds, KjTimePickerMeridiem, KjToastViewport, KjToast, KjToastClose, KjTooltipTrigger, KjTooltipContent, KjTooltipArrow, KjTooltipGroup, KjCascadeSelect, KjCascadeSelectTrigger, KjCascadeSelectPanel, KjCascadeSelectOption, KjCascadeSelectSubPanel, KjCommandPalette, KjOverlayStack, KjId, createOverlayWrapper, applyOverlayZIndex, clearOverlayZIndex, KjCommandInput, KjCommandList, KjCommandEmpty, injectListItem, KjListItem, KjCommandGroup, KjCommandSeparator, KjTreeSelectNode, KjTreeSelectToggle, KjTreeSelect, KjTreeSelectTrigger, KjTreeSelectContent } from '@kouji-ui/core';
+import { KjAccordion, KjAccordionTrigger, KjAccordionItem, KjAccordionContent, SHEET_DATA, KjSheetRef, KjSheet, KjIconDirective, KjSheetService, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KJ_AVATAR_GROUP, KjAvatarImage, KjAvatarFallback, KjAvatar, KjPopoverTrigger, KjPopoverContent, KjPopoverArrow, KjPopoverClose, KjPopoverTitle, KjTranslateService, KjOverflowContent, KjAvatarGroup, KjBadge, KjBreadcrumb, KjSize, KjBreadcrumbList, KjBreadcrumbItem, KJ_BREADCRUMB_CONFIG, KjLink, KjBreadcrumbCurrent, KjBreadcrumbSeparator, KjBreadcrumbEllipsis, KjButton, KjButtonGroup, KjCalendar, KjCalendarHeader, KjCalendarGrid, KjCalendarDay, KjCarousel, KjLiveRegion, KjVisuallyHidden, KjCarouselViewport, KjCarouselSlide, KjCarouselPrevious, KjCarouselNext, KJ_CAROUSEL, KjCarouselIndicator, KjCarouselIndicators, KjCarouselAutoplay, KjCarouselPauseToggle, KjChatLog, KjChat, KjChatAvatar, KjChatHeader, KjChatBubble, KjChatFooter, KjChatAnnouncer, KJ_CHAT_CONFIG, parseSlash, matchSlashCommands, KjCheckbox, KjColorPicker, KjColorPickerTrigger, KjColorPickerPanel, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerAlphaSlider, KjColorPickerInput, KjComboboxInput, KjComboboxListbox, KjCombobox, KjComboboxOption, KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, defaultDateRangePresets, KjDateRangePresets, KjDateRangePresetOption, KjLocale, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, KjSpinner, KjVariant, KjEditorLoader, KjEditor, KJ_SIZE_PRESET, KjField, KjFieldLabel, KjFieldHelp, KjFieldError, KjFieldGroup, KjFileUpload, KjFileUploadTrigger, KjFileUploadDropzone, KjFileUploadList, KjFileUploadItem, KjProgressBar, KjProgressBarFill, KjForm, KjFormErrorSummary, KJ_ICON_REGISTRY, KjInput, KjInputGroup, KjInputGroupAddon, KjInputMask, KJ_INPUT_MASK_PRESETS, KjInputOtp, KjInputOtpCell, KjKbd, KJ_KBD_SIZE_PRESET, KjDivider, KJ_VARIANT_PRESET, KjList, KjListRow, KjMenubar, KjMenubarItem, KjNumberInput, KjNumberInputGroup, KjNumberStepper, KJ_OVERLAY_BADGE, KjOverlayBadgeContent, KjOverlayBadge, KjPagination, KjPaginationItem, KjPaginationPrevious, KjPaginationNext, KjPaginationFirst, KjPaginationLast, KjPaginationEllipsis, KjPaginationInfo, KJ_PASSWORD_INPUT, KjPasswordInput, KjPasswordInputScope, KjPasswordToggle, KjPasswordStrength, KjPasswordCapsLockWarning, KjRadioGroup, KjRadio, injectRteOverlayData, createKjImageNode, KJ_RTE_OVERLAY_DATA, KjRichTextEditor, KjRovingTabindex, KjRovingTabindexItemDirective, KjSelect, KjSelectTrigger, KjSelectContent, KjOption, KjSkeleton, KjSkipLink, KjSlider, KjSliderTrack, KjSliderRange, KjSliderThumb, KjSpeedDial, KjSpeedDialTrigger, KjSpeedDialActions, KjSpeedDialAction, KjStepper, KjStep, KjStepLabel, KjStepContent, KjStepperNext, KjStepperPrevious, KjStepperReset, KjToggle, KJ_TABLE, provideKjFilterParams, KjTable, KJ_TABLE_STORAGE, KjTableHeader, KjTableRow, KjTableCell, KjTableKeyboardNav, DRAWER_DATA, KjDrawer, KjDrawerService, bindPresets, KJ_TABS_CONFIG, KjTabs, KjTabList, KjTab, KjTabPanel, KjTag, KjTagRemove, KjTagList, KjTextarea, KjTimePicker, KjTimePickerHours, KjTimePickerMinutes, KjTimePickerSeconds, KjTimePickerMeridiem, KjToastViewport, KjToast, KjToastClose, KjTooltipTrigger, KjTooltipContent, KjTooltipArrow, KjTooltipGroup, KjCascadeSelect, KjCascadeSelectTrigger, KjCascadeSelectPanel, KjCascadeSelectOption, KjCascadeSelectSubPanel, KjCommandPalette, KjOverlayStack, KjId, KjDismissPress, createOverlayWrapper, applyOverlayZIndex, clearOverlayZIndex, KjCommandInput, KjCommandList, KjCommandEmpty, injectListItem, KjListItem, KjCommandGroup, KjCommandSeparator, KjTreeSelectNode, KjTreeSelectToggle, KjTreeSelect, KjTreeSelectTrigger, KjTreeSelectContent } from '@kouji-ui/core';
 export { KJ_DROPDOWN_MENU, KjBlockquote, KjCarousel, KjCarouselSlide, KjCascadeSelectOption, KjChatAnnouncer, KjChatStore, KjCode, KjColorPicker, KjCombobox, KjDatePicker, KjDialog, KjDialogRef, KjDialogService, KjDrawer, KjDrawerRef, KjDrawerService, KjDropdownMenuContent, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjFileUpload, KjInput, KjLead, KjLiveRegion, KjMuted, KjOverlayPanel, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjRichTextEditor, KjSheet, KjSheetRef, KjSheetService, KjTabPanel, KjTable, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTreeSelect, KjTruncate, SHEET_ARIA_LABEL, SHEET_DATA, SHEET_DETENT, SHEET_DISMISSIBLE } from '@kouji-ui/core';
 import { NgTemplateOutlet, isPlatformBrowser, NgComponentOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -20408,8 +20408,42 @@ class KjCommandPaletteComponent {
             });
         });
     }
+    /**
+     * Dismiss-by-scrim is a press the backdrop owns from the start. The
+     * backdrop spans the viewport underneath every overlay opened from
+     * inside the palette, so the browser hands it clicks it never saw the
+     * start of: commit a NEW value in a nested `<kj-select>` and its option
+     * list re-renders, the clicked option leaves the document before the
+     * pointer is released, and the engine retargets the `click` to what is
+     * under the pointer by then — this scrim. Committing the SAME value
+     * re-renders nothing, so the option stays put and the palette survived,
+     * which is what made the bug look value-dependent.
+     *
+     * Arming on `pointerdown` — dispatched at the true origin, before any
+     * re-render can move it — is what separates the two.
+     */
+    backdropPress = new KjDismissPress();
+    /** @internal — template listener; the press began on the scrim. */
+    onBackdropPress() {
+        // While a select / popover / dialog opened from inside the palette is
+        // still up, that overlay owns the gesture — `KjOverlayStack` routes
+        // the same pointerdown to it. Same posture as `onEscape`, and it has
+        // to be judged HERE: by the time the click arrives the nested overlay
+        // has closed and unregistered, which would make the palette look
+        // topmost and dismiss it on the press that dismissed the select.
+        if (this.stackHandle && !this.stackHandle.isTopmost())
+            return;
+        this.backdropPress.arm();
+    }
+    /** @internal — template listener. */
+    onBackdropClick(event) {
+        if (!this.backdropPress.owns(event))
+            return;
+        this.close();
+    }
     /** Programmatically close the palette. */
     close() {
+        this.backdropPress.reset();
         this.kjOpen.set(false);
     }
     /**
@@ -20490,7 +20524,13 @@ class KjCommandPaletteComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjCommandPaletteComponent, isStandalone: true, selector: "kj-command-palette", inputs: { kjPlaceholder: { classPropertyName: "kjPlaceholder", publicName: "kjPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, kjEscBadge: { classPropertyName: "kjEscBadge", publicName: "kjEscBadge", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, kjOpen: { classPropertyName: "kjOpen", publicName: "kjOpen", isSignal: true, isRequired: false, transformFunction: null }, kjHotkey: { classPropertyName: "kjHotkey", publicName: "kjHotkey", isSignal: true, isRequired: false, transformFunction: null }, kjItems: { classPropertyName: "kjItems", publicName: "kjItems", isSignal: true, isRequired: false, transformFunction: null }, kjAutoCloseOnActivate: { classPropertyName: "kjAutoCloseOnActivate", publicName: "kjAutoCloseOnActivate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjOpen: "kjOpenChange" }, host: { listeners: { "kjActivate": "onActivate()" }, styleAttribute: "display: contents;", classAttribute: "kj-command-palette" }, queries: [{ propertyName: "itemTpl", first: true, predicate: KjCommandPaletteItemTemplate, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: KjCommandPaletteFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "shell", first: true, predicate: ["shell"], descendants: true, isSignal: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.KjCommandPalette, inputs: ["kjShouldFilter", "kjShouldFilter", "kjLoading", "kjLoading", "kjAutoActivateFirst", "kjAutoActivateFirst", "kjDismissOnActivate", "kjDismissOnActivate", "kjValue", "kjValue", "kjQuery", "kjQuery", "kjFilter", "kjFilter"], outputs: ["kjValueChange", "kjValueChange", "kjQueryChange", "kjQueryChange", "kjActivate", "kjActivate"] }], ngImport: i0, template: `
     <div #shell class="kj-command-palette__shell" [class.is-open]="kjOpen()">
-      <div class="kj-command-palette__backdrop" (click)="close()" aria-hidden="true"></div>
+      <div
+        class="kj-command-palette__backdrop"
+        (pointerdown)="onBackdropPress()"
+        (mousedown)="onBackdropPress()"
+        (click)="onBackdropClick($event)"
+        aria-hidden="true"
+      ></div>
       <div
         #dialog
         class="kj-command-palette__dialog"
@@ -20546,7 +20586,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             outputs: ['kjValueChange', 'kjQueryChange', 'kjActivate'],
                         }], template: `
     <div #shell class="kj-command-palette__shell" [class.is-open]="kjOpen()">
-      <div class="kj-command-palette__backdrop" (click)="close()" aria-hidden="true"></div>
+      <div
+        class="kj-command-palette__backdrop"
+        (pointerdown)="onBackdropPress()"
+        (mousedown)="onBackdropPress()"
+        (click)="onBackdropClick($event)"
+        aria-hidden="true"
+      ></div>
       <div
         #dialog
         class="kj-command-palette__dialog"