@rivet-health/design-system 40.6.2 → 40.7.0

package/fesm2020/rivet-health-design-system.mjs

@@ -5413,6 +5413,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A borderless heading with a click-to-edit title and an optional
+ * click-to-edit description, plus a projected slot for actions.
+ *
+ * Layout: `[title] | [description]  [actions]`
+ *
+ * - Click the title to rename; click the description (or the ghost
+ *   "+ Add description" button when empty) to edit it.
+ * - Only one of title or description can be edited at a time.
+ * - While either is being edited, the `[actions]` slot is hidden so
+ *   projected controls don't compete with the edit affordance.
+ *
+ * Commit semantics: `titleChange` / `descriptionChange` fire when the user
+ * commits — Enter, outside click, or the Check button — not on every
+ * keystroke, and always on commit (even when the value is unchanged). The
+ * "commit" framing over "change" is deliberate: consumers that persist on
+ * commit (analytics, PATCH) treat the gesture itself as the event; those
+ * that only care about diffs can compare `next === current` in the handler.
+ * There is no cancel path.
+ *
+ * Outside-click commits (rather than cancels) to match the established DS
+ * interaction pattern in `riv-date` and `riv-select`. If a future consumer
+ * needs an abandon path, the soft first step is Escape-to-cancel rather
+ * than changing outside-click's meaning.
+ *
+ * Value handling follows the same convention as `riv-text-field`: `[title]`
+ * and `[description]` are treated as suggestions, not authoritative state.
+ * On commit, the component keeps displaying the user's committed value,
+ * and only overwrites its internal state when the parent explicitly sends
+ * a different value. That lets the component demo out of the box (e.g. in
+ * Storybook) without requiring a round trip through the parent.
+ *
+ * The component owns no border, background, or card chrome — consumers who
+ * want a bordered container should wrap it.
+ *
+ * ```html
+ * <riv-editable-heading
+ *   [title]="report.title"
+ *   [description]="report.description"
+ *   (titleChange)="onTitleCommit($event)"
+ *   (descriptionChange)="onDescriptionCommit($event)"
+ * >
+ *   <riv-menu actions>
+ *     <ng-template #trigger>
+ *       <button rivButton [icon]="'MoreVertical'" [variant]="'ghost'"></button>
+ *     </ng-template>
+ *     <button riv-menu-item>Rename</button>
+ *     <button riv-menu-item>Duplicate</button>
+ *   </riv-menu>
+ *   <button rivButton actions [variant]="'primary'">Save</button>
+ * </riv-editable-heading>
+ * ```
+ */
+class EditableHeadingComponent {
+    set title(v) {
+        if (v !== this._title)
+            this._title = v;
+    }
+    get title() {
+        return this._title;
+    }
+    set description(v) {
+        if (v !== this._description)
+            this._description = v;
+    }
+    get description() {
+        return this._description;
+    }
+    constructor(cdr, host) {
+        this.cdr = cdr;
+        this.host = host;
+        // See the "Value handling" section of the class-level doc.
+        this._title = '';
+        this._description = '';
+        this.titleMaxLength = 100;
+        this.descriptionMaxLength = 300;
+        this.titleChange = new EventEmitter();
+        this.descriptionChange = new EventEmitter();
+        this.mode = 'view';
+        this.draftTitle = '';
+        this.draftDescription = '';
+    }
+    get isEditing() {
+        return this.mode !== 'view';
+    }
+    startEditingTitle() {
+        this.draftTitle = this.title;
+        this.mode = 'editingTitle';
+        // Defer focus until Angular has rendered the input into the DOM.
+        setTimeout(() => this.focusEnd(this.titleInputRef), 0);
+    }
+    startEditingDescription() {
+        this.draftDescription = this.description;
+        this.mode = 'editingDescription';
+        setTimeout(() => this.focusEnd(this.descriptionInputRef), 0);
+    }
+    commitTitle() {
+        if (this.mode !== 'editingTitle')
+            return;
+        // Title cannot be committed empty. The Check button is disabled in that
+        // state; for Enter and outside-click we revert to the current title so
+        // the user is never stuck in edit mode with a rejected value.
+        if (!this.draftTitle) {
+            this.mode = 'view';
+            return;
+        }
+        const value = this.draftTitle;
+        this._title = value;
+        this.mode = 'view';
+        this.titleChange.emit(value);
+    }
+    commitDescription() {
+        if (this.mode !== 'editingDescription')
+            return;
+        const value = this.draftDescription;
+        this._description = value;
+        this.mode = 'view';
+        this.descriptionChange.emit(value);
+    }
+    // Listens on `mousedown` (not `click`) so the check runs before Angular
+    // re-renders the trigger element out of the DOM — otherwise
+    // `host.contains(target)` returns false for a click that landed on the
+    // now-removed `.title` / `.description` element. Same pattern as
+    // `riv-date`.
+    onDocumentMouseDown(target) {
+        if (this.mode === 'view' || !(target instanceof Element))
+            return;
+        if (this.host.nativeElement.contains(target))
+            return;
+        if (this.mode === 'editingTitle') {
+            this.commitTitle();
+        }
+        else if (this.mode === 'editingDescription') {
+            this.commitDescription();
+        }
+    }
+    // Focus with caret at end (rather than selecting all) so the user can
+    // continue typing where the previous value left off.
+    focusEnd(ref) {
+        const el = ref?.nativeElement;
+        if (!el)
+            return;
+        el.focus();
+        const len = el.value.length;
+        el.setSelectionRange(len, len);
+        this.cdr.markForCheck();
+    }
+}
+EditableHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditableHeadingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+EditableHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditableHeadingComponent, selector: "riv-editable-heading", inputs: { title: "title", description: "description", titleMaxLength: "titleMaxLength", descriptionMaxLength: "descriptionMaxLength" }, outputs: { titleChange: "titleChange", descriptionChange: "descriptionChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" }, properties: { "class.editing": "this.isEditing" } }, viewQueries: [{ propertyName: "titleInputRef", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "descriptionInputRef", first: true, predicate: ["descriptionInput"], descendants: true }], ngImport: i0, template: "<div class=\"leading\">\n  <ng-container [ngSwitch]=\"mode\">\n    <!-- View mode -->\n    <ng-container *ngSwitchDefault>\n      <button\n        type=\"button\"\n        class=\"title\"\n        [class.has-description]=\"description\"\n        rivTruncate\n        aria-label=\"Rename\"\n        (click)=\"startEditingTitle()\"\n      >\n        {{ title || 'Untitled' }}\n      </button>\n\n      <div class=\"divider\"></div>\n\n      <button\n        *ngIf=\"description; else addDescription\"\n        type=\"button\"\n        class=\"description\"\n        rivTruncate\n        aria-label=\"Edit description\"\n        (click)=\"startEditingDescription()\"\n      >\n        {{ description }}\n      </button>\n\n      <ng-template #addDescription>\n        <div class=\"add-description-wrap\">\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"'Plus'\"\n            [iconPosition]=\"'first'\"\n            type=\"button\"\n            (click)=\"startEditingDescription()\"\n          >\n            Add description\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Editing title -->\n    <ng-container *ngSwitchCase=\"'editingTitle'\">\n      <input\n        #titleInput\n        class=\"title-input\"\n        type=\"text\"\n        aria-label=\"Title\"\n        [value]=\"draftTitle\"\n        [attr.maxlength]=\"titleMaxLength\"\n        (input)=\"draftTitle = titleInput.value\"\n        (keydown.enter)=\"commitTitle()\"\n      />\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        [disabled]=\"!draftTitle\"\n        (click)=\"commitTitle()\"\n        aria-label=\"Save title\"\n      ></button>\n    </ng-container>\n\n    <!-- Editing description -->\n    <ng-container *ngSwitchCase=\"'editingDescription'\">\n      <input\n        #descriptionInput\n        class=\"description-input\"\n        type=\"text\"\n        aria-label=\"Description\"\n        [value]=\"draftDescription\"\n        [attr.maxlength]=\"descriptionMaxLength\"\n        placeholder=\"Add a description\"\n        (input)=\"draftDescription = descriptionInput.value\"\n        (keydown.enter)=\"commitDescription()\"\n      />\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        (click)=\"commitDescription()\"\n        aria-label=\"Save description\"\n      ></button>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div class=\"actions\" *ngIf=\"!isEditing\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:stretch;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 8);font:var(--body-medium)}.leading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--size-small)}.title,.description{padding:0;border:none;background:none;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title{font:var(--stat-xsmall);line-height:calc(var(--base-grid-size) * 4.5);color:var(--type-light-high-contrast);max-width:100%}.title.has-description{width:-moz-fit-content;width:fit-content;max-width:50%;flex-shrink:0}.description{font:var(--input-small);line-height:calc(var(--base-grid-size) * 3.5);color:var(--type-light-low-contrast);flex:1 1 auto}.divider{align-self:stretch;border-right:var(--border-width) solid var(--border-light);margin:0 var(--base-grid-size) 0 0;flex-shrink:0}.add-description-wrap{flex-shrink:0}.title-input,.description-input{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);padding:var(--size-small) var(--size-medium);color:var(--type-light-high-contrast);outline:none;min-width:0}.title-input{font:var(--stat-xsmall);flex:1 1 auto}.description-input{font:var(--input-small);flex:1 1 auto}.title-input:focus,.description-input:focus{border-color:var(--purp-60)}.commit{flex-shrink:0}.actions{display:flex;align-items:center;gap:var(--size-small);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditableHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-editable-heading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n  <ng-container [ngSwitch]=\"mode\">\n    <!-- View mode -->\n    <ng-container *ngSwitchDefault>\n      <button\n        type=\"button\"\n        class=\"title\"\n        [class.has-description]=\"description\"\n        rivTruncate\n        aria-label=\"Rename\"\n        (click)=\"startEditingTitle()\"\n      >\n        {{ title || 'Untitled' }}\n      </button>\n\n      <div class=\"divider\"></div>\n\n      <button\n        *ngIf=\"description; else addDescription\"\n        type=\"button\"\n        class=\"description\"\n        rivTruncate\n        aria-label=\"Edit description\"\n        (click)=\"startEditingDescription()\"\n      >\n        {{ description }}\n      </button>\n\n      <ng-template #addDescription>\n        <div class=\"add-description-wrap\">\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"'Plus'\"\n            [iconPosition]=\"'first'\"\n            type=\"button\"\n            (click)=\"startEditingDescription()\"\n          >\n            Add description\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Editing title -->\n    <ng-container *ngSwitchCase=\"'editingTitle'\">\n      <input\n        #titleInput\n        class=\"title-input\"\n        type=\"text\"\n        aria-label=\"Title\"\n        [value]=\"draftTitle\"\n        [attr.maxlength]=\"titleMaxLength\"\n        (input)=\"draftTitle = titleInput.value\"\n        (keydown.enter)=\"commitTitle()\"\n      />\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        [disabled]=\"!draftTitle\"\n        (click)=\"commitTitle()\"\n        aria-label=\"Save title\"\n      ></button>\n    </ng-container>\n\n    <!-- Editing description -->\n    <ng-container *ngSwitchCase=\"'editingDescription'\">\n      <input\n        #descriptionInput\n        class=\"description-input\"\n        type=\"text\"\n        aria-label=\"Description\"\n        [value]=\"draftDescription\"\n        [attr.maxlength]=\"descriptionMaxLength\"\n        placeholder=\"Add a description\"\n        (input)=\"draftDescription = descriptionInput.value\"\n        (keydown.enter)=\"commitDescription()\"\n      />\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        (click)=\"commitDescription()\"\n        aria-label=\"Save description\"\n      ></button>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div class=\"actions\" *ngIf=\"!isEditing\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:stretch;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 8);font:var(--body-medium)}.leading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--size-small)}.title,.description{padding:0;border:none;background:none;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title{font:var(--stat-xsmall);line-height:calc(var(--base-grid-size) * 4.5);color:var(--type-light-high-contrast);max-width:100%}.title.has-description{width:-moz-fit-content;width:fit-content;max-width:50%;flex-shrink:0}.description{font:var(--input-small);line-height:calc(var(--base-grid-size) * 3.5);color:var(--type-light-low-contrast);flex:1 1 auto}.divider{align-self:stretch;border-right:var(--border-width) solid var(--border-light);margin:0 var(--base-grid-size) 0 0;flex-shrink:0}.add-description-wrap{flex-shrink:0}.title-input,.description-input{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);padding:var(--size-small) var(--size-medium);color:var(--type-light-high-contrast);outline:none;min-width:0}.title-input{font:var(--stat-xsmall);flex:1 1 auto}.description-input{font:var(--input-small);flex:1 1 auto}.title-input:focus,.description-input:focus{border-color:var(--purp-60)}.commit{flex-shrink:0}.actions{display:flex;align-items:center;gap:var(--size-small);flex-shrink:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], titleMaxLength: [{
+                type: Input
+            }], descriptionMaxLength: [{
+                type: Input
+            }], titleChange: [{
+                type: Output
+            }], descriptionChange: [{
+                type: Output
+            }], titleInputRef: [{
+                type: ViewChild,
+                args: ['titleInput']
+            }], descriptionInputRef: [{
+                type: ViewChild,
+                args: ['descriptionInput']
+            }], isEditing: [{
+                type: HostBinding,
+                args: ['class.editing']
+            }], onDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event.target']]
+            }] } });
+
 /**
  * Page header used to display the page/product the user is on.
  *
@@ -15366,6 +15545,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         DialogComponent,
         DollarsPipe,
         DonutComponent,
+        EditableHeadingComponent,
         EditViewComponent,
         FunnelChartComponent,
         HelpComponent,
@@ -15463,6 +15643,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         DialogComponent,
         DollarsPipe,
         DonutComponent,
+        EditableHeadingComponent,
         EditViewComponent,
         FunnelChartComponent,
         HelpComponent,
@@ -15564,6 +15745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DialogComponent,
                         DollarsPipe,
                         DonutComponent,
+                        EditableHeadingComponent,
                         EditViewComponent,
                         FunnelChartComponent,
                         HelpComponent,
@@ -15664,6 +15846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DialogComponent,
                         DollarsPipe,
                         DonutComponent,
+                        EditableHeadingComponent,
                         EditViewComponent,
                         FunnelChartComponent,
                         HelpComponent,
@@ -15744,5 +15927,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
+export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, EditableHeadingComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
 //# sourceMappingURL=rivet-health-design-system.mjs.map