@rivet-health/design-system 40.18.1 → 40.19.0
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/format/pipes/common.mjs +23 -1
- package/esm2020/lib/format/pipes/small-currency.pipe.mjs +4 -16
- package/esm2020/lib/format/pipes/small-number.pipe.mjs +29 -0
- package/esm2020/lib/input/calendar/calendar.component.mjs +1 -1
- package/esm2020/lib/input/date-range/date-range.component.mjs +1 -1
- package/esm2020/lib/input/select/state.mjs +2 -2
- package/esm2020/lib/input/simple-select/simple-select.component.mjs +22 -4
- package/esm2020/lib/riv.module.mjs +6 -1
- package/esm2020/lib/table/table/table/table.component.mjs +1 -1
- package/esm2020/lib/visualization/chart/chart.component.mjs +24 -4
- package/esm2020/lib/visualization/chart/chart.mjs +75 -4
- package/esm2020/lib/visualization/stacked-column/stacked-column.component.mjs +1 -1
- package/esm2020/lib/visualization/time-series/time-series.component.mjs +1 -1
- package/esm2020/public-api.mjs +3 -2
- package/fesm2015/rivet-health-design-system.mjs +170 -38
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +176 -29
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/format/pipes/common.d.ts +5 -0
- package/lib/format/pipes/small-number.pipe.d.ts +8 -0
- package/lib/input/select/state.d.ts +8 -0
- package/lib/input/simple-select/simple-select.component.d.ts +8 -1
- package/lib/riv.module.d.ts +32 -31
- package/lib/visualization/chart/chart.component.d.ts +5 -1
- package/lib/visualization/chart/chart.d.ts +25 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -1
|
@@ -1,2 +1,24 @@
|
|
|
1
1
|
export const NO_DATA_FALLBACK = '-';
|
|
2
|
-
|
|
2
|
+
const MAGNITUDES = [
|
|
3
|
+
{ divisor: 1000000000, suffix: 'B' },
|
|
4
|
+
{ divisor: 1000000, suffix: 'M' },
|
|
5
|
+
{ divisor: 1000, suffix: 'K' },
|
|
6
|
+
{ divisor: 1, suffix: '' },
|
|
7
|
+
];
|
|
8
|
+
export function getMagnitudeTransformInfo(num) {
|
|
9
|
+
const abs = Math.abs(num);
|
|
10
|
+
const index = MAGNITUDES.findIndex(({ divisor }) => abs >= divisor);
|
|
11
|
+
const naturalIndex = index === -1 ? MAGNITUDES.length - 1 : index;
|
|
12
|
+
// Promote to the next magnitude when rounding would otherwise display
|
|
13
|
+
// 1,000 of the current one (e.g. 999,999 → "1M" rather than "1,000K").
|
|
14
|
+
const { divisor, suffix } = naturalIndex > 0 &&
|
|
15
|
+
Math.round(abs / MAGNITUDES[naturalIndex].divisor) >= 1000
|
|
16
|
+
? MAGNITUDES[naturalIndex - 1]
|
|
17
|
+
: MAGNITUDES[naturalIndex];
|
|
18
|
+
return {
|
|
19
|
+
divisor,
|
|
20
|
+
digitInfoDefault: abs / divisor >= 100 ? '1.0-0' : '1.0-2',
|
|
21
|
+
suffix,
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvZm9ybWF0L3BpcGVzL2NvbW1vbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxHQUFHLENBQUM7QUFFcEMsTUFBTSxVQUFVLEdBQUc7SUFDakIsRUFBRSxPQUFPLEVBQUUsVUFBYSxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUU7SUFDdkMsRUFBRSxPQUFPLEVBQUUsT0FBUyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUU7SUFDbkMsRUFBRSxPQUFPLEVBQUUsSUFBSyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUU7SUFDL0IsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLE1BQU0sRUFBRSxFQUFFLEVBQUU7Q0FDbEIsQ0FBQztBQUVYLE1BQU0sVUFBVSx5QkFBeUIsQ0FBQyxHQUFXO0lBS25ELE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDMUIsTUFBTSxLQUFLLEdBQUcsVUFBVSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxPQUFPLENBQUMsQ0FBQztJQUNwRSxNQUFNLFlBQVksR0FBRyxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDbEUsc0VBQXNFO0lBQ3RFLHVFQUF1RTtJQUN2RSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUN2QixZQUFZLEdBQUcsQ0FBQztRQUNoQixJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxVQUFVLENBQUMsWUFBWSxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksSUFBSztRQUN6RCxDQUFDLENBQUMsVUFBVSxDQUFDLFlBQVksR0FBRyxDQUFDLENBQUM7UUFDOUIsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUMvQixPQUFPO1FBQ0wsT0FBTztRQUNQLGdCQUFnQixFQUFFLEdBQUcsR0FBRyxPQUFPLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU87UUFDMUQsTUFBTTtLQUNQLENBQUM7QUFDSixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IE5PX0RBVEFfRkFMTEJBQ0sgPSAnLSc7XG5cbmNvbnN0IE1BR05JVFVERVMgPSBbXG4gIHsgZGl2aXNvcjogMV8wMDBfMDAwXzAwMCwgc3VmZml4OiAnQicgfSxcbiAgeyBkaXZpc29yOiAxXzAwMF8wMDAsIHN1ZmZpeDogJ00nIH0sXG4gIHsgZGl2aXNvcjogMV8wMDAsIHN1ZmZpeDogJ0snIH0sXG4gIHsgZGl2aXNvcjogMSwgc3VmZml4OiAnJyB9LFxuXSBhcyBjb25zdDtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldE1hZ25pdHVkZVRyYW5zZm9ybUluZm8obnVtOiBudW1iZXIpOiB7XG4gIGRpdmlzb3I6IG51bWJlcjtcbiAgZGlnaXRJbmZvRGVmYXVsdDogc3RyaW5nO1xuICBzdWZmaXg6IHN0cmluZztcbn0ge1xuICBjb25zdCBhYnMgPSBNYXRoLmFicyhudW0pO1xuICBjb25zdCBpbmRleCA9IE1BR05JVFVERVMuZmluZEluZGV4KCh7IGRpdmlzb3IgfSkgPT4gYWJzID49IGRpdmlzb3IpO1xuICBjb25zdCBuYXR1cmFsSW5kZXggPSBpbmRleCA9PT0gLTEgPyBNQUdOSVRVREVTLmxlbmd0aCAtIDEgOiBpbmRleDtcbiAgLy8gUHJvbW90ZSB0byB0aGUgbmV4dCBtYWduaXR1ZGUgd2hlbiByb3VuZGluZyB3b3VsZCBvdGhlcndpc2UgZGlzcGxheVxuICAvLyAxLDAwMCBvZiB0aGUgY3VycmVudCBvbmUgKGUuZy4gOTk5LDk5OSDihpIgXCIxTVwiIHJhdGhlciB0aGFuIFwiMSwwMDBLXCIpLlxuICBjb25zdCB7IGRpdmlzb3IsIHN1ZmZpeCB9ID1cbiAgICBuYXR1cmFsSW5kZXggPiAwICYmXG4gICAgTWF0aC5yb3VuZChhYnMgLyBNQUdOSVRVREVTW25hdHVyYWxJbmRleF0uZGl2aXNvcikgPj0gMV8wMDBcbiAgICAgID8gTUFHTklUVURFU1tuYXR1cmFsSW5kZXggLSAxXVxuICAgICAgOiBNQUdOSVRVREVTW25hdHVyYWxJbmRleF07XG4gIHJldHVybiB7XG4gICAgZGl2aXNvcixcbiAgICBkaWdpdEluZm9EZWZhdWx0OiBhYnMgLyBkaXZpc29yID49IDEwMCA/ICcxLjAtMCcgOiAnMS4wLTInLFxuICAgIHN1ZmZpeCxcbiAgfTtcbn1cbiJdfQ==
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CurrencyPipe } from '@angular/common';
|
|
2
2
|
import { Pipe } from '@angular/core';
|
|
3
|
-
import { NO_DATA_FALLBACK } from './common';
|
|
3
|
+
import { getMagnitudeTransformInfo, NO_DATA_FALLBACK } from './common';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export class SmallCurrencyPipe {
|
|
6
6
|
constructor() {
|
|
@@ -11,20 +11,8 @@ export class SmallCurrencyPipe {
|
|
|
11
11
|
return NO_DATA_FALLBACK;
|
|
12
12
|
}
|
|
13
13
|
const num = typeof value == 'string' ? Number.parseFloat(value) : value;
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
return (this.inner.transform(num, undefined, undefined, digitsInfo ?? '1.0-0') ?? NO_DATA_FALLBACK);
|
|
17
|
-
}
|
|
18
|
-
if (magnitude >= 9) {
|
|
19
|
-
return ((this.inner.transform(num / 1000000000, undefined, undefined, digitsInfo ?? num / 1000000000 >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK) + 'B');
|
|
20
|
-
}
|
|
21
|
-
if (magnitude >= 6) {
|
|
22
|
-
return ((this.inner.transform(num / 1000000, undefined, undefined, digitsInfo ?? num / 1000000 >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK) + 'M');
|
|
23
|
-
}
|
|
24
|
-
if (magnitude >= 3) {
|
|
25
|
-
return ((this.inner.transform(num / 1000, undefined, undefined, digitsInfo ?? num / 1000 >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK) + 'K');
|
|
26
|
-
}
|
|
27
|
-
return (this.inner.transform(num, undefined, undefined, digitsInfo ?? num >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK);
|
|
14
|
+
const magTransformInfo = getMagnitudeTransformInfo(num);
|
|
15
|
+
return ((this.inner.transform(num / magTransformInfo.divisor, undefined, undefined, digitsInfo ?? magTransformInfo.digitInfoDefault) ?? NO_DATA_FALLBACK) + magTransformInfo.suffix);
|
|
28
16
|
}
|
|
29
17
|
}
|
|
30
18
|
SmallCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
@@ -33,4 +21,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
33
21
|
type: Pipe,
|
|
34
22
|
args: [{ name: 'rivSmallCurrency' }]
|
|
35
23
|
}] });
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21hbGwtY3VycmVuY3kucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2Zvcm1hdC9waXBlcy9zbWFsbC1jdXJyZW5jeS5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUNwRCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxVQUFVLENBQUM7O0FBR3ZFLE1BQU0sT0FBTyxpQkFBaUI7SUFEOUI7UUFFbUIsVUFBSyxHQUFHLElBQUksWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0tBa0JwRDtJQWpCUSxTQUFTLENBQUMsS0FBOEIsRUFBRSxVQUFtQjtRQUNsRSxJQUFJLEtBQUssS0FBSyxJQUFJLElBQUksS0FBSyxLQUFLLFNBQVMsRUFBRTtZQUN6QyxPQUFPLGdCQUFnQixDQUFDO1NBQ3pCO1FBRUQsTUFBTSxHQUFHLEdBQ1AsT0FBTyxLQUFLLElBQUksUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFDOUQsTUFBTSxnQkFBZ0IsR0FBRyx5QkFBeUIsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN4RCxPQUFPLENBQ0wsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FDbkIsR0FBRyxHQUFHLGdCQUFnQixDQUFDLE9BQU8sRUFDOUIsU0FBUyxFQUNULFNBQVMsRUFDVCxVQUFVLElBQUksZ0JBQWdCLENBQUMsZ0JBQWdCLENBQ2hELElBQUksZ0JBQWdCLENBQUMsR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLENBQ2pELENBQUM7SUFDSixDQUFDOzsrR0FsQlUsaUJBQWlCOzZHQUFqQixpQkFBaUI7NEZBQWpCLGlCQUFpQjtrQkFEN0IsSUFBSTttQkFBQyxFQUFFLElBQUksRUFBRSxrQkFBa0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEN1cnJlbmN5UGlwZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBnZXRNYWduaXR1ZGVUcmFuc2Zvcm1JbmZvLCBOT19EQVRBX0ZBTExCQUNLIH0gZnJvbSAnLi9jb21tb24nO1xuXG5AUGlwZSh7IG5hbWU6ICdyaXZTbWFsbEN1cnJlbmN5JyB9KVxuZXhwb3J0IGNsYXNzIFNtYWxsQ3VycmVuY3lQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHByaXZhdGUgcmVhZG9ubHkgaW5uZXIgPSBuZXcgQ3VycmVuY3lQaXBlKCdlbi11cycpO1xuICBwdWJsaWMgdHJhbnNmb3JtKHZhbHVlPzogbnVtYmVyIHwgc3RyaW5nIHwgbnVsbCwgZGlnaXRzSW5mbz86IHN0cmluZykge1xuICAgIGlmICh2YWx1ZSA9PT0gbnVsbCB8fCB2YWx1ZSA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICByZXR1cm4gTk9fREFUQV9GQUxMQkFDSztcbiAgICB9XG5cbiAgICBjb25zdCBudW06IG51bWJlciA9XG4gICAgICB0eXBlb2YgdmFsdWUgPT0gJ3N0cmluZycgPyBOdW1iZXIucGFyc2VGbG9hdCh2YWx1ZSkgOiB2YWx1ZTtcbiAgICBjb25zdCBtYWdUcmFuc2Zvcm1JbmZvID0gZ2V0TWFnbml0dWRlVHJhbnNmb3JtSW5mbyhudW0pO1xuICAgIHJldHVybiAoXG4gICAgICAodGhpcy5pbm5lci50cmFuc2Zvcm0oXG4gICAgICAgIG51bSAvIG1hZ1RyYW5zZm9ybUluZm8uZGl2aXNvcixcbiAgICAgICAgdW5kZWZpbmVkLFxuICAgICAgICB1bmRlZmluZWQsXG4gICAgICAgIGRpZ2l0c0luZm8gPz8gbWFnVHJhbnNmb3JtSW5mby5kaWdpdEluZm9EZWZhdWx0LFxuICAgICAgKSA/PyBOT19EQVRBX0ZBTExCQUNLKSArIG1hZ1RyYW5zZm9ybUluZm8uc3VmZml4XG4gICAgKTtcbiAgfVxufVxuIl19
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { DecimalPipe } from '@angular/common';
|
|
2
|
+
import { Pipe } from '@angular/core';
|
|
3
|
+
import { getMagnitudeTransformInfo, NO_DATA_FALLBACK } from './common';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class SmallNumberPipe {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.inner = new DecimalPipe('en-us');
|
|
8
|
+
}
|
|
9
|
+
transform(value, digitsInfo) {
|
|
10
|
+
if (value === null || value === undefined) {
|
|
11
|
+
return NO_DATA_FALLBACK;
|
|
12
|
+
}
|
|
13
|
+
const num = typeof value == 'string' ? Number.parseFloat(value) : value;
|
|
14
|
+
const magTransformInfo = getMagnitudeTransformInfo(num);
|
|
15
|
+
return ((this.inner.transform(num / magTransformInfo.divisor,
|
|
16
|
+
// Never show fractions of a whole unit (e.g. 12.3 → "12")
|
|
17
|
+
digitsInfo ??
|
|
18
|
+
(magTransformInfo.divisor === 1
|
|
19
|
+
? '1.0-0'
|
|
20
|
+
: magTransformInfo.digitInfoDefault)) ?? NO_DATA_FALLBACK) + magTransformInfo.suffix);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
SmallNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmallNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
24
|
+
SmallNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SmallNumberPipe, name: "rivSmallNumber" });
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmallNumberPipe, decorators: [{
|
|
26
|
+
type: Pipe,
|
|
27
|
+
args: [{ name: 'rivSmallNumber' }]
|
|
28
|
+
}] });
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21hbGwtbnVtYmVyLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9mb3JtYXQvcGlwZXMvc21hbGwtbnVtYmVyLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzlDLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3BELE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLFVBQVUsQ0FBQzs7QUFHdkUsTUFBTSxPQUFPLGVBQWU7SUFENUI7UUFFbUIsVUFBSyxHQUFHLElBQUksV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0tBb0JuRDtJQW5CUSxTQUFTLENBQUMsS0FBOEIsRUFBRSxVQUFtQjtRQUNsRSxJQUFJLEtBQUssS0FBSyxJQUFJLElBQUksS0FBSyxLQUFLLFNBQVMsRUFBRTtZQUN6QyxPQUFPLGdCQUFnQixDQUFDO1NBQ3pCO1FBRUQsTUFBTSxHQUFHLEdBQ1AsT0FBTyxLQUFLLElBQUksUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFDOUQsTUFBTSxnQkFBZ0IsR0FBRyx5QkFBeUIsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN4RCxPQUFPLENBQ0wsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FDbkIsR0FBRyxHQUFHLGdCQUFnQixDQUFDLE9BQU87UUFDOUIsMERBQTBEO1FBQzFELFVBQVU7WUFDUixDQUFDLGdCQUFnQixDQUFDLE9BQU8sS0FBSyxDQUFDO2dCQUM3QixDQUFDLENBQUMsT0FBTztnQkFDVCxDQUFDLENBQUMsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUMsQ0FDekMsSUFBSSxnQkFBZ0IsQ0FBQyxHQUFHLGdCQUFnQixDQUFDLE1BQU0sQ0FDakQsQ0FBQztJQUNKLENBQUM7OzZHQXBCVSxlQUFlOzJHQUFmLGVBQWU7NEZBQWYsZUFBZTtrQkFEM0IsSUFBSTttQkFBQyxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERlY2ltYWxQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGdldE1hZ25pdHVkZVRyYW5zZm9ybUluZm8sIE5PX0RBVEFfRkFMTEJBQ0sgfSBmcm9tICcuL2NvbW1vbic7XG5cbkBQaXBlKHsgbmFtZTogJ3JpdlNtYWxsTnVtYmVyJyB9KVxuZXhwb3J0IGNsYXNzIFNtYWxsTnVtYmVyUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xuICBwcml2YXRlIHJlYWRvbmx5IGlubmVyID0gbmV3IERlY2ltYWxQaXBlKCdlbi11cycpO1xuICBwdWJsaWMgdHJhbnNmb3JtKHZhbHVlPzogbnVtYmVyIHwgc3RyaW5nIHwgbnVsbCwgZGlnaXRzSW5mbz86IHN0cmluZykge1xuICAgIGlmICh2YWx1ZSA9PT0gbnVsbCB8fCB2YWx1ZSA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICByZXR1cm4gTk9fREFUQV9GQUxMQkFDSztcbiAgICB9XG5cbiAgICBjb25zdCBudW06IG51bWJlciA9XG4gICAgICB0eXBlb2YgdmFsdWUgPT0gJ3N0cmluZycgPyBOdW1iZXIucGFyc2VGbG9hdCh2YWx1ZSkgOiB2YWx1ZTtcbiAgICBjb25zdCBtYWdUcmFuc2Zvcm1JbmZvID0gZ2V0TWFnbml0dWRlVHJhbnNmb3JtSW5mbyhudW0pO1xuICAgIHJldHVybiAoXG4gICAgICAodGhpcy5pbm5lci50cmFuc2Zvcm0oXG4gICAgICAgIG51bSAvIG1hZ1RyYW5zZm9ybUluZm8uZGl2aXNvcixcbiAgICAgICAgLy8gTmV2ZXIgc2hvdyBmcmFjdGlvbnMgb2YgYSB3aG9sZSB1bml0IChlLmcuIDEyLjMg4oaSIFwiMTJcIilcbiAgICAgICAgZGlnaXRzSW5mbyA/P1xuICAgICAgICAgIChtYWdUcmFuc2Zvcm1JbmZvLmRpdmlzb3IgPT09IDFcbiAgICAgICAgICAgID8gJzEuMC0wJ1xuICAgICAgICAgICAgOiBtYWdUcmFuc2Zvcm1JbmZvLmRpZ2l0SW5mb0RlZmF1bHQpLFxuICAgICAgKSA/PyBOT19EQVRBX0ZBTExCQUNLKSArIG1hZ1RyYW5zZm9ybUluZm8uc3VmZml4XG4gICAgKTtcbiAgfVxufVxuIl19
|
|
@@ -288,7 +288,7 @@ export class CalendarComponent {
|
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
290
|
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
291
|
-
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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]=\"state.display.open ? 'ChevronUp' : '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]=\"state.display.open ? 'ChevronUp' : '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; trackBy: trackByDate\"\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", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
291
|
+
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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]=\"state.display.open ? 'ChevronUp' : '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]=\"state.display.open ? 'ChevronUp' : '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; trackBy: trackByDate\"\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", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
292
292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
293
293
|
type: Component,
|
|
294
294
|
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]=\"state.display.open ? 'ChevronUp' : '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]=\"state.display.open ? 'ChevronUp' : '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; trackBy: trackByDate\"\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"] }]
|
|
@@ -200,7 +200,7 @@ export class DateRangeComponent extends InputLabelComponent {
|
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
203
|
-
DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: (distinctValue$ | 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.include-preset]=\"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);background-color:var(--surface-light-0);cursor:pointer}.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-xsmall) calc(var(--base-grid-size) * 1.5)}.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.include-preset{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", "fillColor", "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", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
203
|
+
DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: (distinctValue$ | 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.include-preset]=\"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);background-color:var(--surface-light-0);cursor:pointer}.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-xsmall) calc(var(--base-grid-size) * 1.5)}.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.include-preset{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", "fillColor", "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", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
204
204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
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: (distinctValue$ | 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.include-preset]=\"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);background-color:var(--surface-light-0);cursor:pointer}.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-xsmall) calc(var(--base-grid-size) * 1.5)}.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.include-preset{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"] }]
|