@underlayerdev/ui 0.7.5 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underlayerdev/ui",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",

package/types/underlayerdev-ui.d.ts

@@ -1554,6 +1554,78 @@ declare class SelectComponent implements FormValueControl<string | null> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ul-select", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showRequiredIndicator": { "alias": "showRequiredIndicator"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; "selectedIndex": "selectedIndexChange"; }, never, never, true, never>;
 }
 
+/**
+ * Makes any row of projected content (thumbnail/media + label content, plus
+ * anything else — a status pill, actions) selectable in a bulk-select list,
+ * without the consumer having to hand-roll device detection or gesture
+ * wiring themselves:
+ *
+ * - Fine-pointer/real-hover devices (desktop): a checkbox is always present
+ *   but invisible until the row is hovered, keyboard-focused, or already
+ *   checked — Gmail-list style.
+ * - Coarse-pointer/no-hover devices (touch): long-press a row to select it;
+ *   every row then swaps its projected `[ul-selectable-row-media]` content
+ *   for a large checkbox — there's rarely room for both a thumbnail and an
+ *   easy-to-hit checkbox on a small card.
+ *
+ * This component only decides what to *show* and detects the long-press
+ * gesture — it doesn't know about routing, so a consumer whose media/content
+ * slots contain a routerLink-driven anchor still needs to null that binding
+ * out itself while `selectionActive` (see ul-selectable-row's own usage in
+ * undermarket's profile-listings for the pattern).
+ *
+ * @example
+ * ```html
+ * <ul-selectable-row
+ *   [selected]="isSelected(item.id)"
+ *   [selectionActive]="hasSelection()"
+ *   [ariaLabel]="'Select ' + item.title"
+ *   (selectedChange)="toggleSelect(item.id, $event)"
+ *   (longPress)="onRowLongPress(item.id)"
+ * >
+ *   <img ul-selectable-row-media [src]="item.imageUrl" alt="" />
+ *   <div ul-selectable-row-content>{{ item.title }}</div>
+ *   <ul-pill>{{ item.status }}</ul-pill>
+ * </ul-selectable-row>
+ * ```
+ */
+declare class SelectableRowComponent {
+    /** Whether this row is currently selected. */
+    selected: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the list is in selection mode (something, anywhere, is
+     * selected) — drives the compact-mode media-for-checkbox swap.
+     */
+    selectionActive: _angular_core.InputSignal<boolean>;
+    /** Accessible label for this row's checkbox(es). */
+    ariaLabel: _angular_core.InputSignal<string | null>;
+    selectedChange: _angular_core.OutputEmitterRef<boolean>;
+    longPress: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Same distinction the hover-reveal CSS relies on — a width breakpoint
+     * alone would misclassify a wide tablet in landscape, which has no real
+     * hover, as "desktop".
+     */
+    private readonly hasFinePointer;
+    readonly isCompact: _angular_core.Signal<boolean>;
+    private justLongPressed;
+    constructor();
+    /**
+     * Once every row shows a checkbox in place of its media (compact +
+     * selecting), the checkbox is the only thing with its own toggle handler
+     * — everything else in the row (the content slot, empty space) does
+     * nothing on tap, which defeats the point of showing a large, easy-to-hit
+     * target. Toggling on any tap in that state fixes it; it's safe to do
+     * unconditionally (regardless of what's projected) because a consumer
+     * whose content contains a routerLink is already expected to have nulled
+     * that binding out while `selectionActive` — so there's no competing
+     * navigation to accidentally trigger.
+     */
+    onHostClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectableRowComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectableRowComponent, "ul-selectable-row", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectionActive": { "alias": "selectionActive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "longPress": "longPress"; }, never, ["[ul-selectable-row-media]", "[ul-selectable-row-content]", "*"], true, [{ directive: typeof LongPressDirective; inputs: {}; outputs: {}; }]>;
+}
+
 /**
  * Generates unique IDs for form field elements (control, helper, error).
  * Use this so label `for`, helper `id`, and `aria-describedby` stay in sync.
@@ -1736,5 +1808,5 @@ declare class TextareaComponent implements FormValueControl<string> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "ul-textarea", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showRequiredIndicator": { "alias": "showRequiredIndicator"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "groupFocused": { "alias": "groupFocused"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, ["customField"], ["[ul-textarea-left-elements]", "[ul-textarea-field]", "[ul-textarea-right-elements]"], true, never>;
 }
 
-export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchSelectComponent, SelectComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
+export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
 export type { ActionsDistribution, AvatarData, BreadcrumbItem, BreadcrumbSeparator, CalendarDay, CalendarMode, CardCaptionSize, CardDirection, CheckboxZoneType, CollapseVariant, Currency, DockItemVariant, DropdownItem, FileInputAppearance, HeroAction, HeroAlignment, HeroSize, IconName, IconSize, IconWeight, InputAppearance, InputType, ListItemTheme, MediaAspectRatio, MenuItem, ModalVariant, PillSize, PillTheme, PillVariant, RadioGroupOption, RichTextSize, RichTextTone, SalePosition, SearchSelectOption, SelectOption, SidebarItem, SkeletonBorderRadius, SkeletonVariant, SortDirection, Status, TableColumn, TextareaResize, TimeSelection, ToastConfig, ToastKind, ToastWithRole, TooltipPosition };