@underlayerdev/ui 0.9.2 → 0.9.3

package/fesm2022/underlayerdev-ui.mjs

@@ -4269,6 +4269,13 @@ class SelectableRowComponent {
      */
     selectionActive = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectionActive" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this row supports selection at all. False renders it as a plain
+     * row — no checkbox (hover or compact), no long-press, no click-to-toggle
+     * — for a list that doesn't offer bulk actions right now.
+     */
+    selectable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
     /** Accessible label for this row's checkbox(es). */
     ariaLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -4291,6 +4298,8 @@ class SelectableRowComponent {
     justLongPressed = false;
     constructor() {
         inject(LongPressDirective).ulLongPress.subscribe(() => {
+            if (!this.selectable())
+                return;
             this.justLongPressed = true;
             this.longPress.emit();
         });
@@ -4313,7 +4322,7 @@ class SelectableRowComponent {
             this.justLongPressed = false;
             return;
         }
-        if (!this.selectionActive())
+        if (!this.selectable() || !this.selectionActive())
             return;
         // The checkbox already has its own (checkedChange) handler — without
         // this, a tap on it would toggle twice (once from checkedChange, once
@@ -4323,8 +4332,8 @@ class SelectableRowComponent {
         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()) {
+    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 }, selectable: { classPropertyName: "selectable", publicName: "selectable", 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 (selectable() && isCompact() && selectionActive()) {
       <ul-checkbox
         size="lg"
         [checked]="selected()"
@@ -4334,7 +4343,7 @@ class SelectableRowComponent {
     } @else {
       <ng-content select="[ul-selectable-row-media]" />
     }
-    @if (!isCompact()) {
+    @if (selectable() && !isCompact()) {
       <ul-checkbox
         class="ul-selectable-row__hover-checkbox"
         [checked]="selected()"
@@ -4352,7 +4361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         '[class.ul-selectable-row]': 'selected()',
                         '(click)': 'onHostClick($event)',
                     }, template: `
-    @if (isCompact() && selectionActive()) {
+    @if (selectable() && isCompact() && selectionActive()) {
       <ul-checkbox
         size="lg"
         [checked]="selected()"
@@ -4362,7 +4371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
     } @else {
       <ng-content select="[ul-selectable-row-media]" />
     }
-    @if (!isCompact()) {
+    @if (selectable() && !isCompact()) {
       <ul-checkbox
         class="ul-selectable-row__hover-checkbox"
         [checked]="selected()"
@@ -4373,7 +4382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
     <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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActive", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", 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 */