@underlayerdev/ui 0.7.5 → 0.8.1

package/fesm2022/underlayerdev-ui.mjs

@@ -2,16 +2,17 @@ import * as i1 from '@angular/cdk/accordion';
 import { CdkAccordionItem, CdkAccordion } from '@angular/cdk/accordion';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Component, input, DestroyRef, contentChildren, computed, ViewEncapsulation, signal, effect, Directive, output, model, booleanAttribute, viewChild, ViewChild, contentChild, HostListener, Pipe, SecurityContext, Injectable, HostBinding } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
 import Splide from '@splidejs/splide';
-import { fromEvent } from 'rxjs';
+import { fromEvent, map } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { DomSanitizer } from '@angular/platform-browser';
+import { BreakpointObserver } from '@angular/cdk/layout';
 
 /**
  * AccordionItemComponent is a standalone Angular component that extends CdkAccordionItem.
@@ -3992,6 +3993,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             args: [{ selector: 'ul-select', imports: [DropdownComponent, FormFieldLabelComponent, FormFieldHelperComponent], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [disabled]=\"disabled()\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }] } });
 
+/**
+ * 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>
+ * ```
+ */
+class SelectableRowComponent {
+    /** Whether this row is currently selected. */
+    selected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the list is in selection mode (something, anywhere, is
+     * selected) — drives the compact-mode media-for-checkbox swap.
+     */
+    selectionActive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionActive" }] : /* istanbul ignore next */ []));
+    /** Accessible label for this row's checkbox(es). */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    selectedChange = output();
+    longPress = output();
+    /**
+     * 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".
+     */
+    hasFinePointer = toSignal(inject(BreakpointObserver)
+        .observe('(hover: hover) and (pointer: fine)')
+        .pipe(map((state) => state.matches)), { initialValue: true });
+    isCompact = computed(() => !this.hasFinePointer(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
+    // Set for the click that immediately follows a successful long-press, so
+    // that trailing click doesn't also toggle the row straight back off via
+    // onHostClick below (see the same problem/fix in undermarket's
+    // profile-listings for the version of this before it moved into here).
+    justLongPressed = false;
+    constructor() {
+        inject(LongPressDirective).ulLongPress.subscribe(() => {
+            this.justLongPressed = true;
+            this.longPress.emit();
+        });
+    }
+    /**
+     * While selecting, a tap anywhere in the row toggles it — not just on the
+     * checkbox. This applies on every device, not only once the checkbox has
+     * replaced the media (compact): otherwise the row's content on
+     * fine-pointer devices would only be togglable by precisely hitting the
+     * small hover-revealed checkbox, which is inconsistent with how compact
+     * mode behaves and isn't how Gmail/Photos-style bulk-select works even on
+     * desktop web. 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) {
+        if (this.justLongPressed) {
+            this.justLongPressed = false;
+            return;
+        }
+        if (!this.selectionActive())
+            return;
+        // The checkbox already has its own (checkedChange) handler — without
+        // this, a tap on it would toggle twice (once from checkedChange, once
+        // from this handler catching the same click as it bubbles up).
+        if (event.target.closest('ul-checkbox'))
+            return;
+        this.selectedChange.emit(!this.selected());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SelectableRowComponent, isStandalone: true, selector: "ul-selectable-row", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionActive: { classPropertyName: "selectionActive", publicName: "selectionActive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", longPress: "longPress" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ul-selectable-row": "selected()" } }, hostDirectives: [{ directive: LongPressDirective }], ngImport: i0, template: `
+    @if (isCompact() && selectionActive()) {
+      <ul-checkbox
+        size="lg"
+        [checked]="selected()"
+        [attr.aria-label]="ariaLabel()"
+        (checkedChange)="selectedChange.emit($event)"
+      />
+    } @else {
+      <ng-content select="[ul-selectable-row-media]" />
+    }
+    @if (!isCompact()) {
+      <ul-checkbox
+        class="ul-selectable-row__hover-checkbox"
+        [checked]="selected()"
+        [attr.aria-label]="ariaLabel()"
+        (checkedChange)="selectedChange.emit($event)"
+      />
+    }
+    <ng-content select="[ul-selectable-row-content]" />
+    <ng-content />
+  `, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}:host{display:flex;align-items:center;width:100%;box-sizing:border-box;gap:16px;padding:4px;border-radius:8px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.ul-selectable-row__hover-checkbox{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}:host(:hover) .ul-selectable-row__hover-checkbox,:host(:focus-within) .ul-selectable-row__hover-checkbox,:host(:has(.ul-checkbox__input:checked)) .ul-selectable-row__hover-checkbox{opacity:1}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ul-checkbox", inputs: ["checked", "disabled", "indeterminate", "zone", "size", "label", "helperText", "required", "showRequiredIndicator", "error", "errorText", "invalid", "errors"], outputs: ["checkedChange", "disabledChange", "indeterminateChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul-selectable-row', imports: [CheckboxComponent], hostDirectives: [LongPressDirective], host: {
+                        '[class.ul-selectable-row]': 'selected()',
+                        '(click)': 'onHostClick($event)',
+                    }, template: `
+    @if (isCompact() && selectionActive()) {
+      <ul-checkbox
+        size="lg"
+        [checked]="selected()"
+        [attr.aria-label]="ariaLabel()"
+        (checkedChange)="selectedChange.emit($event)"
+      />
+    } @else {
+      <ng-content select="[ul-selectable-row-media]" />
+    }
+    @if (!isCompact()) {
+      <ul-checkbox
+        class="ul-selectable-row__hover-checkbox"
+        [checked]="selected()"
+        [attr.aria-label]="ariaLabel()"
+        (checkedChange)="selectedChange.emit($event)"
+      />
+    }
+    <ng-content select="[ul-selectable-row-content]" />
+    <ng-content />
+  `, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}:host{display:flex;align-items:center;width:100%;box-sizing:border-box;gap:16px;padding:4px;border-radius:8px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.ul-selectable-row__hover-checkbox{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}:host(:hover) .ul-selectable-row__hover-checkbox,:host(:focus-within) .ul-selectable-row__hover-checkbox,:host(:has(.ul-checkbox__input:checked)) .ul-selectable-row__hover-checkbox{opacity:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActive", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], longPress: [{ type: i0.Output, args: ["longPress"] }] } });
+
 class SidebarComponent {
     items = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -4293,5 +4445,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=underlayerdev-ui.mjs.map