@rivet-health/design-system 40.19.7 → 40.20.0

package/esm2020/lib/navigation/views/view-menu/view-menu.component.mjs

@@ -13,7 +13,7 @@ export class ViewMenuComponent {
     }
 }
 ViewMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n  <riv-menu\n    #menu\n    [preferredPosition]=\"'bottom-right'\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"triggerTemplate\">\n      <ng-template #trigger>\n        <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEnabled',\n          id: view.id,\n          enabled: !view.enabled,\n          source: 'menu'\n        })\n      \"\n      [disabled]=\"view.system || view.temporary\"\n      [attr.aria-disabled]=\"view.system || view.temporary ? 'true' : null\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: false, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Edit view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: true, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Rename view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Duplicate view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setDeletingView',\n          context: { id: view.id, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Copy link to view\n    </button>\n  </riv-menu>\n\n  <ng-container *ngIf=\"manager?.state | async; let state\">\n    <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n      <riv-edit-view\n        *ngIf=\"\n          editingViewContext.id === view.id &&\n          editingViewContext.menuContext === menuContext\n        \"\n        [view]=\"view\"\n        [userSource]=\"state.userSource\"\n        [userSelectMode]=\"state.userSelectMode\"\n        [onAddUser]=\"state.onAddUser\"\n        [newTooltip]=\"state.newTooltip\"\n        [autoSelectName]=\"editingViewContext.autoRename\"\n        [anchor]=\"el.nativeElement\"\n        (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n        (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setEditingView', context: null })\n        \"\n      ></riv-edit-view>\n    </ng-container>\n\n    <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n      <riv-dialog\n        *ngIf=\"\n          deletingViewContext.id === view.id &&\n          deletingViewContext.menuContext === menuContext\n        \"\n        [title]=\"'Delete view'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setDeletingView', context: null })\n        \"\n      >\n        <div class=\"delete-dialog\">\n          <div class=\"delete-title\">\n            Are you sure you want to delete the following view?\n          </div>\n          <p>{{ view.title }}</p>\n        </div>\n        <footer class=\"delete-footer\">\n          <button\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'danger'\"\n            (click)=\"\n              manager?.actions?.next({\n                type: 'deleteView',\n                view\n              })\n            \"\n          >\n            Delete view\n          </button>\n        </footer>\n      </riv-dialog>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth", "customBody", "customFooter"], outputs: ["close"] }, { kind: "component", type: i4.EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: i5.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n  <riv-menu\n    #menu\n    [preferredPosition]=\"'bottom-right'\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"triggerTemplate\">\n      <ng-template #trigger>\n        <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEnabled',\n          id: view.id,\n          enabled: !view.enabled,\n          source: 'menu'\n        })\n      \"\n      [disabled]=\"view.system || view.temporary\"\n      [attr.aria-disabled]=\"view.system || view.temporary ? 'true' : null\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: false, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Edit view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: true, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Rename view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Duplicate view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setDeletingView',\n          context: { id: view.id, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Copy link to view\n    </button>\n  </riv-menu>\n\n  <ng-container *ngIf=\"manager?.state | async; let state\">\n    <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n      <riv-edit-view\n        *ngIf=\"\n          editingViewContext.id === view.id &&\n          editingViewContext.menuContext === menuContext\n        \"\n        [view]=\"view\"\n        [userSource]=\"state.userSource\"\n        [userSelectMode]=\"state.userSelectMode\"\n        [onAddUser]=\"state.onAddUser\"\n        [newTooltip]=\"state.newTooltip\"\n        [autoSelectName]=\"editingViewContext.autoRename\"\n        [anchor]=\"el.nativeElement\"\n        (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n        (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setEditingView', context: null })\n        \"\n      ></riv-edit-view>\n    </ng-container>\n\n    <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n      <riv-dialog\n        *ngIf=\"\n          deletingViewContext.id === view.id &&\n          deletingViewContext.menuContext === menuContext\n        \"\n        [title]=\"'Delete view'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setDeletingView', context: null })\n        \"\n      >\n        <div class=\"delete-dialog\">\n          <div class=\"delete-title\">\n            Are you sure you want to delete the following view?\n          </div>\n          <p>{{ view.title }}</p>\n        </div>\n        <footer class=\"delete-footer\">\n          <button\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'danger'\"\n            (click)=\"\n              manager?.actions?.next({\n                type: 'deleteView',\n                view\n              })\n            \"\n          >\n            Delete view\n          </button>\n        </footer>\n      </riv-dialog>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth", "customBody", "customFooter"], outputs: ["close"] }, { kind: "component", type: i4.EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: i5.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-view-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"view\">\n  <riv-menu\n    #menu\n    [preferredPosition]=\"'bottom-right'\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"triggerTemplate\">\n      <ng-template #trigger>\n        <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEnabled',\n          id: view.id,\n          enabled: !view.enabled,\n          source: 'menu'\n        })\n      \"\n      [disabled]=\"view.system || view.temporary\"\n      [attr.aria-disabled]=\"view.system || view.temporary ? 'true' : null\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: false, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Edit view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: true, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Rename view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Duplicate view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setDeletingView',\n          context: { id: view.id, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Copy link to view\n    </button>\n  </riv-menu>\n\n  <ng-container *ngIf=\"manager?.state | async; let state\">\n    <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n      <riv-edit-view\n        *ngIf=\"\n          editingViewContext.id === view.id &&\n          editingViewContext.menuContext === menuContext\n        \"\n        [view]=\"view\"\n        [userSource]=\"state.userSource\"\n        [userSelectMode]=\"state.userSelectMode\"\n        [onAddUser]=\"state.onAddUser\"\n        [newTooltip]=\"state.newTooltip\"\n        [autoSelectName]=\"editingViewContext.autoRename\"\n        [anchor]=\"el.nativeElement\"\n        (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n        (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setEditingView', context: null })\n        \"\n      ></riv-edit-view>\n    </ng-container>\n\n    <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n      <riv-dialog\n        *ngIf=\"\n          deletingViewContext.id === view.id &&\n          deletingViewContext.menuContext === menuContext\n        \"\n        [title]=\"'Delete view'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setDeletingView', context: null })\n        \"\n      >\n        <div class=\"delete-dialog\">\n          <div class=\"delete-title\">\n            Are you sure you want to delete the following view?\n          </div>\n          <p>{{ view.title }}</p>\n        </div>\n        <footer class=\"delete-footer\">\n          <button\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'danger'\"\n            (click)=\"\n              manager?.actions?.next({\n                type: 'deleteView',\n                view\n              })\n            \"\n          >\n            Delete view\n          </button>\n        </footer>\n      </riv-dialog>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"] }]

package/esm2020/lib/overlay/callout/menu/menu.component.mjs

@@ -9,6 +9,7 @@ export class MenuComponent {
     constructor() {
         this.open = new BehaviorSubject(false);
         this.preferredPosition = 'bottom-left';
+        this.disabled = false;
     }
     getTrigger() {
         return (this.customTriggerButton?.nativeElement ??
@@ -16,12 +17,14 @@ export class MenuComponent {
     }
 }
 MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MenuComponent, selector: "riv-menu", inputs: { preferredPosition: "preferredPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button #customTriggerButton class=\"custom-trigger\" (click)=\"open.next(true)\">\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #standardTrigger>\n  <button\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    (click)=\"open.next(true)\"\n  ></button>\n</ng-template>\n\n<ng-container *ngIf=\"open | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"getTrigger()\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [theme]=\"'light'\"\n    (close)=\"open.next(false)\"\n  >\n    <div class=\"options\">\n      <ng-content></ng-content>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.custom-trigger{width:100%;max-width:100%;height:100%;max-height:100%;display:inline-flex}.options{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 58)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i4.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MenuComponent, selector: "riv-menu", inputs: { preferredPosition: "preferredPosition", disabled: "disabled" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    class=\"custom-trigger\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    (click)=\"open.next(true)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #standardTrigger>\n  <button\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    [disabled]=\"disabled\"\n    (click)=\"open.next(true)\"\n  ></button>\n</ng-template>\n\n<ng-container *ngIf=\"open | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"getTrigger()\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [theme]=\"'light'\"\n    (close)=\"open.next(false)\"\n  >\n    <div class=\"options\">\n      <ng-content></ng-content>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.custom-trigger{width:100%;max-width:100%;height:100%;max-height:100%;display:inline-flex}.options{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 58)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i4.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button #customTriggerButton class=\"custom-trigger\" (click)=\"open.next(true)\">\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #standardTrigger>\n  <button\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    (click)=\"open.next(true)\"\n  ></button>\n</ng-template>\n\n<ng-container *ngIf=\"open | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"getTrigger()\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [theme]=\"'light'\"\n    (close)=\"open.next(false)\"\n  >\n    <div class=\"options\">\n      <ng-content></ng-content>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.custom-trigger{width:100%;max-width:100%;height:100%;max-height:100%;display:inline-flex}.options{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 58)}\n"] }]
+            args: [{ selector: 'riv-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    class=\"custom-trigger\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    (click)=\"open.next(true)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #standardTrigger>\n  <button\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    [disabled]=\"disabled\"\n    (click)=\"open.next(true)\"\n  ></button>\n</ng-template>\n\n<ng-container *ngIf=\"open | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"getTrigger()\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [theme]=\"'light'\"\n    (close)=\"open.next(false)\"\n  >\n    <div class=\"options\">\n      <ng-content></ng-content>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.custom-trigger{width:100%;max-width:100%;height:100%;max-height:100%;display:inline-flex}.options{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 58)}\n"] }]
         }], propDecorators: { preferredPosition: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], triggerTemplate: [{
                 type: ContentChild,
                 args: ['trigger']
@@ -32,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: ViewChild,
                 args: ['standardTriggerButton', { read: ElementRef }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9vdmVybGF5L2NhbGxvdXQvbWVudS9tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL292ZXJsYXkvY2FsbG91dC9tZW51L21lbnUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFVBQVUsRUFDVixLQUFLLEVBRUwsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7OztBQVN2QyxNQUFNLE9BQU8sYUFBYTtJQU4xQjtRQU9rQixTQUFJLEdBQUcsSUFBSSxlQUFlLENBQVUsS0FBSyxDQUFDLENBQUM7UUFHM0Qsc0JBQWlCLEdBQXNDLGFBQWEsQ0FBQztLQWlCdEU7SUFOQyxVQUFVO1FBQ1IsT0FBTyxDQUNMLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxhQUFhO1lBQ3ZDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxhQUFhLENBQzFDLENBQUM7SUFDSixDQUFDOzsyR0FwQlUsYUFBYTsrRkFBYixhQUFhLG1UQVNrQixVQUFVLHlIQUdSLFVBQVUsNkJDOUJ4RCx3M0JBaUNBOzRGRGZhLGFBQWE7a0JBTnpCLFNBQVM7K0JBQ0UsVUFBVSxtQkFHSCx1QkFBdUIsQ0FBQyxNQUFNOzhCQU0vQyxpQkFBaUI7c0JBRGhCLEtBQUs7Z0JBSU4sZUFBZTtzQkFEZCxZQUFZO3VCQUFDLFNBQVM7Z0JBSXZCLG1CQUFtQjtzQkFEbEIsU0FBUzt1QkFBQyxxQkFBcUIsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7Z0JBSXRELHFCQUFxQjtzQkFEcEIsU0FBUzt1QkFBQyx1QkFBdUIsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGQsXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQ2FsbG91dENvbXBvbmVudCB9IGZyb20gJy4uL2NhbGxvdXQuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LW1lbnUnLFxuICB0ZW1wbGF0ZVVybDogJy4vbWVudS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21lbnUuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWVudUNvbXBvbmVudCB7XG4gIHB1YmxpYyByZWFkb25seSBvcGVuID0gbmV3IEJlaGF2aW9yU3ViamVjdDxib29sZWFuPihmYWxzZSk7XG5cbiAgQElucHV0KClcbiAgcHJlZmVycmVkUG9zaXRpb246IENhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbiA9ICdib3R0b20tbGVmdCc7XG5cbiAgQENvbnRlbnRDaGlsZCgndHJpZ2dlcicpXG4gIHRyaWdnZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHsgb3BlbjogYm9vbGVhbiB9PjtcblxuICBAVmlld0NoaWxkKCdjdXN0b21UcmlnZ2VyQnV0dG9uJywgeyByZWFkOiBFbGVtZW50UmVmIH0pXG4gIGN1c3RvbVRyaWdnZXJCdXR0b24/OiBFbGVtZW50UmVmO1xuXG4gIEBWaWV3Q2hpbGQoJ3N0YW5kYXJkVHJpZ2dlckJ1dHRvbicsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxuICBzdGFuZGFyZFRyaWdnZXJCdXR0b24/OiBFbGVtZW50UmVmO1xuXG4gIGdldFRyaWdnZXIoKTogRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiAoXG4gICAgICB0aGlzLmN1c3RvbVRyaWdnZXJCdXR0b24/Lm5hdGl2ZUVsZW1lbnQgPz9cbiAgICAgIHRoaXMuc3RhbmRhcmRUcmlnZ2VyQnV0dG9uPy5uYXRpdmVFbGVtZW50XG4gICAgKTtcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cInRyaWdnZXJUZW1wbGF0ZTsgZWxzZSBzdGFuZGFyZFRyaWdnZXJcIj5cbiAgPGJ1dHRvbiAjY3VzdG9tVHJpZ2dlckJ1dHRvbiBjbGFzcz1cImN1c3RvbS10cmlnZ2VyXCIgKGNsaWNrKT1cIm9wZW4ubmV4dCh0cnVlKVwiPlxuICAgIDxuZy1jb250YWluZXJcbiAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwidHJpZ2dlclRlbXBsYXRlOyBjb250ZXh0OiB7IG9wZW46IG9wZW4gfCBhc3luYyB9XCJcbiAgICA+PC9uZy1jb250YWluZXI+XG4gIDwvYnV0dG9uPlxuPC9uZy1jb250YWluZXI+XG5cbjxuZy10ZW1wbGF0ZSAjc3RhbmRhcmRUcmlnZ2VyPlxuICA8YnV0dG9uXG4gICAgI3N0YW5kYXJkVHJpZ2dlckJ1dHRvblxuICAgIHJpdkJ1dHRvblxuICAgIFt2YXJpYW50XT1cIidnaG9zdCdcIlxuICAgIFtzaXplXT1cIid4c21hbGwnXCJcbiAgICBbaWNvbl09XCInTW9yZVZlcnRpY2FsJ1wiXG4gICAgKGNsaWNrKT1cIm9wZW4ubmV4dCh0cnVlKVwiXG4gID48L2J1dHRvbj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJvcGVuIHwgYXN5bmNcIj5cbiAgPHJpdi1jYWxsb3V0XG4gICAgKnJpdi1vdmVybGF5XG4gICAgW2FuY2hvcl09XCJnZXRUcmlnZ2VyKClcIlxuICAgIFtzaG93Q2FyZXRdPVwiZmFsc2VcIlxuICAgIFtwcmVmZXJyZWRQb3NpdGlvbl09XCJwcmVmZXJyZWRQb3NpdGlvblwiXG4gICAgW3RoZW1lXT1cIidsaWdodCdcIlxuICAgIChjbG9zZSk9XCJvcGVuLm5leHQoZmFsc2UpXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJvcHRpb25zXCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvcml2LWNhbGxvdXQ+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9vdmVybGF5L2NhbGxvdXQvbWVudS9tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL292ZXJsYXkvY2FsbG91dC9tZW51L21lbnUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFVBQVUsRUFDVixLQUFLLEVBRUwsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7OztBQVN2QyxNQUFNLE9BQU8sYUFBYTtJQU4xQjtRQU9rQixTQUFJLEdBQUcsSUFBSSxlQUFlLENBQVUsS0FBSyxDQUFDLENBQUM7UUFHM0Qsc0JBQWlCLEdBQXNDLGFBQWEsQ0FBQztRQUdyRSxhQUFRLEdBQUcsS0FBSyxDQUFDO0tBaUJsQjtJQU5DLFVBQVU7UUFDUixPQUFPLENBQ0wsSUFBSSxDQUFDLG1CQUFtQixFQUFFLGFBQWE7WUFDdkMsSUFBSSxDQUFDLHFCQUFxQixFQUFFLGFBQWEsQ0FDMUMsQ0FBQztJQUNKLENBQUM7OzJHQXZCVSxhQUFhOytGQUFiLGFBQWEseVVBWWtCLFVBQVUseUhBR1IsVUFBVSw2QkNqQ3hELDQvQkF3Q0E7NEZEdEJhLGFBQWE7a0JBTnpCLFNBQVM7K0JBQ0UsVUFBVSxtQkFHSCx1QkFBdUIsQ0FBQyxNQUFNOzhCQU0vQyxpQkFBaUI7c0JBRGhCLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxTQUFTO2dCQUl2QixtQkFBbUI7c0JBRGxCLFNBQVM7dUJBQUMscUJBQXFCLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFO2dCQUl0RCxxQkFBcUI7c0JBRHBCLFNBQVM7dUJBQUMsdUJBQXVCLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IENhbGxvdXRDb21wb25lbnQgfSBmcm9tICcuLi9jYWxsb3V0LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1tZW51JyxcbiAgdGVtcGxhdGVVcmw6ICcuL21lbnUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tZW51LmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1lbnVDb21wb25lbnQge1xuICBwdWJsaWMgcmVhZG9ubHkgb3BlbiA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4oZmFsc2UpO1xuXG4gIEBJbnB1dCgpXG4gIHByZWZlcnJlZFBvc2l0aW9uOiBDYWxsb3V0Q29tcG9uZW50LkFuY2hvcmVkUG9zaXRpb24gPSAnYm90dG9tLWxlZnQnO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgQENvbnRlbnRDaGlsZCgndHJpZ2dlcicpXG4gIHRyaWdnZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHsgb3BlbjogYm9vbGVhbiB9PjtcblxuICBAVmlld0NoaWxkKCdjdXN0b21UcmlnZ2VyQnV0dG9uJywgeyByZWFkOiBFbGVtZW50UmVmIH0pXG4gIGN1c3RvbVRyaWdnZXJCdXR0b24/OiBFbGVtZW50UmVmO1xuXG4gIEBWaWV3Q2hpbGQoJ3N0YW5kYXJkVHJpZ2dlckJ1dHRvbicsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxuICBzdGFuZGFyZFRyaWdnZXJCdXR0b24/OiBFbGVtZW50UmVmO1xuXG4gIGdldFRyaWdnZXIoKTogRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiAoXG4gICAgICB0aGlzLmN1c3RvbVRyaWdnZXJCdXR0b24/Lm5hdGl2ZUVsZW1lbnQgPz9cbiAgICAgIHRoaXMuc3RhbmRhcmRUcmlnZ2VyQnV0dG9uPy5uYXRpdmVFbGVtZW50XG4gICAgKTtcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cInRyaWdnZXJUZW1wbGF0ZTsgZWxzZSBzdGFuZGFyZFRyaWdnZXJcIj5cbiAgPGJ1dHRvblxuICAgICNjdXN0b21UcmlnZ2VyQnV0dG9uXG4gICAgY2xhc3M9XCJjdXN0b20tdHJpZ2dlclwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbYXR0ci5hcmlhLWRpc2FibGVkXT1cImRpc2FibGVkID8gJ3RydWUnIDogbnVsbFwiXG4gICAgKGNsaWNrKT1cIm9wZW4ubmV4dCh0cnVlKVwiXG4gID5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICAqbmdUZW1wbGF0ZU91dGxldD1cInRyaWdnZXJUZW1wbGF0ZTsgY29udGV4dDogeyBvcGVuOiBvcGVuIHwgYXN5bmMgfVwiXG4gICAgPjwvbmctY29udGFpbmVyPlxuICA8L2J1dHRvbj5cbjwvbmctY29udGFpbmVyPlxuXG48bmctdGVtcGxhdGUgI3N0YW5kYXJkVHJpZ2dlcj5cbiAgPGJ1dHRvblxuICAgICNzdGFuZGFyZFRyaWdnZXJCdXR0b25cbiAgICByaXZCdXR0b25cbiAgICBbdmFyaWFudF09XCInZ2hvc3QnXCJcbiAgICBbc2l6ZV09XCIneHNtYWxsJ1wiXG4gICAgW2ljb25dPVwiJ01vcmVWZXJ0aWNhbCdcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgKGNsaWNrKT1cIm9wZW4ubmV4dCh0cnVlKVwiXG4gID48L2J1dHRvbj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJvcGVuIHwgYXN5bmNcIj5cbiAgPHJpdi1jYWxsb3V0XG4gICAgKnJpdi1vdmVybGF5XG4gICAgW2FuY2hvcl09XCJnZXRUcmlnZ2VyKClcIlxuICAgIFtzaG93Q2FyZXRdPVwiZmFsc2VcIlxuICAgIFtwcmVmZXJyZWRQb3NpdGlvbl09XCJwcmVmZXJyZWRQb3NpdGlvblwiXG4gICAgW3RoZW1lXT1cIidsaWdodCdcIlxuICAgIChjbG9zZSk9XCJvcGVuLm5leHQoZmFsc2UpXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJvcHRpb25zXCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvcml2LWNhbGxvdXQ+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==

package/esm2020/lib/table/table/table/table.component.mjs

@@ -273,7 +273,7 @@ export class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:copy": "onCopy($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <div *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !s.result.isGrouped,\n          'has-header': !s.result.isGrouped && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n        <ng-container\n          *ngFor=\"\n            let group of s.result.isGrouped\n              ? s.result.rowGroups\n              : [s.result.rowsAsGroup];\n            trackBy: trackByGroup;\n            let last = last\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              subheaderTemplate || null;\n              context: { state: s, group }\n            \"\n          ></ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!s.result.isGrouped\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"s.result.isGrouped\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\n                      <ng-template #trigger>\n                        <span\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </span>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n                        <button\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        *ngIf=\"s.display.columnsAreHideable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <ng-container\n                    *ngFor=\"\n                      let row of group.rows;\n                      let rowIndex = index;\n                      trackBy: trackByRow\n                    \"\n                  >\n                    <ng-template #rowBody>\n                      <td\n                        *ngIf=\"\n                          s.selection.allowSelection === true ||\n                          s.selection.allowSelection === 'individual'\n                        \"\n                        class=\"selection-body\"\n                        (click)=\"$event.preventDefault()\"\n                      >\n                        <label\n                          class=\"checkbox-wrapper\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <riv-checkbox\n                            [identifier]=\"'riv-table-selection-' + row.id\"\n                            [value]=\"row.selected\"\n                            (valueChange)=\"selectionChange(row.id, $event)\"\n                            ariaLabel=\"Select row\"\n                          ></riv-checkbox>\n                        </label>\n                      </td>\n                      <ng-container\n                        *ngFor=\"\n                          let column of s.display.columns;\n                          trackBy: trackByColumn\n                        \"\n                      >\n                        <ng-container\n                          *ngIf=\"\n                            s.display.cellRowSpan(rowIndex, column.key) as span\n                          \"\n                        >\n                          <td\n                            *ngIf=\"span > 0\"\n                            [attr.rowspan]=\"span\"\n                            [class.rs-right-border]=\"\n                              s.display.needsRightBorder(rowIndex, column.key)\n                            \"\n                            [class.pinned]=\"column.pinned\"\n                            [class.advanced]=\"column.dataType === 'advanced'\"\n                            [style.left.px]=\"column.left\"\n                            [style.text-align]=\"column.alignment\"\n                            (click)=\"handleClick($event, column)\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"\n                                cellTemplate || null;\n                                context: { row: row, column: column }\n                              \"\n                            ></ng-container>\n                          </td>\n                        </ng-container>\n                      </ng-container>\n                      <td\n                        *ngIf=\"menuTemplate\"\n                        class=\"menu-body\"\n                        (click)=\"\n                          $event.stopPropagation(); $event.preventDefault()\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            menuTemplate || null;\n                            context: { row: row }\n                          \"\n                        ></ng-container>\n                      </td>\n                    </ng-template>\n                    <ng-container *ngIf=\"row.rowLink; let rl\">\n                      <a\n                        *ngIf=\"isExternalRowLink(rl)\"\n                        [href]=\"rl.href\"\n                        draggable=\"false\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                      <a\n                        *ngIf=\"isInternalRowLink(rl)\"\n                        draggable=\"false\"\n                        [routerLink]=\"rl.routerLink\"\n                        [queryParams]=\"rl.queryParams\"\n                        [queryParamsHandling]=\"rl.queryParamsHandling\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                        [class.active]=\"rl.active\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                    </ng-container>\n                    <tr\n                      *ngIf=\"!row.rowLink\"\n                      [class.grayed]=\"s.display.rowsAreGrayed\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n                    </tr>\n                  </ng-container>\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              s.result.isGrouped &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-container>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!s.result.isGrouped && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: i8.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: i9.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i10.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: i11.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i12.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i13.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i14.SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: i15.TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: i16.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:copy": "onCopy($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <div *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !s.result.isGrouped,\n          'has-header': !s.result.isGrouped && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n        <ng-container\n          *ngFor=\"\n            let group of s.result.isGrouped\n              ? s.result.rowGroups\n              : [s.result.rowsAsGroup];\n            trackBy: trackByGroup;\n            let last = last\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              subheaderTemplate || null;\n              context: { state: s, group }\n            \"\n          ></ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!s.result.isGrouped\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"s.result.isGrouped\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\n                      <ng-template #trigger>\n                        <span\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </span>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n                        <button\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        *ngIf=\"s.display.columnsAreHideable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <ng-container\n                    *ngFor=\"\n                      let row of group.rows;\n                      let rowIndex = index;\n                      trackBy: trackByRow\n                    \"\n                  >\n                    <ng-template #rowBody>\n                      <td\n                        *ngIf=\"\n                          s.selection.allowSelection === true ||\n                          s.selection.allowSelection === 'individual'\n                        \"\n                        class=\"selection-body\"\n                        (click)=\"$event.preventDefault()\"\n                      >\n                        <label\n                          class=\"checkbox-wrapper\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <riv-checkbox\n                            [identifier]=\"'riv-table-selection-' + row.id\"\n                            [value]=\"row.selected\"\n                            (valueChange)=\"selectionChange(row.id, $event)\"\n                            ariaLabel=\"Select row\"\n                          ></riv-checkbox>\n                        </label>\n                      </td>\n                      <ng-container\n                        *ngFor=\"\n                          let column of s.display.columns;\n                          trackBy: trackByColumn\n                        \"\n                      >\n                        <ng-container\n                          *ngIf=\"\n                            s.display.cellRowSpan(rowIndex, column.key) as span\n                          \"\n                        >\n                          <td\n                            *ngIf=\"span > 0\"\n                            [attr.rowspan]=\"span\"\n                            [class.rs-right-border]=\"\n                              s.display.needsRightBorder(rowIndex, column.key)\n                            \"\n                            [class.pinned]=\"column.pinned\"\n                            [class.advanced]=\"column.dataType === 'advanced'\"\n                            [style.left.px]=\"column.left\"\n                            [style.text-align]=\"column.alignment\"\n                            (click)=\"handleClick($event, column)\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"\n                                cellTemplate || null;\n                                context: { row: row, column: column }\n                              \"\n                            ></ng-container>\n                          </td>\n                        </ng-container>\n                      </ng-container>\n                      <td\n                        *ngIf=\"menuTemplate\"\n                        class=\"menu-body\"\n                        (click)=\"\n                          $event.stopPropagation(); $event.preventDefault()\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            menuTemplate || null;\n                            context: { row: row }\n                          \"\n                        ></ng-container>\n                      </td>\n                    </ng-template>\n                    <ng-container *ngIf=\"row.rowLink; let rl\">\n                      <a\n                        *ngIf=\"isExternalRowLink(rl)\"\n                        [href]=\"rl.href\"\n                        draggable=\"false\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                      <a\n                        *ngIf=\"isInternalRowLink(rl)\"\n                        draggable=\"false\"\n                        [routerLink]=\"rl.routerLink\"\n                        [queryParams]=\"rl.queryParams\"\n                        [queryParamsHandling]=\"rl.queryParamsHandling\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                        [class.active]=\"rl.active\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                    </ng-container>\n                    <tr\n                      *ngIf=\"!row.rowLink\"\n                      [class.grayed]=\"s.display.rowsAreGrayed\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n                    </tr>\n                  </ng-container>\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              s.result.isGrouped &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-container>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!s.result.isGrouped && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: i8.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: i9.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: i10.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: i11.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i12.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i13.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i14.SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: i15.TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: i16.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <div *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !s.result.isGrouped,\n          'has-header': !s.result.isGrouped && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n        <ng-container\n          *ngFor=\"\n            let group of s.result.isGrouped\n              ? s.result.rowGroups\n              : [s.result.rowsAsGroup];\n            trackBy: trackByGroup;\n            let last = last\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              subheaderTemplate || null;\n              context: { state: s, group }\n            \"\n          ></ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!s.result.isGrouped\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"s.result.isGrouped\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\n                      <ng-template #trigger>\n                        <span\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </span>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n                        <button\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        *ngIf=\"s.display.columnsAreHideable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <ng-container\n                    *ngFor=\"\n                      let row of group.rows;\n                      let rowIndex = index;\n                      trackBy: trackByRow\n                    \"\n                  >\n                    <ng-template #rowBody>\n                      <td\n                        *ngIf=\"\n                          s.selection.allowSelection === true ||\n                          s.selection.allowSelection === 'individual'\n                        \"\n                        class=\"selection-body\"\n                        (click)=\"$event.preventDefault()\"\n                      >\n                        <label\n                          class=\"checkbox-wrapper\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <riv-checkbox\n                            [identifier]=\"'riv-table-selection-' + row.id\"\n                            [value]=\"row.selected\"\n                            (valueChange)=\"selectionChange(row.id, $event)\"\n                            ariaLabel=\"Select row\"\n                          ></riv-checkbox>\n                        </label>\n                      </td>\n                      <ng-container\n                        *ngFor=\"\n                          let column of s.display.columns;\n                          trackBy: trackByColumn\n                        \"\n                      >\n                        <ng-container\n                          *ngIf=\"\n                            s.display.cellRowSpan(rowIndex, column.key) as span\n                          \"\n                        >\n                          <td\n                            *ngIf=\"span > 0\"\n                            [attr.rowspan]=\"span\"\n                            [class.rs-right-border]=\"\n                              s.display.needsRightBorder(rowIndex, column.key)\n                            \"\n                            [class.pinned]=\"column.pinned\"\n                            [class.advanced]=\"column.dataType === 'advanced'\"\n                            [style.left.px]=\"column.left\"\n                            [style.text-align]=\"column.alignment\"\n                            (click)=\"handleClick($event, column)\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"\n                                cellTemplate || null;\n                                context: { row: row, column: column }\n                              \"\n                            ></ng-container>\n                          </td>\n                        </ng-container>\n                      </ng-container>\n                      <td\n                        *ngIf=\"menuTemplate\"\n                        class=\"menu-body\"\n                        (click)=\"\n                          $event.stopPropagation(); $event.preventDefault()\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            menuTemplate || null;\n                            context: { row: row }\n                          \"\n                        ></ng-container>\n                      </td>\n                    </ng-template>\n                    <ng-container *ngIf=\"row.rowLink; let rl\">\n                      <a\n                        *ngIf=\"isExternalRowLink(rl)\"\n                        [href]=\"rl.href\"\n                        draggable=\"false\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                      <a\n                        *ngIf=\"isInternalRowLink(rl)\"\n                        draggable=\"false\"\n                        [routerLink]=\"rl.routerLink\"\n                        [queryParams]=\"rl.queryParams\"\n                        [queryParamsHandling]=\"rl.queryParamsHandling\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                        [class.active]=\"rl.active\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                    </ng-container>\n                    <tr\n                      *ngIf=\"!row.rowLink\"\n                      [class.grayed]=\"s.display.rowsAreGrayed\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n                    </tr>\n                  </ng-container>\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              s.result.isGrouped &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-container>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!s.result.isGrouped && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}\n"] }]

package/esm2020/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs

@@ -200,7 +200,7 @@ export class TableColumnSettingsSideSheetComponent {
     }
 }
 TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n          Move to start\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n          Move to end\n        </button>\n        <button\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i7.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i9.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n          Move to start\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n          Move to end\n        </button>\n        <button\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition", "disabled"] }, { kind: "component", type: i7.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i9.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n          Move to start\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n          Move to end\n        </button>\n        <button\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"] }]