@rivet-health/design-system 40.7.1 → 40.9.0

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

@@ -4308,18 +4308,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         'large',
         'xlarge',
     ];
-    // Accepts MM/DD/YYYY, M/D/YY, and YYYY-MM-DD with /, -, or . separators.
-    // A 4-digit leading segment is treated as year.
+    // Accepts MM/DD/YYYY, M/D/YY, and YYYY-MM-DD with /, -, or . separators, as
+    // well as separator-less digit runs (MMDDYYYY or MMDDYY). A 4-digit leading
+    // segment in the separated form is treated as an ISO year; 2-digit years
+    // pivot at 50 (<50 → 2000s, >=50 → 1900s).
     function parseDate(input) {
-        const parts = input.trim().split(/[/.-]/);
-        if (parts.length !== 3)
+        const trimmed = input.trim();
+        if (!trimmed)
             return undefined;
-        const nums = parts.map(p => parseInt(p, 10));
-        if (nums.some(isNaN))
+        const ymd = /^\d+$/.test(trimmed)
+            ? parseDigits(trimmed)
+            : parseSeparated(trimmed);
+        if (!ymd)
             return undefined;
-        let [year, month, day] = parts[0].length === 4 ? nums : [nums[2], nums[0], nums[1]];
-        if (parts[0].length !== 4 && year < 100)
-            year += year < 50 ? 2000 : 1900;
+        const [year, month, day] = ymd;
         const date = new Date(year, month - 1, day);
         return date.getFullYear() === year &&
             date.getMonth() === month - 1 &&
@@ -4328,6 +4330,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             : undefined;
     }
     DateComponent.parseDate = parseDate;
+    function expandTwoDigitYear(year) {
+        return year < 100 ? year + (year < 50 ? 2000 : 1900) : year;
+    }
+    // A run of digits with no separators: 8 → MMDDYYYY (literal year), 6 → MMDDYY
+    // (2-digit year pivoted at 50).
+    function parseDigits(digits) {
+        if (digits.length !== 8 && digits.length !== 6)
+            return undefined;
+        const year = parseInt(digits.slice(4), 10);
+        return [
+            digits.length === 6 ? expandTwoDigitYear(year) : year,
+            parseInt(digits.slice(0, 2), 10),
+            parseInt(digits.slice(2, 4), 10),
+        ];
+    }
+    function parseSeparated(input) {
+        const parts = input.split(/[/.-]/);
+        if (parts.length !== 3)
+            return undefined;
+        const nums = parts.map(p => parseInt(p, 10));
+        if (nums.some(isNaN))
+            return undefined;
+        const [year, month, day] = parts[0].length === 4 ? nums : [nums[2], nums[0], nums[1]];
+        return [
+            parts[0].length === 4 ? year : expandTwoDigitYear(year),
+            month,
+            day,
+        ];
+    }
     function isValidDate(date, min, max) {
         const time = date.getTime();
         return time >= min.getTime() && time <= max.getTime();
@@ -5443,12 +5474,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * "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.
+ * Escape cancels: reverts the draft back to the current value and drops out
+ * of edit mode WITHOUT emitting a change. Outside-click still commits (to
+ * match `riv-date` / `riv-select`); Escape is the deliberate abandon path.
  *
  * Value handling follows the same convention as `riv-text-field`: `[title]`
  * and `[description]` are treated as suggestions, not authoritative state.
@@ -5457,6 +5486,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * a different value. That lets the component demo out of the box (e.g. in
  * Storybook) without requiring a round trip through the parent.
  *
+ * Programmatic entry into edit mode is available via `startEditingTitle()`
+ * and `startEditingDescription()` — obtain a reference with
+ * `@ViewChild(EditableHeadingComponent)`. Use these for secondary entry
+ * points like a kebab-menu "Rename" item, or to auto-open rename after
+ * creating a new entity.
+ *
  * The component owns no border, background, or card chrome — consumers who
  * want a bordered container should wrap it.
  *
@@ -5493,6 +5528,15 @@ class EditableHeadingComponent {
     get description() {
         return this._description;
     }
+    set disabled(v) {
+        this._disabled = v;
+        if (v && this.mode !== 'view')
+            this.cancel();
+        this.cdr.markForCheck();
+    }
+    get disabled() {
+        return this._disabled;
+    }
     constructor(cdr, host) {
         this.cdr = cdr;
         this.host = host;
@@ -5501,6 +5545,13 @@ class EditableHeadingComponent {
         this._description = '';
         this.titleMaxLength = 100;
         this.descriptionMaxLength = 300;
+        /**
+         * When true, the title and description are not clickable and cannot be
+         * edited. Any in-progress edit is dropped without emitting. Imperative
+         * `startEditing*` calls no-op. Useful for consumers that need to gate
+         * editing on a permission or a broader "actions disabled" state.
+         */
+        this._disabled = false;
         this.titleChange = new EventEmitter();
         this.descriptionChange = new EventEmitter();
         this.mode = 'view';
@@ -5510,15 +5561,38 @@ class EditableHeadingComponent {
     get isEditing() {
         return this.mode !== 'view';
     }
+    /**
+     * Enter title-edit mode programmatically. Same behavior as clicking the
+     * title — populates the edit buffer from the current value, focuses the
+     * input with the caret at the end, and hides the actions slot. No-op if
+     * already in an editing mode or when the component is disabled.
+     *
+     * Intended for consumers that offer a secondary entry point to renaming
+     * (e.g. a kebab menu item), or that want to auto-open rename after
+     * creating a new entity. Bind via `@ViewChild(EditableHeadingComponent)`.
+     */
     startEditingTitle() {
+        if (this.disabled || this.mode !== 'view')
+            return;
         this.draftTitle = this.title;
         this.mode = 'editingTitle';
+        // `markForCheck` so consumers can call this from outside Angular's zone
+        // (e.g. an async callback) without having to trigger CD themselves.
+        this.cdr.markForCheck();
         // Defer focus until Angular has rendered the input into the DOM.
         setTimeout(() => this.focusEnd(this.titleInputRef), 0);
     }
+    /**
+     * Enter description-edit mode programmatically. Same behavior as clicking
+     * the description (or the "+ Add description" button). No-op if already
+     * in an editing mode or when the component is disabled.
+     */
     startEditingDescription() {
+        if (this.disabled || this.mode !== 'view')
+            return;
         this.draftDescription = this.description;
         this.mode = 'editingDescription';
+        this.cdr.markForCheck();
         setTimeout(() => this.focusEnd(this.descriptionInputRef), 0);
     }
     commitTitle() {
@@ -5544,6 +5618,18 @@ class EditableHeadingComponent {
         this.mode = 'view';
         this.descriptionChange.emit(value);
     }
+    /**
+     * Abandon the current edit and return to view mode. No change is emitted.
+     * Wired to the Escape key on both edit inputs; also called internally
+     * when `disabled` flips to true mid-edit.
+     */
+    cancel() {
+        if (this.mode === 'view')
+            return;
+        this.draftTitle = this._title;
+        this.draftDescription = this._description;
+        this.mode = 'view';
+    }
     // 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
@@ -5561,23 +5647,24 @@ class EditableHeadingComponent {
             this.commitDescription();
         }
     }
-    // Focus with caret at end (rather than selecting all) so the user can
-    // continue typing where the previous value left off.
+    // Position caret at end (rather than selecting all) so the user can continue
+    // typing where the previous value left off. `riv-text-field` handles the
+    // focus itself via `[autoFocus]`; we just fix up the selection range on the
+    // descendant `<input>`.
     focusEnd(ref) {
-        const el = ref?.nativeElement;
-        if (!el)
+        const input = ref?.nativeElement.querySelector('input');
+        if (!input)
             return;
-        el.focus();
-        const len = el.value.length;
-        el.setSelectionRange(len, len);
+        const len = input.value.length;
+        input.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 });
+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", disabled: "disabled" }, 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, read: ElementRef }, { propertyName: "descriptionInputRef", first: true, predicate: ["descriptionInput"], descendants: true, read: ElementRef }], 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        [disabled]=\"disabled\"\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        [disabled]=\"disabled\"\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\" *ngIf=\"!disabled\">\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    <ng-container *ngSwitchCase=\"'editingTitle'\">\n      <riv-text-field\n        #titleInput\n        class=\"title-input\"\n        [value]=\"draftTitle\"\n        [maxLength]=\"titleMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftTitle = $event\"\n        (keydown.enter)=\"commitTitle()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\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      <riv-text-field\n        #descriptionInput\n        class=\"description-input\"\n        placeholder=\"Add a description\"\n        [value]=\"draftDescription\"\n        [maxLength]=\"descriptionMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftDescription = $event\"\n        (keydown.enter)=\"commitDescription()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\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:disabled,.description:disabled{cursor:default}.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{flex:1 1 auto;min-width:0}.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: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }, { 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"] }]
+            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        [disabled]=\"disabled\"\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        [disabled]=\"disabled\"\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\" *ngIf=\"!disabled\">\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    <ng-container *ngSwitchCase=\"'editingTitle'\">\n      <riv-text-field\n        #titleInput\n        class=\"title-input\"\n        [value]=\"draftTitle\"\n        [maxLength]=\"titleMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftTitle = $event\"\n        (keydown.enter)=\"commitTitle()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\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      <riv-text-field\n        #descriptionInput\n        class=\"description-input\"\n        placeholder=\"Add a description\"\n        [value]=\"draftDescription\"\n        [maxLength]=\"descriptionMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftDescription = $event\"\n        (keydown.enter)=\"commitDescription()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\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:disabled,.description:disabled{cursor:default}.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{flex:1 1 auto;min-width:0}.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: [{
@@ -5586,16 +5673,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], descriptionMaxLength: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], titleChange: [{
                 type: Output
             }], descriptionChange: [{
                 type: Output
             }], titleInputRef: [{
                 type: ViewChild,
-                args: ['titleInput']
+                args: ['titleInput', { read: ElementRef }]
             }], descriptionInputRef: [{
                 type: ViewChild,
-                args: ['descriptionInput']
+                args: ['descriptionInput', { read: ElementRef }]
             }], isEditing: [{
                 type: HostBinding,
                 args: ['class.editing']