@rivet-health/design-system 30.10.1 → 31.0.0

package/esm2020/lib/input/button/button.component.mjs

@@ -12,7 +12,6 @@ export class ButtonComponent {
         this.size = 'medium';
         this.variant = 'basic';
         this.iconPosition = 'first';
-        this.active = false;
         this.disableNativeElement = false;
         this.lockNativeElement = false;
     }
@@ -25,7 +24,9 @@ export class ButtonComponent {
             [this.size]: true,
             stacked: this.iconPosition === 'stacked',
             grouped: !!this.group,
-            active: this.active,
+            first: !!this.group?.isFirst(this.el),
+            last: !!this.group?.isLast(this.el),
+            current: !!this.current,
         })
             .filter(([_, v]) => v)
             .map(([k]) => k)
@@ -36,6 +37,7 @@ export class ButtonComponent {
             case 'basic':
             case 'caution':
             case 'ghost':
+            case 'stateful':
                 return 'dark';
             case 'danger':
             case 'primary':
@@ -72,13 +74,19 @@ export class ButtonComponent {
                 }
             }
         }
+        const currentOrVariantChange = !!changes['current'] || !!changes['variant'];
+        if (currentOrVariantChange) {
+            if (this.current !== undefined && this.variant !== 'stateful') {
+                console.warn(`ButtonComponent: The 'current' input is only valid when variant is 'stateful'. Variant: '${this.variant}'`);
+            }
+        }
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonComponent, selector: "[rivButton]", inputs: { locked: "locked", disabled: "disabled", loading: "loading", full: "full", size: "size", variant: "variant", icon: "icon", iconPosition: "iconPosition", active: "active" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<riv-icon\n  *ngIf=\"icon && (iconPosition === 'first' || iconPosition === 'stacked')\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<span><ng-content></ng-content></span>\n<riv-icon\n  *ngIf=\"locked && !icon\"\n  [name]=\"'Lock'\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-icon\n  *ngIf=\"icon && iconPosition === 'last'\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-loading\n  *ngIf=\"loading\"\n  [size]=\"16\"\n  [variant]=\"getLoadingVariant()\"\n></riv-loading>\n", styles: [":host{border-radius:var(--border-radius-small);transition:background-color var(--short-transition);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}:host:disabled,:host.disabled{cursor:default}:host.grouped:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:calc(var(--border-width) / 2)}:host.grouped:last-child{border-bottom-left-radius:0;border-top-left-radius:0;border-left-width:calc(var(--border-width) / 2)}:host.grouped:not(:first-child):not(:last-child){border-radius:0;border-right-width:calc(var(--border-width) / 2);border-left-width:calc(var(--border-width) / 2)}:host.basic{color:var(--purp-80);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.basic:hover{background-color:var(--black-20)}:host.basic:active,:host.basic.active{background-color:var(--black-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.primary{color:var(--white-90);background-color:var(--purp-60);border:var(--border-width) solid var(--border-dark-blend)}:host.primary:hover{background-color:var(--purp-70)}:host.primary:active,:host.primary.active{background-color:var(--purp-80)}:host.primary:disabled,:host.primary.disabled{border-color:transparent;background-color:var(--purp-10);color:var(--type-light-disabled)}:host.ghost{color:var(--purp-80);background-color:transparent;border:var(--border-width) solid transparent}:host.ghost:hover{background-color:var(--black-20)}:host.ghost:active,:host.ghost.active{background-color:var(--black-40)}:host.ghost:disabled,:host.ghost.disabled{color:var(--type-light-disabled);background-color:transparent}:host.caution{color:var(--type-light-caution);background-color:var(--surface-light-caution);border:var(--border-width) solid transparent}:host.caution:hover{background-color:var(--black-20)}:host.caution:active,:host.caution.active{background-color:var(--black-40)}:host.caution:disabled,:host.caution.disabled{border-color:transparent;background-color:var(--arnge-10);color:var(--type-light-disabled)}:host.danger{color:var(--white-90);background-color:var(--fyre-50);border:var(--border-width) solid var(--border-dark-blend)}:host.danger:hover{background-color:var(--fyre-70)}:host.danger:active,:host.danger.active{background-color:var(--fyre-90)}:host.danger:disabled,:host.danger.disabled{border-color:transparent;background-color:var(--fyre-10);color:var(--type-light-disabled)}:host.xsmall{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 2)}:host.xsmall:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) / -2) calc(var(--base-grid-size) * -1)}:host.xsmall:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:var(--base-grid-size)}:host.xsmall:not(.stacked) span:not(:empty)+riv-icon{margin-left:var(--base-grid-size)}:host.small{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3)}:host.small:not(.stacked) riv-icon{margin:0 calc(var(--base-grid-size) * -1.5)}:host.small:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 1.5)}:host.small:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 1.5)}:host.medium{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) calc(var(--base-grid-size) * 3)}:host.medium:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -.5) calc(var(--base-grid-size) * -1.5)}:host.medium:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size))}:host.medium:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 2)}:host.large{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 3) calc(var(--base-grid-size) * 5)}:host.large:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.large:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.large:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.xlarge{font-size:var(--type-3-font-size);line-height:var(--type-3-line-height-0);padding:calc(var(--base-grid-size) * 4) calc(var(--base-grid-size) * 6)}:host.xlarge:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.xlarge:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.xlarge:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.full{width:100%;justify-content:center}:host.loading{position:relative}:host.loading span{opacity:0}:host.loading riv-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.stacked{display:flex;flex-direction:column}:host.stacked.xsmall riv-icon,:host.stacked.small riv-icon{margin-bottom:calc(var(--base-grid-size) * 1)}:host.stacked.medium riv-icon,:host.stacked.large riv-icon,:host.stacked.xlarge riv-icon{margin-bottom:calc(var(--base-grid-size) * 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i4.LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonComponent, selector: "[rivButton]", inputs: { locked: "locked", disabled: "disabled", loading: "loading", full: "full", size: "size", variant: "variant", icon: "icon", iconPosition: "iconPosition", current: "current" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<riv-icon\n  *ngIf=\"icon && (iconPosition === 'first' || iconPosition === 'stacked')\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<span><ng-content></ng-content></span>\n<riv-icon\n  *ngIf=\"locked && !icon\"\n  [name]=\"'Lock'\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-icon\n  *ngIf=\"icon && iconPosition === 'last'\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-loading\n  *ngIf=\"loading\"\n  [size]=\"16\"\n  [variant]=\"getLoadingVariant()\"\n></riv-loading>\n", styles: [":host{border-radius:var(--border-radius-small);transition:background-color var(--short-transition);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}:host:disabled,:host.disabled{cursor:default}:host.grouped.first{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:calc(var(--border-width) / 2)}:host.grouped.last{border-bottom-left-radius:0;border-top-left-radius:0;border-left-width:calc(var(--border-width) / 2)}:host.grouped:not(.first):not(.last){border-radius:0;border-right-width:calc(var(--border-width) / 2);border-left-width:calc(var(--border-width) / 2)}:host.basic{color:var(--purp-80);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.basic:hover{background-color:var(--black-20)}:host.basic:active{background-color:var(--black-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.primary{color:var(--white-90);background-color:var(--purp-60);border:var(--border-width) solid var(--border-dark-blend)}:host.primary:hover{background-color:var(--purp-70)}:host.primary:active{background-color:var(--purp-80)}:host.primary:disabled,:host.primary.disabled{border-color:transparent;background-color:var(--purp-10);color:var(--type-light-disabled)}:host.ghost{color:var(--purp-80);background-color:transparent;border:var(--border-width) solid transparent}:host.ghost:hover{background-color:var(--black-20)}:host.ghost:active{background-color:var(--black-40)}:host.ghost:disabled,:host.ghost.disabled{color:var(--type-light-disabled);background-color:transparent}:host.caution{color:var(--type-light-caution);background-color:var(--surface-light-caution);border:var(--border-width) solid transparent}:host.caution:hover{background-color:var(--black-20)}:host.caution:active{background-color:var(--black-40)}:host.caution:disabled,:host.caution.disabled{border-color:transparent;background-color:var(--arnge-10);color:var(--type-light-disabled)}:host.danger{color:var(--white-90);background-color:var(--fyre-50);border:var(--border-width) solid var(--border-dark-blend)}:host.danger:hover{background-color:var(--fyre-70)}:host.danger:active{background-color:var(--fyre-90)}:host.danger:disabled,:host.danger.disabled{border-color:transparent;background-color:var(--fyre-10);color:var(--type-light-disabled)}:host.stateful{color:var(--type-light-low-contrast);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--black-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--black-30)}:host.stateful.current:active{color:var(--type-light-link-active);background-color:var(--white-100)}:host.stateful:disabled,:host.stateful.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.stateful.current:disabled,:host.stateful.current.disabled{border-color:transparent;background-color:var(--white-90);color:var(--type-light-disabled)}:host.xsmall{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 2)}:host.xsmall:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) / -2) calc(var(--base-grid-size) * -1)}:host.xsmall:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:var(--base-grid-size)}:host.xsmall:not(.stacked) span:not(:empty)+riv-icon{margin-left:var(--base-grid-size)}:host.small{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3)}:host.small:not(.stacked) riv-icon{margin:0 calc(var(--base-grid-size) * -1.5)}:host.small:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 1.5)}:host.small:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 1.5)}:host.medium{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) calc(var(--base-grid-size) * 3)}:host.medium:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -.5) calc(var(--base-grid-size) * -1.5)}:host.medium:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size))}:host.medium:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 2)}:host.large{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 3) calc(var(--base-grid-size) * 5)}:host.large:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.large:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.large:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.xlarge{font-size:var(--type-3-font-size);line-height:var(--type-3-line-height-0);padding:calc(var(--base-grid-size) * 4) calc(var(--base-grid-size) * 6)}:host.xlarge:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.xlarge:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.xlarge:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.full{width:100%;justify-content:center}:host.loading{position:relative}:host.loading span{opacity:0}:host.loading riv-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.stacked{display:flex;flex-direction:column}:host.stacked.xsmall riv-icon,:host.stacked.small riv-icon{margin-bottom:calc(var(--base-grid-size) * 1)}:host.stacked.medium riv-icon,:host.stacked.large riv-icon,:host.stacked.xlarge riv-icon{margin-bottom:calc(var(--base-grid-size) * 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i4.LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[rivButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n  *ngIf=\"icon && (iconPosition === 'first' || iconPosition === 'stacked')\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<span><ng-content></ng-content></span>\n<riv-icon\n  *ngIf=\"locked && !icon\"\n  [name]=\"'Lock'\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-icon\n  *ngIf=\"icon && iconPosition === 'last'\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-loading\n  *ngIf=\"loading\"\n  [size]=\"16\"\n  [variant]=\"getLoadingVariant()\"\n></riv-loading>\n", styles: [":host{border-radius:var(--border-radius-small);transition:background-color var(--short-transition);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}:host:disabled,:host.disabled{cursor:default}:host.grouped:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:calc(var(--border-width) / 2)}:host.grouped:last-child{border-bottom-left-radius:0;border-top-left-radius:0;border-left-width:calc(var(--border-width) / 2)}:host.grouped:not(:first-child):not(:last-child){border-radius:0;border-right-width:calc(var(--border-width) / 2);border-left-width:calc(var(--border-width) / 2)}:host.basic{color:var(--purp-80);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.basic:hover{background-color:var(--black-20)}:host.basic:active,:host.basic.active{background-color:var(--black-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.primary{color:var(--white-90);background-color:var(--purp-60);border:var(--border-width) solid var(--border-dark-blend)}:host.primary:hover{background-color:var(--purp-70)}:host.primary:active,:host.primary.active{background-color:var(--purp-80)}:host.primary:disabled,:host.primary.disabled{border-color:transparent;background-color:var(--purp-10);color:var(--type-light-disabled)}:host.ghost{color:var(--purp-80);background-color:transparent;border:var(--border-width) solid transparent}:host.ghost:hover{background-color:var(--black-20)}:host.ghost:active,:host.ghost.active{background-color:var(--black-40)}:host.ghost:disabled,:host.ghost.disabled{color:var(--type-light-disabled);background-color:transparent}:host.caution{color:var(--type-light-caution);background-color:var(--surface-light-caution);border:var(--border-width) solid transparent}:host.caution:hover{background-color:var(--black-20)}:host.caution:active,:host.caution.active{background-color:var(--black-40)}:host.caution:disabled,:host.caution.disabled{border-color:transparent;background-color:var(--arnge-10);color:var(--type-light-disabled)}:host.danger{color:var(--white-90);background-color:var(--fyre-50);border:var(--border-width) solid var(--border-dark-blend)}:host.danger:hover{background-color:var(--fyre-70)}:host.danger:active,:host.danger.active{background-color:var(--fyre-90)}:host.danger:disabled,:host.danger.disabled{border-color:transparent;background-color:var(--fyre-10);color:var(--type-light-disabled)}:host.xsmall{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 2)}:host.xsmall:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) / -2) calc(var(--base-grid-size) * -1)}:host.xsmall:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:var(--base-grid-size)}:host.xsmall:not(.stacked) span:not(:empty)+riv-icon{margin-left:var(--base-grid-size)}:host.small{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3)}:host.small:not(.stacked) riv-icon{margin:0 calc(var(--base-grid-size) * -1.5)}:host.small:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 1.5)}:host.small:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 1.5)}:host.medium{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) calc(var(--base-grid-size) * 3)}:host.medium:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -.5) calc(var(--base-grid-size) * -1.5)}:host.medium:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size))}:host.medium:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 2)}:host.large{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 3) calc(var(--base-grid-size) * 5)}:host.large:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.large:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.large:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.xlarge{font-size:var(--type-3-font-size);line-height:var(--type-3-line-height-0);padding:calc(var(--base-grid-size) * 4) calc(var(--base-grid-size) * 6)}:host.xlarge:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.xlarge:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.xlarge:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.full{width:100%;justify-content:center}:host.loading{position:relative}:host.loading span{opacity:0}:host.loading riv-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.stacked{display:flex;flex-direction:column}:host.stacked.xsmall riv-icon,:host.stacked.small riv-icon{margin-bottom:calc(var(--base-grid-size) * 1)}:host.stacked.medium riv-icon,:host.stacked.large riv-icon,:host.stacked.xlarge riv-icon{margin-bottom:calc(var(--base-grid-size) * 2)}\n"] }]
+            args: [{ selector: '[rivButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n  *ngIf=\"icon && (iconPosition === 'first' || iconPosition === 'stacked')\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<span><ng-content></ng-content></span>\n<riv-icon\n  *ngIf=\"locked && !icon\"\n  [name]=\"'Lock'\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-icon\n  *ngIf=\"icon && iconPosition === 'last'\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-loading\n  *ngIf=\"loading\"\n  [size]=\"16\"\n  [variant]=\"getLoadingVariant()\"\n></riv-loading>\n", styles: [":host{border-radius:var(--border-radius-small);transition:background-color var(--short-transition);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}:host:disabled,:host.disabled{cursor:default}:host.grouped.first{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:calc(var(--border-width) / 2)}:host.grouped.last{border-bottom-left-radius:0;border-top-left-radius:0;border-left-width:calc(var(--border-width) / 2)}:host.grouped:not(.first):not(.last){border-radius:0;border-right-width:calc(var(--border-width) / 2);border-left-width:calc(var(--border-width) / 2)}:host.basic{color:var(--purp-80);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.basic:hover{background-color:var(--black-20)}:host.basic:active{background-color:var(--black-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.primary{color:var(--white-90);background-color:var(--purp-60);border:var(--border-width) solid var(--border-dark-blend)}:host.primary:hover{background-color:var(--purp-70)}:host.primary:active{background-color:var(--purp-80)}:host.primary:disabled,:host.primary.disabled{border-color:transparent;background-color:var(--purp-10);color:var(--type-light-disabled)}:host.ghost{color:var(--purp-80);background-color:transparent;border:var(--border-width) solid transparent}:host.ghost:hover{background-color:var(--black-20)}:host.ghost:active{background-color:var(--black-40)}:host.ghost:disabled,:host.ghost.disabled{color:var(--type-light-disabled);background-color:transparent}:host.caution{color:var(--type-light-caution);background-color:var(--surface-light-caution);border:var(--border-width) solid transparent}:host.caution:hover{background-color:var(--black-20)}:host.caution:active{background-color:var(--black-40)}:host.caution:disabled,:host.caution.disabled{border-color:transparent;background-color:var(--arnge-10);color:var(--type-light-disabled)}:host.danger{color:var(--white-90);background-color:var(--fyre-50);border:var(--border-width) solid var(--border-dark-blend)}:host.danger:hover{background-color:var(--fyre-70)}:host.danger:active{background-color:var(--fyre-90)}:host.danger:disabled,:host.danger.disabled{border-color:transparent;background-color:var(--fyre-10);color:var(--type-light-disabled)}:host.stateful{color:var(--type-light-low-contrast);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--black-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--black-30)}:host.stateful.current:active{color:var(--type-light-link-active);background-color:var(--white-100)}:host.stateful:disabled,:host.stateful.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.stateful.current:disabled,:host.stateful.current.disabled{border-color:transparent;background-color:var(--white-90);color:var(--type-light-disabled)}:host.xsmall{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 2)}:host.xsmall:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) / -2) calc(var(--base-grid-size) * -1)}:host.xsmall:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:var(--base-grid-size)}:host.xsmall:not(.stacked) span:not(:empty)+riv-icon{margin-left:var(--base-grid-size)}:host.small{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3)}:host.small:not(.stacked) riv-icon{margin:0 calc(var(--base-grid-size) * -1.5)}:host.small:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 1.5)}:host.small:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 1.5)}:host.medium{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) calc(var(--base-grid-size) * 3)}:host.medium:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -.5) calc(var(--base-grid-size) * -1.5)}:host.medium:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size))}:host.medium:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 2)}:host.large{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 3) calc(var(--base-grid-size) * 5)}:host.large:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.large:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.large:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.xlarge{font-size:var(--type-3-font-size);line-height:var(--type-3-line-height-0);padding:calc(var(--base-grid-size) * 4) calc(var(--base-grid-size) * 6)}:host.xlarge:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.xlarge:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.xlarge:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.full{width:100%;justify-content:center}:host.loading{position:relative}:host.loading span{opacity:0}:host.loading riv-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.stacked{display:flex;flex-direction:column}:host.stacked.xsmall riv-icon,:host.stacked.small riv-icon{margin-bottom:calc(var(--base-grid-size) * 1)}:host.stacked.medium riv-icon,:host.stacked.large riv-icon,:host.stacked.xlarge riv-icon{margin-bottom:calc(var(--base-grid-size) * 2)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ButtonGroupComponent, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { locked: [{
@@ -97,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], iconPosition: [{
                 type: Input
-            }], active: [{
+            }], current: [{
                 type: Input
             }], classes: [{
                 type: HostBinding,
@@ -117,7 +125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         'primary',
         'danger',
         'caution',
+        'stateful',
     ];
     ButtonComponent.IconPositions = ['first', 'last', 'stacked'];
 })(ButtonComponent || (ButtonComponent = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxXQUFXLEVBQ1gsS0FBSyxFQUVMLFFBQVEsR0FHVCxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBV3ZCLE1BQU0sT0FBTyxlQUFlO0lBQzFCLFlBQ21CLEVBQWMsRUFDZCxRQUFtQixFQUNQLEtBQTJCO1FBRnZDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ1AsVUFBSyxHQUFMLEtBQUssQ0FBc0I7UUFnQjFELFNBQUksR0FBeUIsUUFBUSxDQUFDO1FBR3RDLFlBQU8sR0FBNEIsT0FBTyxDQUFDO1FBTTNDLGlCQUFZLEdBQWlDLE9BQU8sQ0FBQztRQUdyRCxXQUFNLEdBQWEsS0FBSyxDQUFDO1FBNENqQix5QkFBb0IsR0FBWSxLQUFLLENBQUM7UUFDdEMsc0JBQWlCLEdBQVksS0FBSyxDQUFDO0lBeEV4QyxDQUFDO0lBNkJKLElBQ0ksT0FBTztRQUNULE9BQU8sTUFBTSxDQUFDLE9BQU8sQ0FBQztZQUNwQixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsTUFBTTtZQUN0QyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7WUFDZixPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU87WUFDckIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUUsSUFBSTtZQUNwQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJO1lBQ2pCLE9BQU8sRUFB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Q1IsT0FBTztRQUNQLFFBQVE7S0FDQSxDQUFDO0lBR0Usd0JBQVEsR0FBRztRQUN0QixPQUFPO1FBQ1AsT0FBTztRQUNQLFNBQVM7UUFDVCxRQUFRO1FBQ1IsU0FBUztLQUNELENBQUM7SUFHRSw2QkFBYSxHQUFHLENBQUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxTQUFTLENBQVUsQ0FBQztBQUVyRSxDQUFDLEVBckJnQixlQUFlLEtBQWYsZUFBZSxRQXFCL0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3B0aW9uYWwsXG4gIFJlbmRlcmVyMixcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBMb2FkaW5nQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbG9hZC9sb2FkaW5nL2xvYWRpbmcuY29tcG9uZW50JztcbmltcG9ydCB7IEJ1dHRvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uLWdyb3VwL2J1dHRvbi1ncm91cC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdbcml2QnV0dG9uXScsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSBlbDogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgQE9wdGlvbmFsKCkgcHJpdmF0ZSByZWFkb25seSBncm91cDogQnV0dG9uR3JvdXBDb21wb25lbnQsXG4gICkge31cblxuICBASW5wdXQoKVxuICBsb2NrZWQ/OiBib29sZWFuO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkPzogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBsb2FkaW5nPzogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBmdWxsPzogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBzaXplOiBCdXR0b25Db21wb25lbnQuU2l6ZSA9ICdtZWRpdW0nO1xuXG4gIEBJbnB1dCgpXG4gIHZhcmlhbnQ6IEJ1dHRvbkNvbXBvbmVudC5WYXJpYW50ID0gJ2Jhc2ljJztcblxuICBASW5wdXQoKVxuICBpY29uPzogSWNvbkNvbXBvbmVudC5OYW1lO1xuXG4gIEBJbnB1dCgpXG4gIGljb25Qb3NpdGlvbjogQnV0dG9uQ29tcG9uZW50Lkljb25Qb3NpdGlvbiA9ICdmaXJzdCc7XG5cbiAgQElucHV0KClcbiAgYWN0aXZlPzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgY2xhc3NlcygpIHtcbiAgICByZXR1cm4gT2JqZWN0LmVudHJpZXMoe1xuICAgICAgZGlzYWJsZWQ6IHRoaXMuZGlzYWJsZWQgfHwgdGhpcy5sb2NrZWQsXG4gICAgICBmdWxsOiB0aGlzLmZ1bGwsXG4gICAgICBsb2FkaW5nOiB0aGlzLmxvYWRpbmcsXG4gICAgICBbdGhpcy52YXJpYW50XTogdHJ1ZSxcbiAgICAgIFt0aGlzLnNpemVdOiB0cnVlLFxuICAgICAgc3RhY2tlZDogdGhpcy5pY29uUG9zaXRpb24gPT09ICdzdGFja2VkJyxcbiAgICAgIGdyb3VwZWQ6ICEhdGhpcy5ncm91cCxcbiAgICAgIGFjdGl2ZTogdGhpcy5hY3RpdmUsXG4gICAgfSlcbiAgICAgIC5maWx0ZXIoKFtfLCB2XSkgPT4gdilcbiAgICAgIC5tYXAoKFtrXSkgPT4gaylcbiAgICAgIC5qb2luKCcgJyk7XG4gIH1cblxuICBnZXRMb2FkaW5nVmFyaWFudCgpOiBMb2FkaW5nQ29tcG9uZW50LlZhcmlhbnQge1xuICAgIHN3aXRjaCAodGhpcy52YXJpYW50KSB7XG4gICAgICBjYXNlICdiYXNpYyc6XG4gICAgICBjYXNlICdjYXV0aW9uJzpcbiAgICAgIGNhc2UgJ2dob3N0JzpcbiAgICAgICAgcmV0dXJuICdkYXJrJztcbiAgICAgIGNhc2UgJ2Rhbmdlcic6XG4gICAgICBjYXNlICdwcmltYXJ5JzpcbiAgICAgICAgcmV0dXJuIHRoaXMuZGlzYWJsZWQgPyAnZGFyaycgOiAnbGlnaHQnO1xuICAgIH1cbiAgfVxuXG4gIGdldEljb25TaXplKCk6IEljb25Db21wb25lbnQuU2l6ZSB7XG4gICAgc3dpdGNoICh0aGlzLnNpemUpIHtcbiAgICAgIGNhc2UgJ3hzbWFsbCc6XG4gICAgICBjYXNlICdzbWFsbCc6XG4gICAgICAgIHJldHVybiAxNjtcbiAgICAgIGNhc2UgJ21lZGl1bSc6XG4gICAgICAgIHJldHVybiAyMDtcbiAgICAgIGNhc2UgJ2xhcmdlJzpcbiAgICAgIGNhc2UgJ3hsYXJnZSc6XG4gICAgICAgIHJldHVybiAyNDtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGRpc2FibGVOYXRpdmVFbGVtZW50OiBib29sZWFuID0gZmFsc2U7XG4gIHByaXZhdGUgbG9ja05hdGl2ZUVsZW1lbnQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgY29uc3QgYWNjZXNzQ2hhbmdlOiBib29sZWFuID0gISFjaGFuZ2VzWydkaXNhYmxlZCddIHx8ICEhY2hhbmdlc1snbG9ja2VkJ107XG4gICAgaWYgKGFjY2Vzc0NoYW5nZSkge1xuICAgICAgaWYgKGNoYW5nZXNbJ2Rpc2FibGVkJ10pIHtcbiAgICAgICAgdGhpcy5kaXNhYmxlTmF0aXZlRWxlbWVudCA9IGNoYW5nZXNbJ2Rpc2FibGVkJ10uY3VycmVudFZhbHVlO1xuICAgICAgfVxuICAgICAgaWYgKGNoYW5nZXNbJ2xvY2tlZCddKSB7XG4gICAgICAgIHRoaXMubG9ja05hdGl2ZUVsZW1lbnQgPSBjaGFuZ2VzWydsb2NrZWQnXS5jdXJyZW50VmFsdWU7XG4gICAgICB9XG4gICAgICBpZiAoJ2Rpc2FibGVkJyBpbiB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgICAgaWYgKHRoaXMuZGlzYWJsZU5hdGl2ZUVsZW1lbnQgfHwgdGhpcy5sb2NrTmF0aXZlRWxlbWVudCkge1xuICAgICAgICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJywgJ3RydWUnKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUF0dHJpYnV0ZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdkaXNhYmxlZCcpO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbmV4cG9ydCBuYW1lc3BhY2UgQnV0dG9uQ29tcG9uZW50IHtcbiAgZXhwb3J0IGNvbnN0IFNpemVzID0gW1xuICAgICd4c21hbGwnLFxuICAgICdzbWFsbCcsXG4gICAgJ21lZGl1bScsXG4gICAgJ2xhcmdlJyxcbiAgICAneGxhcmdlJyxcbiAgXSBhcyBjb25zdDtcbiAgZXhwb3J0IHR5cGUgU2l6ZSA9ICh0eXBlb2YgU2l6ZXMpW251bWJlcl07XG5cbiAgZXhwb3J0IGNvbnN0IFZhcmlhbnRzID0gW1xuICAgICdiYXNpYycsXG4gICAgJ2dob3N0JyxcbiAgICAncHJpbWFyeScsXG4gICAgJ2RhbmdlcicsXG4gICAgJ2NhdXRpb24nLFxuICBdIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBWYXJpYW50ID0gKHR5cGVvZiBWYXJpYW50cylbbnVtYmVyXTtcblxuICBleHBvcnQgY29uc3QgSWNvblBvc2l0aW9ucyA9IFsnZmlyc3QnLCAnbGFzdCcsICdzdGFja2VkJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIEljb25Qb3NpdGlvbiA9ICh0eXBlb2YgSWNvblBvc2l0aW9ucylbbnVtYmVyXTtcbn1cbiIsIjxyaXYtaWNvblxuICAqbmdJZj1cImljb24gJiYgKGljb25Qb3NpdGlvbiA9PT0gJ2ZpcnN0JyB8fCBpY29uUG9zaXRpb24gPT09ICdzdGFja2VkJylcIlxuICBbbmFtZV09XCJsb2NrZWQgPyAnTG9jaycgOiBpY29uXCJcbiAgW3NpemVdPVwiZ2V0SWNvblNpemUoKVwiXG4+PC9yaXYtaWNvbj5cbjxzcGFuPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L3NwYW4+XG48cml2LWljb25cbiAgKm5nSWY9XCJsb2NrZWQgJiYgIWljb25cIlxuICBbbmFtZV09XCInTG9jaydcIlxuICBbc2l6ZV09XCJnZXRJY29uU2l6ZSgpXCJcbj48L3Jpdi1pY29uPlxuPHJpdi1pY29uXG4gICpuZ0lmPVwiaWNvbiAmJiBpY29uUG9zaXRpb24gPT09ICdsYXN0J1wiXG4gIFtuYW1lXT1cImxvY2tlZCA/ICdMb2NrJyA6IGljb25cIlxuICBbc2l6ZV09XCJnZXRJY29uU2l6ZSgpXCJcbj48L3Jpdi1pY29uPlxuPHJpdi1sb2FkaW5nXG4gICpuZ0lmPVwibG9hZGluZ1wiXG4gIFtzaXplXT1cIjE2XCJcbiAgW3ZhcmlhbnRdPVwiZ2V0TG9hZGluZ1ZhcmlhbnQoKVwiXG4+PC9yaXYtbG9hZGluZz5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxXQUFXLEVBQ1gsS0FBSyxFQUVMLFFBQVEsR0FHVCxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBV3ZCLE1BQU0sT0FBTyxlQUFlO0lBQzFCLFlBQ21CLEVBQWMsRUFDZCxRQUFtQixFQUNQLEtBQTJCO1FBRnZDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ1AsVUFBSyxHQUFMLEtBQUssQ0FBc0I7UUFnQjFELFNBQUksR0FBeUIsUUFBUSxDQUFDO1FBR3RDLFlBQU8sR0FBNEIsT0FBTyxDQUFDO1FBTTNDLGlCQUFZLEdBQWlDLE9BQU8sQ0FBQztRQWtEN0MseUJBQW9CLEdBQVksS0FBSyxDQUFDO1FBQ3RDLHNCQUFpQixHQUFZLEtBQUssQ0FBQztJQTNFeEMsQ0FBQztJQTZCSixJQUNJLE9BQU87UUFDVCxPQUFPLE1BQU0sQ0FBQyxPQUFPLENBQUM7WUFDcEIsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLE1BQU07WUFDdEMsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO1lBQ2YsT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPO1lBQ3JCLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUFFLElBQUk7WUFDcEIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSTtZQUNqQixPQUFPLEVBQUUsSUFBSSxDQUFDLFlBQVksS0FBSyxTQUFT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Q0gsQ0FBQzs7NEdBN0dVLGVBQWU7Z0dBQWYsZUFBZSxtVENyQjVCLDBpQkFxQkE7MkZEQWEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxhQUFhLG1CQUdOLHVCQUF1QixDQUFDLE1BQU07OzBCQU01QyxRQUFROzRDQUlYLE1BQU07c0JBREwsS0FBSztnQkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSU4sT0FBTztzQkFETixLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBSU4sT0FBTztzQkFETixLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFJTixZQUFZO3NCQURYLEtBQUs7Z0JBSU4sT0FBTztzQkFETixLQUFLO2dCQUlGLE9BQU87c0JBRFYsV0FBVzt1QkFBQyxPQUFPOztBQThFdEIsV0FBaUIsZUFBZTtJQUNqQixxQkFBSyxHQUFHO1FBQ25CLFFBQVE7UUFDUixPQUFPO1FBQ1AsUUFBUTtRQUNSLE9BQU87UUFDUCxRQUFRO0tBQ0EsQ0FBQztJQUdFLHdCQUFRLEdBQUc7UUFDdEIsT0FBTztRQUNQLE9BQU87UUFDUCxTQUFTO1FBQ1QsUUFBUTtRQUNSLFNBQVM7UUFDVCxVQUFVO0tBQ0YsQ0FBQztJQUdFLDZCQUFhLEdBQUcsQ0FBQyxPQUFPLEVBQUUsTUFBTSxFQUFFLFNBQVMsQ0FBVSxDQUFDO0FBRXJFLENBQUMsRUF0QmdCLGVBQWUsS0FBZixlQUFlLFFBc0IvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPcHRpb25hbCxcbiAgUmVuZGVyZXIyLFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9pY29uL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IExvYWRpbmdDb21wb25lbnQgfSBmcm9tICcuLi8uLi9sb2FkL2xvYWRpbmcvbG9hZGluZy5jb21wb25lbnQnO1xuaW1wb3J0IHsgQnV0dG9uR3JvdXBDb21wb25lbnQgfSBmcm9tICcuLi9idXR0b24tZ3JvdXAvYnV0dG9uLWdyb3VwLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ1tyaXZCdXR0b25dJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHJlYWRvbmx5IGVsOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgcmVhZG9ubHkgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICBAT3B0aW9uYWwoKSBwcml2YXRlIHJlYWRvbmx5IGdyb3VwOiBCdXR0b25Hcm91cENvbXBvbmVudCxcbiAgKSB7fVxuXG4gIEBJbnB1dCgpXG4gIGxvY2tlZD86IGJvb2xlYW47XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuXG4gIEBJbnB1dCgpXG4gIGxvYWRpbmc/OiBib29sZWFuO1xuXG4gIEBJbnB1dCgpXG4gIGZ1bGw/OiBib29sZWFuO1xuXG4gIEBJbnB1dCgpXG4gIHNpemU6IEJ1dHRvbkNvbXBvbmVudC5TaXplID0gJ21lZGl1bSc7XG5cbiAgQElucHV0KClcbiAgdmFyaWFudDogQnV0dG9uQ29tcG9uZW50LlZhcmlhbnQgPSAnYmFzaWMnO1xuXG4gIEBJbnB1dCgpXG4gIGljb24/OiBJY29uQ29tcG9uZW50Lk5hbWU7XG5cbiAgQElucHV0KClcbiAgaWNvblBvc2l0aW9uOiBCdXR0b25Db21wb25lbnQuSWNvblBvc2l0aW9uID0gJ2ZpcnN0JztcblxuICBASW5wdXQoKVxuICBjdXJyZW50PzogYm9vbGVhbjtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IGNsYXNzZXMoKSB7XG4gICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKHtcbiAgICAgIGRpc2FibGVkOiB0aGlzLmRpc2FibGVkIHx8IHRoaXMubG9ja2VkLFxuICAgICAgZnVsbDogdGhpcy5mdWxsLFxuICAgICAgbG9hZGluZzogdGhpcy5sb2FkaW5nLFxuICAgICAgW3RoaXMudmFyaWFudF06IHRydWUsXG4gICAgICBbdGhpcy5zaXplXTogdHJ1ZSxcbiAgICAgIHN0YWNrZWQ6IHRoaXMuaWNvblBvc2l0aW9uID09PSAnc3RhY2tlZCcsXG4gICAgICBncm91cGVkOiAhIXRoaXMuZ3JvdXAsXG4gICAgICBmaXJzdDogISF0aGlzLmdyb3VwPy5pc0ZpcnN0KHRoaXMuZWwpLFxuICAgICAgbGFzdDogISF0aGlzLmdyb3VwPy5pc0xhc3QodGhpcy5lbCksXG4gICAgICBjdXJyZW50OiAhIXRoaXMuY3VycmVudCxcbiAgICB9KVxuICAgICAgLmZpbHRlcigoW18sIHZdKSA9PiB2KVxuICAgICAgLm1hcCgoW2tdKSA9PiBrKVxuICAgICAgLmpvaW4oJyAnKTtcbiAgfVxuXG4gIGdldExvYWRpbmdWYXJpYW50KCk6IExvYWRpbmdDb21wb25lbnQuVmFyaWFudCB7XG4gICAgc3dpdGNoICh0aGlzLnZhcmlhbnQpIHtcbiAgICAgIGNhc2UgJ2Jhc2ljJzpcbiAgICAgIGNhc2UgJ2NhdXRpb24nOlxuICAgICAgY2FzZSAnZ2hvc3QnOlxuICAgICAgY2FzZSAnc3RhdGVmdWwnOlxuICAgICAgICByZXR1cm4gJ2RhcmsnO1xuICAgICAgY2FzZSAnZGFuZ2VyJzpcbiAgICAgIGNhc2UgJ3ByaW1hcnknOlxuICAgICAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCA/ICdkYXJrJyA6ICdsaWdodCc7XG4gICAgfVxuICB9XG5cbiAgZ2V0SWNvblNpemUoKTogSWNvbkNvbXBvbmVudC5TaXplIHtcbiAgICBzd2l0Y2ggKHRoaXMuc2l6ZSkge1xuICAgICAgY2FzZSAneHNtYWxsJzpcbiAgICAgIGNhc2UgJ3NtYWxsJzpcbiAgICAgICAgcmV0dXJuIDE2O1xuICAgICAgY2FzZSAnbWVkaXVtJzpcbiAgICAgICAgcmV0dXJuIDIwO1xuICAgICAgY2FzZSAnbGFyZ2UnOlxuICAgICAgY2FzZSAneGxhcmdlJzpcbiAgICAgICAgcmV0dXJuIDI0O1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZGlzYWJsZU5hdGl2ZUVsZW1lbnQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgcHJpdmF0ZSBsb2NrTmF0aXZlRWxlbWVudDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBjb25zdCBhY2Nlc3NDaGFuZ2U6IGJvb2xlYW4gPSAhIWNoYW5nZXNbJ2Rpc2FibGVkJ10gfHwgISFjaGFuZ2VzWydsb2NrZWQnXTtcbiAgICBpZiAoYWNjZXNzQ2hhbmdlKSB7XG4gICAgICBpZiAoY2hhbmdlc1snZGlzYWJsZWQnXSkge1xuICAgICAgICB0aGlzLmRpc2FibGVOYXRpdmVFbGVtZW50ID0gY2hhbmdlc1snZGlzYWJsZWQnXS5jdXJyZW50VmFsdWU7XG4gICAgICB9XG4gICAgICBpZiAoY2hhbmdlc1snbG9ja2VkJ10pIHtcbiAgICAgICAgdGhpcy5sb2NrTmF0aXZlRWxlbWVudCA9IGNoYW5nZXNbJ2xvY2tlZCddLmN1cnJlbnRWYWx1ZTtcbiAgICAgIH1cbiAgICAgIGlmICgnZGlzYWJsZWQnIGluIHRoaXMuZWwubmF0aXZlRWxlbWVudCkge1xuICAgICAgICBpZiAodGhpcy5kaXNhYmxlTmF0aXZlRWxlbWVudCB8fCB0aGlzLmxvY2tOYXRpdmVFbGVtZW50KSB7XG4gICAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnZGlzYWJsZWQnLCAndHJ1ZScpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQXR0cmlidXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJyk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICBjb25zdCBjdXJyZW50T3JWYXJpYW50Q2hhbmdlOiBib29sZWFuID1cbiAgICAgICEhY2hhbmdlc1snY3VycmVudCddIHx8ICEhY2hhbmdlc1sndmFyaWFudCddO1xuICAgIGlmIChjdXJyZW50T3JWYXJpYW50Q2hhbmdlKSB7XG4gICAgICBpZiAodGhpcy5jdXJyZW50ICE9PSB1bmRlZmluZWQgJiYgdGhpcy52YXJpYW50ICE9PSAnc3RhdGVmdWwnKSB7XG4gICAgICAgIGNvbnNvbGUud2FybihcbiAgICAgICAgICBgQnV0dG9uQ29tcG9uZW50OiBUaGUgJ2N1cnJlbnQnIGlucHV0IGlzIG9ubHkgdmFsaWQgd2hlbiB2YXJpYW50IGlzICdzdGF0ZWZ1bCcuIFZhcmlhbnQ6ICcke3RoaXMudmFyaWFudH0nYCxcbiAgICAgICAgKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cblxuZXhwb3J0IG5hbWVzcGFjZSBCdXR0b25Db21wb25lbnQge1xuICBleHBvcnQgY29uc3QgU2l6ZXMgPSBbXG4gICAgJ3hzbWFsbCcsXG4gICAgJ3NtYWxsJyxcbiAgICAnbWVkaXVtJyxcbiAgICAnbGFyZ2UnLFxuICAgICd4bGFyZ2UnLFxuICBdIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBTaXplID0gKHR5cGVvZiBTaXplcylbbnVtYmVyXTtcblxuICBleHBvcnQgY29uc3QgVmFyaWFudHMgPSBbXG4gICAgJ2Jhc2ljJyxcbiAgICAnZ2hvc3QnLFxuICAgICdwcmltYXJ5JyxcbiAgICAnZGFuZ2VyJyxcbiAgICAnY2F1dGlvbicsXG4gICAgJ3N0YXRlZnVsJyxcbiAgXSBhcyBjb25zdDtcbiAgZXhwb3J0IHR5cGUgVmFyaWFudCA9ICh0eXBlb2YgVmFyaWFudHMpW251bWJlcl07XG5cbiAgZXhwb3J0IGNvbnN0IEljb25Qb3NpdGlvbnMgPSBbJ2ZpcnN0JywgJ2xhc3QnLCAnc3RhY2tlZCddIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBJY29uUG9zaXRpb24gPSAodHlwZW9mIEljb25Qb3NpdGlvbnMpW251bWJlcl07XG59XG4iLCI8cml2LWljb25cbiAgKm5nSWY9XCJpY29uICYmIChpY29uUG9zaXRpb24gPT09ICdmaXJzdCcgfHwgaWNvblBvc2l0aW9uID09PSAnc3RhY2tlZCcpXCJcbiAgW25hbWVdPVwibG9ja2VkID8gJ0xvY2snIDogaWNvblwiXG4gIFtzaXplXT1cImdldEljb25TaXplKClcIlxuPjwvcml2LWljb24+XG48c3Bhbj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9zcGFuPlxuPHJpdi1pY29uXG4gICpuZ0lmPVwibG9ja2VkICYmICFpY29uXCJcbiAgW25hbWVdPVwiJ0xvY2snXCJcbiAgW3NpemVdPVwiZ2V0SWNvblNpemUoKVwiXG4+PC9yaXYtaWNvbj5cbjxyaXYtaWNvblxuICAqbmdJZj1cImljb24gJiYgaWNvblBvc2l0aW9uID09PSAnbGFzdCdcIlxuICBbbmFtZV09XCJsb2NrZWQgPyAnTG9jaycgOiBpY29uXCJcbiAgW3NpemVdPVwiZ2V0SWNvblNpemUoKVwiXG4+PC9yaXYtaWNvbj5cbjxyaXYtbG9hZGluZ1xuICAqbmdJZj1cImxvYWRpbmdcIlxuICBbc2l6ZV09XCIxNlwiXG4gIFt2YXJpYW50XT1cImdldExvYWRpbmdWYXJpYW50KClcIlxuPjwvcml2LWxvYWRpbmc+XG4iXX0=

package/esm2020/lib/input/button-group/button-group.component.mjs

@@ -1,11 +1,39 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class ButtonGroupComponent {
+    constructor(el) {
+        this.el = el;
+    }
+    isFirst(btn) {
+        const child = this.getDirectChildOfGroup(btn);
+        return this.el.nativeElement.firstChild === child;
+    }
+    isLast(btn) {
+        const child = this.getDirectChildOfGroup(btn);
+        return this.el.nativeElement.lastChild === child;
+    }
+    /*
+      rivButton may not always be a *direct* descendant of the button group (like
+      in cases where a custom rivButton trigger is used for a riv-select as part
+      of a button group), so we traverse the tree until we get up to the direct
+      child of the group for calculating whether or not the button is first or
+      last (or neither), for proper styling.
+    */
+    getDirectChildOfGroup(btn) {
+        const buttonElement = btn.nativeElement;
+        const hostElement = this.el.nativeElement;
+        let possibleChild = buttonElement;
+        while (possibleChild.parentElement &&
+            possibleChild.parentElement !== hostElement) {
+            possibleChild = possibleChild.parentElement;
+        }
+        return possibleChild;
+    }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonGroupComponent, selector: "riv-button-group", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}\n"] }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L2J1dHRvbi1ncm91cC9idXR0b24tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvYnV0dG9uLWdyb3VwL2J1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVFuRSxNQUFNLE9BQU8sb0JBQW9COztpSEFBcEIsb0JBQW9CO3FHQUFwQixvQkFBb0Isd0RDUmpDLDZCQUNBOzJGRE9hLG9CQUFvQjtrQkFOaEMsU0FBUzsrQkFDRSxrQkFBa0IsbUJBR1gsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LWJ1dHRvbi1ncm91cCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24tZ3JvdXAuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9idXR0b24tZ3JvdXAuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uR3JvdXBDb21wb25lbnQge31cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiJdfQ==
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L2J1dHRvbi1ncm91cC9idXR0b24tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvaW5wdXQvYnV0dG9uLWdyb3VwL2J1dHRvbi1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFjLE1BQU0sZUFBZSxDQUFDOztBQVEvRSxNQUFNLE9BQU8sb0JBQW9CO0lBQy9CLFlBQTZCLEVBQTJCO1FBQTNCLE9BQUUsR0FBRixFQUFFLENBQXlCO0lBQUcsQ0FBQztJQUVyRCxPQUFPLENBQUMsR0FBNEI7UUFDekMsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQzlDLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsVUFBVSxLQUFLLEtBQUssQ0FBQztJQUNwRCxDQUFDO0lBRU0sTUFBTSxDQUFDLEdBQTRCO1FBQ3hDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM5QyxPQUFPLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFNBQVMsS0FBSyxLQUFLLENBQUM7SUFDbkQsQ0FBQztJQUVEOzs7Ozs7TUFNRTtJQUNNLHFCQUFxQixDQUMzQixHQUE0QjtRQUU1QixNQUFNLGFBQWEsR0FBRyxHQUFHLENBQUMsYUFBYSxDQUFDO1FBQ3hDLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDO1FBRTFDLElBQUksYUFBYSxHQUFHLGFBQWEsQ0FBQztRQUNsQyxPQUNFLGFBQWEsQ0FBQyxhQUFhO1lBQzNCLGFBQWEsQ0FBQyxhQUFhLEtBQUssV0FBVyxFQUMzQztZQUNBLGFBQWEsR0FBRyxhQUFhLENBQUMsYUFBYSxDQUFDO1NBQzdDO1FBRUQsT0FBTyxhQUFhLENBQUM7SUFDdkIsQ0FBQzs7aUhBbkNVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHdEQ1JqQyw2QkFDQTsyRkRPYSxvQkFBb0I7a0JBTmhDLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1idXR0b24tZ3JvdXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYnV0dG9uLWdyb3VwLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkdyb3VwQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZWFkb25seSBlbDogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4pIHt9XG5cbiAgcHVibGljIGlzRmlyc3QoYnRuOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pik6IGJvb2xlYW4ge1xuICAgIGNvbnN0IGNoaWxkID0gdGhpcy5nZXREaXJlY3RDaGlsZE9mR3JvdXAoYnRuKTtcbiAgICByZXR1cm4gdGhpcy5lbC5uYXRpdmVFbGVtZW50LmZpcnN0Q2hpbGQgPT09IGNoaWxkO1xuICB9XG5cbiAgcHVibGljIGlzTGFzdChidG46IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KTogYm9vbGVhbiB7XG4gICAgY29uc3QgY2hpbGQgPSB0aGlzLmdldERpcmVjdENoaWxkT2ZHcm91cChidG4pO1xuICAgIHJldHVybiB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQubGFzdENoaWxkID09PSBjaGlsZDtcbiAgfVxuXG4gIC8qXG4gICAgcml2QnV0dG9uIG1heSBub3QgYWx3YXlzIGJlIGEgKmRpcmVjdCogZGVzY2VuZGFudCBvZiB0aGUgYnV0dG9uIGdyb3VwIChsaWtlXG4gICAgaW4gY2FzZXMgd2hlcmUgYSBjdXN0b20gcml2QnV0dG9uIHRyaWdnZXIgaXMgdXNlZCBmb3IgYSByaXYtc2VsZWN0IGFzIHBhcnRcbiAgICBvZiBhIGJ1dHRvbiBncm91cCksIHNvIHdlIHRyYXZlcnNlIHRoZSB0cmVlIHVudGlsIHdlIGdldCB1cCB0byB0aGUgZGlyZWN0XG4gICAgY2hpbGQgb2YgdGhlIGdyb3VwIGZvciBjYWxjdWxhdGluZyB3aGV0aGVyIG9yIG5vdCB0aGUgYnV0dG9uIGlzIGZpcnN0IG9yXG4gICAgbGFzdCAob3IgbmVpdGhlciksIGZvciBwcm9wZXIgc3R5bGluZy5cbiAgKi9cbiAgcHJpdmF0ZSBnZXREaXJlY3RDaGlsZE9mR3JvdXAoXG4gICAgYnRuOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKTogSFRNTEVsZW1lbnQgfCBudWxsIHtcbiAgICBjb25zdCBidXR0b25FbGVtZW50ID0gYnRuLm5hdGl2ZUVsZW1lbnQ7XG4gICAgY29uc3QgaG9zdEVsZW1lbnQgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICBsZXQgcG9zc2libGVDaGlsZCA9IGJ1dHRvbkVsZW1lbnQ7XG4gICAgd2hpbGUgKFxuICAgICAgcG9zc2libGVDaGlsZC5wYXJlbnRFbGVtZW50ICYmXG4gICAgICBwb3NzaWJsZUNoaWxkLnBhcmVudEVsZW1lbnQgIT09IGhvc3RFbGVtZW50XG4gICAgKSB7XG4gICAgICBwb3NzaWJsZUNoaWxkID0gcG9zc2libGVDaGlsZC5wYXJlbnRFbGVtZW50O1xuICAgIH1cblxuICAgIHJldHVybiBwb3NzaWJsZUNoaWxkO1xuICB9XG59XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4iXX0=

package/esm2020/lib/input/calendar/calendar.component.mjs

@@ -280,7 +280,7 @@ export class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "riv-calendar", inputs: { activeYearMonth: "activeYearMonth", displayMin: "displayMin", displayMax: "displayMax", selectableMin: "selectableMin", selectableMax: "selectableMax", omitRange: "omitRange", selectedValue: "selectedValue" }, outputs: { activeYearMonthChange: "activeYearMonthChange", dateSelect: "dateSelect" }, ngImport: i0, template: "<div class=\"controls\">\n  <div>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Month' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Year' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n  </div>\n  <div\n    *ngIf=\"{ prev: previousMonth$ | async, next: nextMonth$ | async }; let vm\"\n  >\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowLeft'\"\n      [disabled]=\"!vm.prev\"\n      (click)=\"vm.prev ? activeYearMonthChange.emit(vm.prev) : null\"\n      type=\"button\"\n    ></button>\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowRight'\"\n      [disabled]=\"!vm.next\"\n      (click)=\"vm.next ? activeYearMonthChange.emit(vm.next) : null\"\n      type=\"button\"\n    ></button>\n  </div>\n</div>\n<div class=\"calendar\">\n  <span class=\"label\">Su</span>\n  <span class=\"label\">Mo</span>\n  <span class=\"label\">Tu</span>\n  <span class=\"label\">We</span>\n  <span class=\"label\">Th</span>\n  <span class=\"label\">Fr</span>\n  <span class=\"label\">Sa</span>\n  <button\n    *ngFor=\"let day of dates$ | async\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.hidden]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth && !day.hidden\"\n    [class.fade-in]=\"day.fadeIn\"\n    [class.fade-out]=\"day.fadeOut\"\n    [class.in-range]=\"day.inRange\"\n    [class.rounded-ne]=\"day.roundedNe\"\n    [class.rounded-nw]=\"day.roundedNw\"\n    [class.rounded-se]=\"day.roundedSe\"\n    [class.rounded-sw]=\"day.roundedSw\"\n    (click)=\"selectDay(day)\"\n    type=\"button\"\n  >\n    <span\n      class=\"day-wrapper\"\n      [class.selected]=\"day.selected\"\n      [class.today]=\"day.today\"\n    >\n      {{ day.display }}\n    </span>\n  </button>\n</div>\n", styles: [".controls{display:flex;align-items:center;justify-content:space-between}.calendar{display:grid;grid-template-columns:repeat(7,calc(var(--base-grid-size) * 10));grid-auto-rows:calc(var(--base-grid-size) * 6)}.label{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-heavy)}.day{display:flex;align-items:stretch;cursor:pointer}.day.hidden{cursor:default}.day:hover:not(.hidden){background-color:var(--surface-light-1)}.day.in-range{background-color:var(--purp-10)}.day.fade-out{background-image:linear-gradient(to right,var(--purp-10),var(--white-100))}.day.fade-in{background-image:linear-gradient(to right,var(--white-100),var(--purp-10))}.day.bleed{color:var(--type-light-low-contrast)}.day.rounded-ne{border-top-right-radius:var(--border-radius-medium)}.day.rounded-nw{border-top-left-radius:var(--border-radius-medium)}.day.rounded-sw{border-bottom-left-radius:var(--border-radius-medium)}.day.rounded-se{border-bottom-right-radius:var(--border-radius-medium)}.day-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-medium)}.day-wrapper.selected{background-color:var(--purp-60);color:var(--type-dark-high-contrast)}.day-wrapper.today{border-radius:calc(var(--base-grid-size) * 8);border:var(--border-width) solid var(--border-light);font-weight:var(--font-weight-heavy)}\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: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: i3.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers"], outputs: ["selectedOptionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "riv-calendar", inputs: { activeYearMonth: "activeYearMonth", displayMin: "displayMin", displayMax: "displayMax", selectableMin: "selectableMin", selectableMax: "selectableMax", omitRange: "omitRange", selectedValue: "selectedValue" }, outputs: { activeYearMonthChange: "activeYearMonthChange", dateSelect: "dateSelect" }, ngImport: i0, template: "<div class=\"controls\">\n  <div>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Month' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Year' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n  </div>\n  <div\n    *ngIf=\"{ prev: previousMonth$ | async, next: nextMonth$ | async }; let vm\"\n  >\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowLeft'\"\n      [disabled]=\"!vm.prev\"\n      (click)=\"vm.prev ? activeYearMonthChange.emit(vm.prev) : null\"\n      type=\"button\"\n    ></button>\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowRight'\"\n      [disabled]=\"!vm.next\"\n      (click)=\"vm.next ? activeYearMonthChange.emit(vm.next) : null\"\n      type=\"button\"\n    ></button>\n  </div>\n</div>\n<div class=\"calendar\">\n  <span class=\"label\">Su</span>\n  <span class=\"label\">Mo</span>\n  <span class=\"label\">Tu</span>\n  <span class=\"label\">We</span>\n  <span class=\"label\">Th</span>\n  <span class=\"label\">Fr</span>\n  <span class=\"label\">Sa</span>\n  <button\n    *ngFor=\"let day of dates$ | async\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.hidden]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth && !day.hidden\"\n    [class.fade-in]=\"day.fadeIn\"\n    [class.fade-out]=\"day.fadeOut\"\n    [class.in-range]=\"day.inRange\"\n    [class.rounded-ne]=\"day.roundedNe\"\n    [class.rounded-nw]=\"day.roundedNw\"\n    [class.rounded-se]=\"day.roundedSe\"\n    [class.rounded-sw]=\"day.roundedSw\"\n    (click)=\"selectDay(day)\"\n    type=\"button\"\n  >\n    <span\n      class=\"day-wrapper\"\n      [class.selected]=\"day.selected\"\n      [class.today]=\"day.today\"\n    >\n      {{ day.display }}\n    </span>\n  </button>\n</div>\n", styles: [".controls{display:flex;align-items:center;justify-content:space-between}.calendar{display:grid;grid-template-columns:repeat(7,calc(var(--base-grid-size) * 10));grid-auto-rows:calc(var(--base-grid-size) * 6)}.label{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-heavy)}.day{display:flex;align-items:stretch;cursor:pointer}.day.hidden{cursor:default}.day:hover:not(.hidden){background-color:var(--surface-light-1)}.day.in-range{background-color:var(--purp-10)}.day.fade-out{background-image:linear-gradient(to right,var(--purp-10),var(--white-100))}.day.fade-in{background-image:linear-gradient(to right,var(--white-100),var(--purp-10))}.day.bleed{color:var(--type-light-low-contrast)}.day.rounded-ne{border-top-right-radius:var(--border-radius-medium)}.day.rounded-nw{border-top-left-radius:var(--border-radius-medium)}.day.rounded-sw{border-bottom-left-radius:var(--border-radius-medium)}.day.rounded-se{border-bottom-right-radius:var(--border-radius-medium)}.day-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-medium)}.day-wrapper.selected{background-color:var(--purp-60);color:var(--type-dark-high-contrast)}.day-wrapper.today{border-radius:calc(var(--base-grid-size) * 8);border:var(--border-width) solid var(--border-light);font-weight:var(--font-weight-heavy)}\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: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers"], outputs: ["selectedOptionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"controls\">\n  <div>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Month' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Year' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n  </div>\n  <div\n    *ngIf=\"{ prev: previousMonth$ | async, next: nextMonth$ | async }; let vm\"\n  >\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowLeft'\"\n      [disabled]=\"!vm.prev\"\n      (click)=\"vm.prev ? activeYearMonthChange.emit(vm.prev) : null\"\n      type=\"button\"\n    ></button>\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowRight'\"\n      [disabled]=\"!vm.next\"\n      (click)=\"vm.next ? activeYearMonthChange.emit(vm.next) : null\"\n      type=\"button\"\n    ></button>\n  </div>\n</div>\n<div class=\"calendar\">\n  <span class=\"label\">Su</span>\n  <span class=\"label\">Mo</span>\n  <span class=\"label\">Tu</span>\n  <span class=\"label\">We</span>\n  <span class=\"label\">Th</span>\n  <span class=\"label\">Fr</span>\n  <span class=\"label\">Sa</span>\n  <button\n    *ngFor=\"let day of dates$ | async\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.hidden]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth && !day.hidden\"\n    [class.fade-in]=\"day.fadeIn\"\n    [class.fade-out]=\"day.fadeOut\"\n    [class.in-range]=\"day.inRange\"\n    [class.rounded-ne]=\"day.roundedNe\"\n    [class.rounded-nw]=\"day.roundedNw\"\n    [class.rounded-se]=\"day.roundedSe\"\n    [class.rounded-sw]=\"day.roundedSw\"\n    (click)=\"selectDay(day)\"\n    type=\"button\"\n  >\n    <span\n      class=\"day-wrapper\"\n      [class.selected]=\"day.selected\"\n      [class.today]=\"day.today\"\n    >\n      {{ day.display }}\n    </span>\n  </button>\n</div>\n", styles: [".controls{display:flex;align-items:center;justify-content:space-between}.calendar{display:grid;grid-template-columns:repeat(7,calc(var(--base-grid-size) * 10));grid-auto-rows:calc(var(--base-grid-size) * 6)}.label{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-heavy)}.day{display:flex;align-items:stretch;cursor:pointer}.day.hidden{cursor:default}.day:hover:not(.hidden){background-color:var(--surface-light-1)}.day.in-range{background-color:var(--purp-10)}.day.fade-out{background-image:linear-gradient(to right,var(--purp-10),var(--white-100))}.day.fade-in{background-image:linear-gradient(to right,var(--white-100),var(--purp-10))}.day.bleed{color:var(--type-light-low-contrast)}.day.rounded-ne{border-top-right-radius:var(--border-radius-medium)}.day.rounded-nw{border-top-left-radius:var(--border-radius-medium)}.day.rounded-sw{border-bottom-left-radius:var(--border-radius-medium)}.day.rounded-se{border-bottom-right-radius:var(--border-radius-medium)}.day-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-medium)}.day-wrapper.selected{background-color:var(--purp-60);color:var(--type-dark-high-contrast)}.day-wrapper.today{border-radius:calc(var(--base-grid-size) * 8);border:var(--border-width) solid var(--border-light);font-weight:var(--font-weight-heavy)}\n"] }]

package/esm2020/lib/input/date-range/date-range.component.mjs

@@ -198,7 +198,7 @@ export class DateRangeComponent extends InputLabelComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, 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 }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\n      (click)=\"open$.next(true)\"\n      [disabled]=\"disabled$ | async\"\n      type=\"button\"\n    >\n      <ng-container\n        *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n      >\n        <span class=\"value\">{{ display }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [allowedPositions]=\"[\n        'top-left',\n        'top-right',\n        'bottom-right',\n        'bottom-left'\n      ]\"\n      [preferredPosition]=\"'bottom-right'\"\n      (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n    >\n      <div class=\"content\" [class.includePreset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\n            [optionGroups]=\"\n              (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n            \"\n            [selectedOption]=\"selectedPreset$ | async\"\n            (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          >\n            <ng-template #option let-node=\"node\">\n              <ng-template\n                #self\n                [ngTemplateOutlet]=\"self\"\n                let-isFavorite\n                [ngTemplateOutletContext]=\"{\n                  $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n                }\"\n              >\n                <div class=\"preset\" [class.favorite]=\"isFavorite\">\n                  <div class=\"description\">\n                    <riv-highlight\n                      class=\"title\"\n                      [text]=\"node.title\"\n                      [indices]=\"node.titleHighlightIndices || []\"\n                    ></riv-highlight>\n                    <riv-highlight\n                      class=\"subtitle\"\n                      [text]=\"node.subtitle\"\n                      [indices]=\"node.subtitleHighlightIndices || []\"\n                    ></riv-highlight>\n                  </div>\n                  <button\n                    (click)=\"\n                      setFavorite(node, !isFavorite); $event.stopPropagation()\n                    \"\n                    type=\"button\"\n                  >\n                    <riv-icon\n                      [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n                      [size]=\"16\"\n                      [rivTooltip]=\"'Mark as favorite'\"\n                    ></riv-icon>\n                  </button>\n                </div>\n              </ng-template>\n            </ng-template>\n          </riv-simple-select>\n          <ng-template\n            #self\n            [ngTemplateOutlet]=\"self\"\n            let-favorites\n            [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n          >\n            <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n              <div class=\"shortcuts\">\n                <button\n                  *ngFor=\"let favorite of favorites\"\n                  class=\"shortcut\"\n                  [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n                  (click)=\"userSelectedPreset$.next(favorite)\"\n                  type=\"button\"\n                >\n                  <span class=\"title\">{{ favorite.title }}</span>\n                  <button\n                    (click)=\"setFavorite(favorite, false)\"\n                    [rivTooltip]=\"'Remove favorite'\"\n                    type=\"button\"\n                  >\n                    <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n                  </button>\n                </button>\n              </div>\n            </riv-input-label>\n          </ng-template>\n        </div>\n\n        <div class=\"calendars\">\n          <riv-calendar\n            class=\"left\"\n            [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n            (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n            [displayMin]=\"(min$ | async) || TODAY\"\n            [displayMax]=\"(max$ | async) || TODAY\"\n            [selectableMin]=\"(leftMin$ | async) || TODAY\"\n            [selectableMax]=\"(leftMax$ | async) || TODAY\"\n            [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n            [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n            (dateSelect)=\"userSelectedDate$.next($event)\"\n          ></riv-calendar>\n          <riv-calendar\n            class=\"right\"\n            [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n            (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n            [displayMin]=\"(min$ | async) || TODAY\"\n            [displayMax]=\"(max$ | async) || TODAY\"\n            [selectableMin]=\"(rightMin$ | async) || TODAY\"\n            [selectableMax]=\"(rightMax$ | async) || TODAY\"\n            [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n            (dateSelect)=\"userSelectedDate$.next($event)\"\n          ></riv-calendar>\n        </div>\n\n        <footer class=\"buttons\">\n          <button\n            rivButton\n            [size]=\"'small'\"\n            [variant]=\"'ghost'\"\n            (click)=\"userSelectedDate$.next(undefined)\"\n            type=\"button\"\n          >\n            Clear\n          </button>\n          <button\n            rivButton\n            [size]=\"'small'\"\n            [variant]=\"'primary'\"\n            (click)=\"open$.next(false)\"\n            type=\"button\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </riv-callout>\n  </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.includePreset{grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\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.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: i3.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, 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 }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\n      (click)=\"open$.next(true)\"\n      [disabled]=\"disabled$ | async\"\n      type=\"button\"\n    >\n      <ng-container\n        *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n      >\n        <span class=\"value\">{{ display }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [allowedPositions]=\"[\n        'top-left',\n        'top-right',\n        'bottom-right',\n        'bottom-left'\n      ]\"\n      [preferredPosition]=\"'bottom-right'\"\n      (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n    >\n      <div class=\"content\" [class.includePreset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\n            [optionGroups]=\"\n              (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n            \"\n            [selectedOption]=\"selectedPreset$ | async\"\n            (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          >\n            <ng-template #option let-node=\"node\">\n              <ng-template\n                #self\n                [ngTemplateOutlet]=\"self\"\n                let-isFavorite\n                [ngTemplateOutletContext]=\"{\n                  $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n                }\"\n              >\n                <div class=\"preset\" [class.favorite]=\"isFavorite\">\n                  <div class=\"description\">\n                    <riv-highlight\n                      class=\"title\"\n                      [text]=\"node.title\"\n                      [indices]=\"node.titleHighlightIndices || []\"\n                    ></riv-highlight>\n                    <riv-highlight\n                      class=\"subtitle\"\n                      [text]=\"node.subtitle\"\n                      [indices]=\"node.subtitleHighlightIndices || []\"\n                    ></riv-highlight>\n                  </div>\n                  <button\n                    (click)=\"\n                      setFavorite(node, !isFavorite); $event.stopPropagation()\n                    \"\n                    type=\"button\"\n                  >\n                    <riv-icon\n                      [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n                      [size]=\"16\"\n                      [rivTooltip]=\"'Mark as favorite'\"\n                    ></riv-icon>\n                  </button>\n                </div>\n              </ng-template>\n            </ng-template>\n          </riv-simple-select>\n          <ng-template\n            #self\n            [ngTemplateOutlet]=\"self\"\n            let-favorites\n            [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n          >\n            <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n              <div class=\"shortcuts\">\n                <button\n                  *ngFor=\"let favorite of favorites\"\n                  class=\"shortcut\"\n                  [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n                  (click)=\"userSelectedPreset$.next(favorite)\"\n                  type=\"button\"\n                >\n                  <span class=\"title\">{{ favorite.title }}</span>\n                  <button\n                    (click)=\"setFavorite(favorite, false)\"\n                    [rivTooltip]=\"'Remove favorite'\"\n                    type=\"button\"\n                  >\n                    <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n                  </button>\n                </button>\n              </div>\n            </riv-input-label>\n          </ng-template>\n        </div>\n\n        <div class=\"calendars\">\n          <riv-calendar\n            class=\"left\"\n            [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n            (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n            [displayMin]=\"(min$ | async) || TODAY\"\n            [displayMax]=\"(max$ | async) || TODAY\"\n            [selectableMin]=\"(leftMin$ | async) || TODAY\"\n            [selectableMax]=\"(leftMax$ | async) || TODAY\"\n            [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n            [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n            (dateSelect)=\"userSelectedDate$.next($event)\"\n          ></riv-calendar>\n          <riv-calendar\n            class=\"right\"\n            [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n            (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n            [displayMin]=\"(min$ | async) || TODAY\"\n            [displayMax]=\"(max$ | async) || TODAY\"\n            [selectableMin]=\"(rightMin$ | async) || TODAY\"\n            [selectableMax]=\"(rightMax$ | async) || TODAY\"\n            [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n            (dateSelect)=\"userSelectedDate$.next($event)\"\n          ></riv-calendar>\n        </div>\n\n        <footer class=\"buttons\">\n          <button\n            rivButton\n            [size]=\"'small'\"\n            [variant]=\"'ghost'\"\n            (click)=\"userSelectedDate$.next(undefined)\"\n            type=\"button\"\n          >\n            Clear\n          </button>\n          <button\n            rivButton\n            [size]=\"'small'\"\n            [variant]=\"'primary'\"\n            (click)=\"open$.next(false)\"\n            type=\"button\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </riv-callout>\n  </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.includePreset{grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\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.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\n      (click)=\"open$.next(true)\"\n      [disabled]=\"disabled$ | async\"\n      type=\"button\"\n    >\n      <ng-container\n        *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n      >\n        <span class=\"value\">{{ display }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [allowedPositions]=\"[\n        'top-left',\n        'top-right',\n        'bottom-right',\n        'bottom-left'\n      ]\"\n      [preferredPosition]=\"'bottom-right'\"\n      (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n    >\n      <div class=\"content\" [class.includePreset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\n            [optionGroups]=\"\n              (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n            \"\n            [selectedOption]=\"selectedPreset$ | async\"\n            (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          >\n            <ng-template #option let-node=\"node\">\n              <ng-template\n                #self\n                [ngTemplateOutlet]=\"self\"\n                let-isFavorite\n                [ngTemplateOutletContext]=\"{\n                  $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n                }\"\n              >\n                <div class=\"preset\" [class.favorite]=\"isFavorite\">\n                  <div class=\"description\">\n                    <riv-highlight\n                      class=\"title\"\n                      [text]=\"node.title\"\n                      [indices]=\"node.titleHighlightIndices || []\"\n                    ></riv-highlight>\n                    <riv-highlight\n                      class=\"subtitle\"\n                      [text]=\"node.subtitle\"\n                      [indices]=\"node.subtitleHighlightIndices || []\"\n                    ></riv-highlight>\n                  </div>\n                  <button\n                    (click)=\"\n                      setFavorite(node, !isFavorite); $event.stopPropagation()\n                    \"\n                    type=\"button\"\n                  >\n                    <riv-icon\n                      [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n                      [size]=\"16\"\n                      [rivTooltip]=\"'Mark as favorite'\"\n                    ></riv-icon>\n                  </button>\n                </div>\n              </ng-template>\n            </ng-template>\n          </riv-simple-select>\n          <ng-template\n            #self\n            [ngTemplateOutlet]=\"self\"\n            let-favorites\n            [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n          >\n            <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n              <div class=\"shortcuts\">\n                <button\n                  *ngFor=\"let favorite of favorites\"\n                  class=\"shortcut\"\n                  [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n                  (click)=\"userSelectedPreset$.next(favorite)\"\n                  type=\"button\"\n                >\n                  <span class=\"title\">{{ favorite.title }}</span>\n                  <button\n                    (click)=\"setFavorite(favorite, false)\"\n                    [rivTooltip]=\"'Remove favorite'\"\n                    type=\"button\"\n                  >\n                    <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n                  </button>\n                </button>\n              </div>\n            </riv-input-label>\n          </ng-template>\n        </div>\n\n        <div class=\"calendars\">\n          <riv-calendar\n            class=\"left\"\n            [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n            (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n            [displayMin]=\"(min$ | async) || TODAY\"\n            [displayMax]=\"(max$ | async) || TODAY\"\n            [selectableMin]=\"(leftMin$ | async) || TODAY\"\n            [selectableMax]=\"(leftMax$ | async) || TODAY\"\n            [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n            [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n            (dateSelect)=\"userSelectedDate$.next($event)\"\n          ></riv-calendar>\n          <riv-calendar\n            class=\"right\"\n            [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n            (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n            [displayMin]=\"(min$ | async) || TODAY\"\n            [displayMax]=\"(max$ | async) || TODAY\"\n            [selectableMin]=\"(rightMin$ | async) || TODAY\"\n            [selectableMax]=\"(rightMax$ | async) || TODAY\"\n            [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n            (dateSelect)=\"userSelectedDate$.next($event)\"\n          ></riv-calendar>\n        </div>\n\n        <footer class=\"buttons\">\n          <button\n            rivButton\n            [size]=\"'small'\"\n            [variant]=\"'ghost'\"\n            (click)=\"userSelectedDate$.next(undefined)\"\n            type=\"button\"\n          >\n            Clear\n          </button>\n          <button\n            rivButton\n            [size]=\"'small'\"\n            [variant]=\"'primary'\"\n            (click)=\"open$.next(false)\"\n            type=\"button\"\n          >\n            Done\n          </button>\n        </footer>\n      </div>\n    </riv-callout>\n  </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.includePreset{grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]