@rivet-health/design-system 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/date/date.component.mjs +3 -3
- package/esm2020/lib/input/date-range/date-range.component.mjs +3 -3
- package/esm2020/lib/input/single-select/single-select.component.mjs +2 -2
- package/esm2020/lib/modal/callout/callout.component.mjs +4 -3
- package/esm2020/lib/modal/callout/lock-scroll.directive.mjs +69 -0
- package/esm2020/lib/riv.module.mjs +4 -1
- package/fesm2015/rivet-health-design-system.mjs +78 -9
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +78 -9
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/modal/callout/lock-scroll.directive.d.ts +22 -0
- package/lib/riv.module.d.ts +18 -17
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, HostBinding, Pipe, EventEmitter, ViewChild, Output, HostListener, ViewContainerRef,
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, HostBinding, Pipe, Injectable, Directive, EventEmitter, ViewChild, Output, HostListener, ViewContainerRef, Self, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { DatePipe as DatePipe$1, DecimalPipe, CurrencyPipe, PercentPipe, CommonModule } from '@angular/common';
|
|
5
5
|
import { timeYears, timeYear, timeMonths, timeMonth, timeDays, timeDay, timeSunday, timeWeek } from 'd3-time';
|
|
@@ -575,6 +575,73 @@ function originAtPosition(anchor, client, position, offset) {
|
|
|
575
575
|
}
|
|
576
576
|
}
|
|
577
577
|
|
|
578
|
+
class LockScrollContextService {
|
|
579
|
+
constructor() {
|
|
580
|
+
this.stack = 0;
|
|
581
|
+
this.scrollPosition = 0;
|
|
582
|
+
}
|
|
583
|
+
getContext() {
|
|
584
|
+
return this.stack;
|
|
585
|
+
}
|
|
586
|
+
pushContext() {
|
|
587
|
+
return ++this.stack;
|
|
588
|
+
}
|
|
589
|
+
popContext() {
|
|
590
|
+
return --this.stack;
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
LockScrollContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
594
|
+
LockScrollContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollContextService, providedIn: 'root' });
|
|
595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollContextService, decorators: [{
|
|
596
|
+
type: Injectable,
|
|
597
|
+
args: [{ providedIn: 'root' }]
|
|
598
|
+
}] });
|
|
599
|
+
class LockScrollDirective {
|
|
600
|
+
constructor(context) {
|
|
601
|
+
this.context = context;
|
|
602
|
+
this.lock = false;
|
|
603
|
+
}
|
|
604
|
+
ngOnInit() {
|
|
605
|
+
if (this.lock) {
|
|
606
|
+
const oldContext = this.context.getContext();
|
|
607
|
+
const newContext = this.context.pushContext();
|
|
608
|
+
if (oldContext === 0 && newContext === 1) {
|
|
609
|
+
this.lockScroll();
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
ngOnDestroy() {
|
|
614
|
+
if (this.lock) {
|
|
615
|
+
const oldContext = this.context.getContext();
|
|
616
|
+
const newContext = this.context.popContext();
|
|
617
|
+
if (oldContext === 1 && newContext === 0) {
|
|
618
|
+
this.unlockScroll();
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
lockScroll() {
|
|
623
|
+
this.context.scrollPosition = document.documentElement.scrollTop;
|
|
624
|
+
document.body.style.position = 'fixed';
|
|
625
|
+
document.body.style.overflow = 'hidden';
|
|
626
|
+
document.body.style.width = '100%';
|
|
627
|
+
document.body.style.height = '100%';
|
|
628
|
+
document.body.style.top = `${this.context.scrollPosition * -1}px`;
|
|
629
|
+
}
|
|
630
|
+
unlockScroll() {
|
|
631
|
+
document.body.removeAttribute('style');
|
|
632
|
+
document.documentElement.scrollTop = this.context.scrollPosition;
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
LockScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollDirective, deps: [{ token: LockScrollContextService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
636
|
+
LockScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: { lock: ["rivLockScroll", "lock"] }, ngImport: i0 });
|
|
637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollDirective, decorators: [{
|
|
638
|
+
type: Directive,
|
|
639
|
+
args: [{ selector: '[rivLockScroll]' }]
|
|
640
|
+
}], ctorParameters: function () { return [{ type: LockScrollContextService }]; }, propDecorators: { lock: [{
|
|
641
|
+
type: Input,
|
|
642
|
+
args: ['rivLockScroll']
|
|
643
|
+
}] } });
|
|
644
|
+
|
|
578
645
|
// TODO: once we upgrade to Angular 16, this component can be cleaned up with
|
|
579
646
|
// signals instead of lifecycle hooks.
|
|
580
647
|
class CalloutComponent {
|
|
@@ -631,10 +698,10 @@ class CalloutComponent {
|
|
|
631
698
|
}
|
|
632
699
|
}
|
|
633
700
|
CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
634
|
-
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], ngImport: i0, template: "<div\n #scrim\n class=\"scrim\"\n [class.full]=\"isModal\"\n (click)=\"$event.stopPropagation(); scrimClick($event)\"\n>\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
701
|
+
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], ngImport: i0, template: "<div\n #scrim\n class=\"scrim\"\n [class.full]=\"isModal\"\n (click)=\"$event.stopPropagation(); scrimClick($event)\"\n>\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
635
702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, decorators: [{
|
|
636
703
|
type: Component,
|
|
637
|
-
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #scrim\n class=\"scrim\"\n [class.full]=\"isModal\"\n (click)=\"$event.stopPropagation(); scrimClick($event)\"\n>\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
|
|
704
|
+
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #scrim\n class=\"scrim\"\n [class.full]=\"isModal\"\n (click)=\"$event.stopPropagation(); scrimClick($event)\"\n>\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
|
|
638
705
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
|
|
639
706
|
type: Input
|
|
640
707
|
}], isModal: [{
|
|
@@ -1219,10 +1286,10 @@ class SingleSelectComponent extends InputLabelComponent {
|
|
|
1219
1286
|
}
|
|
1220
1287
|
}
|
|
1221
1288
|
SingleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1222
|
-
SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { options: "options", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ selectedOption }\"\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 [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n</ng-template>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes; trackBy: trackBy\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\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);background-color:var(--surface-light-0)}.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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);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)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:
|
|
1289
|
+
SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { options: "options", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ selectedOption }\"\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 [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n</ng-template>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes; trackBy: trackBy\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\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);background-color:var(--surface-light-0)}.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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);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)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}\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: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1223
1290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
1224
1291
|
type: Component,
|
|
1225
|
-
args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ selectedOption }\"\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 [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n</ng-template>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes; trackBy: trackBy\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\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);background-color:var(--surface-light-0)}.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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);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)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:
|
|
1292
|
+
args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ selectedOption }\"\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 [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n >\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n</ng-template>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes; trackBy: trackBy\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\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);background-color:var(--surface-light-0)}.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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);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)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}\n"] }]
|
|
1226
1293
|
}], propDecorators: { options: [{
|
|
1227
1294
|
type: Input
|
|
1228
1295
|
}], selectedOption: [{
|
|
@@ -1690,10 +1757,10 @@ class DateRangeComponent extends InputLabelComponent {
|
|
|
1690
1757
|
}
|
|
1691
1758
|
}
|
|
1692
1759
|
DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1693
|
-
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" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\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]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <riv-callout\n *ngIf=\"open$ | async\"\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <ng-template #presetTpl 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 >\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-single-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true }\"\n (filterQueryChange)=\"presetFilterQuery$.next($event)\"\n [options]=\"(filteredPresetOptions$ | async) || []\"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n [nodeTemplate]=\"presetTpl\"\n ></riv-single-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 >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\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 >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;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)}.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)}.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)}.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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["options", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1760
|
+
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" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\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\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <riv-callout\n *ngIf=\"open$ | async\"\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <ng-template #presetTpl 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 >\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-single-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n (filterQueryChange)=\"presetFilterQuery$.next($event)\"\n [options]=\"(filteredPresetOptions$ | async) || []\"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n [nodeTemplate]=\"presetTpl\"\n ></riv-single-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 >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\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 >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;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)}.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)}.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)}.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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["options", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1694
1761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
1695
1762
|
type: Component,
|
|
1696
|
-
args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\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]=\"'
|
|
1763
|
+
args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\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\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <riv-callout\n *ngIf=\"open$ | async\"\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <ng-template #presetTpl 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 >\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-single-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n (filterQueryChange)=\"presetFilterQuery$.next($event)\"\n [options]=\"(filteredPresetOptions$ | async) || []\"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n [nodeTemplate]=\"presetTpl\"\n ></riv-single-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 >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\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 >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;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)}.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)}.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)}.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"] }]
|
|
1697
1764
|
}], propDecorators: { showPresets: [{
|
|
1698
1765
|
type: Input
|
|
1699
1766
|
}], min: [{
|
|
@@ -1939,10 +2006,10 @@ class DateComponent extends InputLabelComponent {
|
|
|
1939
2006
|
}
|
|
1940
2007
|
}
|
|
1941
2008
|
DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1942
|
-
DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button #trigger class=\"trigger\" (click)=\"open = true\" [disabled]=\"disabled\">\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'
|
|
2009
|
+
DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button #trigger class=\"trigger\" (click)=\"open = true\" [disabled]=\"disabled\">\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</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<riv-callout\n *ngIf=\"open\"\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open = false\"\n>\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open = false\"\n ></riv-calendar>\n </div>\n</riv-callout>\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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{padding:var(--size-large)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "pipe", type: DatePipe, name: "rivDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1943
2010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
|
|
1944
2011
|
type: Component,
|
|
1945
|
-
args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button #trigger class=\"trigger\" (click)=\"open = true\" [disabled]=\"disabled\">\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'
|
|
2012
|
+
args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button #trigger class=\"trigger\" (click)=\"open = true\" [disabled]=\"disabled\">\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</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<riv-callout\n *ngIf=\"open\"\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open = false\"\n>\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open = false\"\n ></riv-calendar>\n </div>\n</riv-callout>\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);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{padding:var(--size-large)}\n"] }]
|
|
1946
2013
|
}], propDecorators: { min: [{
|
|
1947
2014
|
type: Input
|
|
1948
2015
|
}], max: [{
|
|
@@ -3318,6 +3385,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
3318
3385
|
LinkComponent,
|
|
3319
3386
|
LoadingComponent,
|
|
3320
3387
|
LoadingCoverComponent,
|
|
3388
|
+
LockScrollDirective,
|
|
3321
3389
|
MetricComponent,
|
|
3322
3390
|
NumberPipe,
|
|
3323
3391
|
PercentagePipe,
|
|
@@ -3399,6 +3467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3399
3467
|
LinkComponent,
|
|
3400
3468
|
LoadingComponent,
|
|
3401
3469
|
LoadingCoverComponent,
|
|
3470
|
+
LockScrollDirective,
|
|
3402
3471
|
MetricComponent,
|
|
3403
3472
|
NumberPipe,
|
|
3404
3473
|
PercentagePipe,
|