@rivet-health/design-system 3.1.1 → 4.0.1

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.
Files changed (13) hide show
  1. package/esm2020/lib/load/loading-cover/loading-cover.component.mjs +2 -2
  2. package/esm2020/lib/modal/callout/callout.helpers.mjs +7 -4
  3. package/esm2020/lib/visualization/funnel-chart/funnel-chart.component.mjs +1 -1
  4. package/esm2020/lib/visualization/metric/metric.component.mjs +9 -4
  5. package/fesm2015/rivet-health-design-system.mjs +16 -8
  6. package/fesm2015/rivet-health-design-system.mjs.map +1 -1
  7. package/fesm2020/rivet-health-design-system.mjs +16 -8
  8. package/fesm2020/rivet-health-design-system.mjs.map +1 -1
  9. package/lib/modal/callout/callout.helpers.d.ts +1 -0
  10. package/lib/visualization/metric/metric.component.d.ts +6 -1
  11. package/package.json +1 -1
  12. package/styles/tokens/color.css +0 -1
  13. package/styles/tokens/typography.css +47 -1
package/esm2020/lib/load/loading-cover/loading-cover.component.mjs CHANGED
@@ -9,10 +9,10 @@ export class LoadingCoverComponent {
9
9
  }
10
10
  }
11
11
  LoadingCoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingCoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12
- LoadingCoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: { loading: "loading", loadingSize: "loadingSize", errorMessage: "errorMessage" }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index)}.error-icon{font-size:var(--type-5-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12
+ LoadingCoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: { loading: "loading", loadingSize: "loadingSize", errorMessage: "errorMessage" }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13
13
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingCoverComponent, decorators: [{
14
14
  type: Component,
15
- args: [{ selector: 'riv-loading-cover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index)}.error-icon{font-size:var(--type-5-font-size)}\n"] }]
15
+ args: [{ selector: 'riv-loading-cover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"] }]
16
16
  }], propDecorators: { loading: [{
17
17
  type: Input
18
18
  }], loadingSize: [{
package/esm2020/lib/modal/callout/callout.helpers.mjs CHANGED
@@ -27,8 +27,11 @@ export function getOrigin(anchor, client, viewportSize, preferredPosition, allow
27
27
  -1 *
28
28
  Math.min(origin.y, viewportSize.height - (origin.y + client.height), 0);
29
29
  if (currentClippedX > 0 || currentClippedY > 0) {
30
- if (leastClipped > currentClippedX + currentClippedY) {
31
- leastClipped = currentClippedX + currentClippedY;
30
+ const clippedArea = currentClippedX * currentClippedY +
31
+ currentClippedX * (client.height - currentClippedY) +
32
+ currentClippedY * (client.width - currentClippedX);
33
+ if (leastClipped > clippedArea) {
34
+ leastClipped = clippedArea;
32
35
  leastClippedIndex = index;
33
36
  }
34
37
  }
@@ -43,7 +46,7 @@ export function getOrigin(anchor, client, viewportSize, preferredPosition, allow
43
46
  }
44
47
  return { ...origin, position };
45
48
  }
46
- function originAtPosition(anchor, client, position, offset) {
49
+ export function originAtPosition(anchor, client, position, offset) {
47
50
  switch (position) {
48
51
  case 'top-left':
49
52
  return {
@@ -87,4 +90,4 @@ function originAtPosition(anchor, client, position, offset) {
87
90
  };
88
91
  }
89
92
  }
90
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsbG91dC5oZWxwZXJzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvbW9kYWwvY2FsbG91dC9jYWxsb3V0LmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFnQnZELE1BQU0sVUFBVSxTQUFTLENBQ3ZCLE1BQVcsRUFDWCxNQUFrQixFQUNsQixZQUF3QixFQUN4QixpQkFBb0QsRUFDcEQsbUJBQStELElBQUksRUFDbkUsaUJBQTZDLEVBQzdDLGdCQUF3QjtJQUV4QixJQUFJLFFBQVEsR0FBRyxpQkFBaUIsQ0FBQztJQUNqQyxNQUFNLE9BQU8sR0FDWCxDQUFDLGdCQUFnQixJQUFJLGdCQUFnQixDQUFDLE1BQU0sS0FBSyxDQUFDO1FBQ2hELENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxpQkFBaUI7UUFDcEMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDO0lBQ3ZCLElBQUksS0FBSyxHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDdEMsSUFBSSxpQkFBaUIsR0FBRyxLQUFLLENBQUM7SUFDOUIsSUFBSSxNQUFNLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztJQUMxRSxJQUFJLGVBQWUsQ0FBQztJQUNwQixJQUFJLGVBQWUsQ0FBQztJQUNwQixJQUFJLFlBQVksR0FBRyxRQUFRLENBQUM7SUFDNUIsSUFBSSxjQUFjLEdBQUcsS0FBSyxDQUFDO0lBQzNCLGtHQUFrRztJQUNsRyxxRUFBcUU7SUFDckUsS0FDRSxJQUFJLFVBQVUsR0FBRyxDQUFDLEVBQ2xCLFVBQVUsSUFBSSxPQUFPLENBQUMsTUFBTSxJQUFJLENBQUMsY0FBYyxFQUMvQyxVQUFVLEVBQUU7UUFDVixLQUFLO1lBQ0gsaUJBQWlCLEtB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LE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQzthQUNwRCxDQUFDO1FBQ0osS0FBSyxjQUFjO1lBQ2pCLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxDQUFDO2dCQUNYLENBQUMsRUFBRSxNQUFNLENBQUMsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTTthQUNyQyxDQUFDO1FBQ0osS0FBSyxlQUFlO1lBQ2xCLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxDQUFDLEdBQUcsTUFBTSxDQUFDLEtBQUssR0FBRyxDQUFDLEdBQUcsTUFBTSxDQUFDLEtBQUssR0FBRyxDQUFDO2dCQUNqRCxDQUFDLEVBQUUsTUFBTSxDQUFDLENBQUMsR0FBRyxNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU07YUFDckMsQ0FBQztRQUNKLEtBQUssYUFBYTtZQUNoQixPQUFPO2dCQUNMLENBQUMsRUFBRSxNQUFNLENBQUMsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUs7Z0JBQ3pDLENBQUMsRUFBRSxNQUFNLENBQUMsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTTthQUNyQyxDQUFDO1FBQ0osS0FBSyxhQUFhO1lBQ2hCLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxDQUFDLEdBQUcsTUFBTSxDQUFDLEtBQUssR0FBRyxNQUFNO2dCQUNuQyxDQUFDLEVBQUUsTUFBTSxDQUFDLENBQUMsR0FBRyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsR0FBRyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUM7YUFDcEQsQ0FBQztLQUNMO0FBQ0gsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENhbGxvdXRDb21wb25lbnQgfSBmcm9tICcuL2NhbGxvdXQuY29tcG9uZW50JztcblxudHlwZSBEaW1lbnNpb25zID0ge1xuICB3aWR0aDogbnVtYmVyO1xuICBoZWlnaHQ6IG51bWJlcjtcbn07XG5cbnR5cGUgUG9pbnQgPSB7XG4gIHg6IG51bWJlcjtcbiAgeTogbnVtYmVyO1xufTtcblxuZXhwb3J0IHR5cGUgQm94ID0gUG9pbnQgJiBEaW1lbnNpb25zO1xuXG5leHBvcnQgdHlwZSBBbmNob3IgPSBQb2ludCAmIHsgcG9zaXRpb246IENhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbiB9O1xuXG5leHBvcnQgZnVuY3Rpb24gZ2V0T3JpZ2luKFxuICBhbmNob3I6IEJveCxcbiAgY2xpZW50OiBEaW1lbnNpb25zLFxuICB2aWV3cG9ydFNpemU6IERpbWVuc2lvbnMsXG4gIHByZWZlcnJlZFBvc2l0aW9uOiBDYWxsb3V0Q29tcG9uZW50LkFuY2hvcmVkUG9zaXRpb24sXG4gIGFsbG93ZWRQb3NpdGlvbnM6IENhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbltdIHwgbnVsbCA9IG51bGwsXG4gIGZhbGxiYWNrRGlyZWN0aW9uOiBDYWxsb3V0Q29tcG9uZW50LkRpcmVjdGlvbixcbiAgYWRkaXRpb25hbE9mZnNldDogbnVtYmVyLFxuKTogQW5jaG9yIHtcbiAgbGV0IHBvc2l0aW9uID0gcHJlZmVycmVkUG9zaXRpb247XG4gIGNvbnN0IGFsbG93ZWQgPVxuICAgICFhbGxvd2VkUG9zaXRpb25zIHx8IGFsbG93ZWRQb3NpdGlvbnMubGVuZ3RoID09PSAwXG4gICAgICA/IENhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbnNcbiAgICAgIDogYWxsb3dlZFBvc2l0aW9ucztcbiAgbGV0IGluZGV4ID0gYWxsb3dlZC5pbmRleE9mKHBvc2l0aW9uKTtcbiAgbGV0IGxlYXN0Q2xpcHBlZEluZGV4ID0gaW5kZXg7XG4gIGxldCBvcmlnaW4gPSBvcmlnaW5BdFBvc2l0aW9uKGFuY2hvciwgY2xpZW50LCBwb3NpdGlvbiwgYWRkaXRpb25hbE9mZnNldCk7XG4gIGxldCBjdXJyZW50Q2xpcHBlZFg7XG4gIGxldCBjdXJyZW50Q2xpcHBlZFk7XG4gIGxldCBsZWFzdENsaXBwZWQgPSBJbmZpbml0eTtcbiAgbGV0IGZvdW5kVW5jbGlwcGVkID0gZmFsc2U7XG4gIC8vIEl0ZXJhdGUgdGhyb3VnaCBhbGxvd2VkIHBvc2l0aW9ucy4gVGhlIGZpcnN0IG9uZSB3ZSBmaW5kIHRoYXQgZG9lc24ndCBjbGlwIG91dCBvZiB2aWV3LCB3ZSB1c2UuXG4gIC8vIElmIGFsbCBvZiB0aGUgcG9zaXRpb25zIGNsaXAsIHVzZSB0aGUgb25lIHdoaWNoIGNsaXBwZWQgdGhlIGxlYXN0LlxuICBmb3IgKFxuICAgIGxldCBjaGVja0NvdW50ID0gMDtcbiAgICBjaGVja0NvdW50IDw9IGFsbG93ZWQubGVuZ3RoICYmICFmb3VuZFVuY2xpcHBlZDtcbiAgICBjaGVja0NvdW50KyssXG4gICAgICBpbmRleCA9XG4gICAgICAgIGZhbGxiYWNrRGlyZWN0aW9uID09PSAnY2xvY2t3aXNlJ1xuICAgICAgICAgID8gKGluZGV4ICsgMSkgJSBhbGxvd2VkLmxlbmd0aFxuICAgICAgICAgIDogKGluZGV4IC0gMSArIGFsbG93ZWQubGVuZ3RoKSAlIGFsbG93ZWQubGVuZ3RoXG4gICkge1xuICAgIHBvc2l0aW9uID0gYWxsb3dlZFtpbmRleF07XG4gICAgb3JpZ2luID0gb3JpZ2luQXRQb3NpdGlvbihhbmNob3IsIGNsaWVudCwgcG9zaXRpb24sIGFkZGl0aW9uYWxPZmZzZXQpO1xuICAgIGN1cnJlbnRDbGlwcGVkWCA9XG4gICAgICAtMSAqXG4gICAgICBNYXRoLm1pbihvcmlnaW4ueCwgdmlld3BvcnRTaXplLndpZHRoIC0gKG9yaWdpbi54ICsgY2xpZW50LndpZHRoKSwgMCk7XG4gICAgY3VycmVudENsaXBwZWRZID1cbiAgICAgIC0xICpcbiAgICAgIE1hdGgubWluKG9yaWdpbi55LCB2aWV3cG9ydFNpemUuaGVpZ2h0IC0gKG9yaWdpbi55ICsgY2xpZW50LmhlaWdodCksIDApO1xuICAgIGlmIChjdXJyZW50Q2xpcHBlZFggPiAwIHx8IGN1cnJlbnRDbGlwcGVkWSA+IDApIHtcbiAgICAgIGlmIChsZWFzdENsaXBwZWQgPiBjdXJyZW50Q2xpcHBlZFggKyBjdXJyZW50Q2xpcHBlZFkpIHtcbiAgICAgICAgbGVhc3RDbGlwcGVkID0gY3VycmVudENsaXBwZWRYICsgY3VycmVudENsaXBwZWRZO1xuICAgICAgICBsZWFzdENsaXBwZWRJbmRleCA9IGluZGV4O1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICBmb3VuZFVuY2xpcHBlZCA9IHRydWU7XG4gICAgfVxuICB9XG4gIGlmICghZm91bmRVbmNsaXBwZWQpIHtcbiAgICBwb3NpdGlvbiA9IGFsbG93ZWRbbGVhc3RDbGlwcGVkSW5kZXhdO1xuICAgIG9yaWdpbiA9IG9yaWdpbkF0UG9zaXRpb24oYW5jaG9yLCBjbGllbnQsIHBvc2l0aW9uLCBhZGRpdGlvbmFsT2Zmc2V0KTtcbiAgICBvcmlnaW4ueSA9IG9yaWdpbi55IDwgMCA/IDQgOiBvcmlnaW4ueTtcbiAgfVxuICByZXR1cm4geyAuLi5vcmlnaW4sIHBvc2l0aW9uIH07XG59XG5cbmZ1bmN0aW9uIG9yaWdpbkF0UG9zaXRpb24oXG4gIGFuY2hvcjogQm94LFxuICBjbGllbnQ6IERpbWVuc2lvbnMsXG4gIHBvc2l0aW9uOiBDYWxsb3V0Q29tcG9uZW50LkFuY2hvcmVkUG9zaXRpb24sXG4gIG9mZnNldDogbnVtYmVyLFxuKTogUG9pbnQge1xuICBzd2l0Y2ggKHBvc2l0aW9uKSB7XG4gICAgY2FzZSAndG9wLWxlZnQnOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgeDogYW5jaG9yLnggKyBhbmNob3Iud2lkdGggLSBjbGllbnQud2lkdGgsXG4gICAgICAgIHk6IGFuY2hvci55IC0gY2xpZW50LmhlaWdodCAtIG9mZnNldCxcbiAgICAgIH07XG4gICAgY2FzZSAndG9wLWNlbnRlcic6XG4gICAgICByZXR1cm4ge1xuICAgICAgICB4OiBhbmNob3IueCArIGFuY2hvci53aWR0aCAvIDIgLSBjbGllbnQud2lkdGggLyAyLFxuICAgICAgICB5OiBhbmNob3IueSAtIGNsaWVudC5oZWlnaHQgLSBvZmZzZXQsXG4gICAgICB9O1xuICAgIGNhc2UgJ3RvcC1yaWdodCc6XG4gICAgICByZXR1cm4ge1xuICAgICAgICB4OiBhbmNob3IueCxcbiAgICAgICAgeTogYW5jaG9yLnkgLSBjbGllbnQuaGVpZ2h0IC0gb2Zmc2V0LFxuICAgICAgfTtcbiAgICBjYXNlICdjZW50ZXItcmlnaHQnOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgeDogYW5jaG9yLnggKyBhbmNob3Iud2lkdGggKyBvZmZzZXQsXG4gICAgICAgIHk6IGFuY2hvci55ICsgYW5jaG9yLmhlaWdodCAvIDIgLSBjbGllbnQuaGVpZ2h0IC8gMixcbiAgICAgIH07XG4gICAgY2FzZSAnYm90dG9tLXJpZ2h0JzpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIHg6IGFuY2hvci54LFxuICAgICAgICB5OiBhbmNob3IueSArIGFuY2hvci5oZWlnaHQgKyBvZmZzZXQsXG4gICAgICB9O1xuICAgIGNhc2UgJ2JvdHRvbS1jZW50ZXInOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgeDogYW5jaG9yLnggKyBhbmNob3Iud2lkdGggLyAyIC0gY2xpZW50LndpZHRoIC8gMixcbiAgICAgICAgeTogYW5jaG9yLnkgKyBhbmNob3IuaGVpZ2h0ICsgb2Zmc2V0LFxuICAgICAgfTtcbiAgICBjYXNlICdib3R0b20tbGVmdCc6XG4gICAgICByZXR1cm4ge1xuICAgICAgICB4OiBhbmNob3IueCArIGFuY2hvci53aWR0aCAtIGNsaWVudC53aWR0aCxcbiAgICAgICAgeTogYW5jaG9yLnkgKyBhbmNob3IuaGVpZ2h0ICsgb2Zmc2V0LFxuICAgICAgfTtcbiAgICBjYXNlICdjZW50ZXItbGVmdCc6XG4gICAgICByZXR1cm4ge1xuICAgICAgICB4OiBhbmNob3IueCAtIGNsaWVudC53aWR0aCAtIG9mZnNldCxcbiAgICAgICAgeTogYW5jaG9yLnkgKyBhbmNob3IuaGVpZ2h0IC8gMiAtIGNsaWVudC5oZWlnaHQgLyAyLFxuICAgICAgfTtcbiAgfVxufVxuIl19
93
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsbG91dC5oZWxwZXJzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvbW9kYWwvY2FsbG91dC9jYWxsb3V0LmhlbHBlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFnQnZELE1BQU0sVUFBVSxTQUFTLENBQ3ZCLE1BQVcsRUFDWCxNQUFrQixFQUNsQixZQUF3QixFQUN4QixpQkFBb0QsRUFDcEQsbUJBQStELElBQUksRUFDbkUsaUJBQTZDLEVBQzdDLGdCQUF3QjtJQUV4QixJQUFJLFFBQVEsR0FBRyxpQkFBaUIsQ0FBQztJQUNqQyxNQUFNLE9BQU8sR0FDWCxDQUFDLGdCQUFnQixJQUFJLGdCQUFnQixDQUFDLE1BQU0sS0FBSyxDQUFDO1FBQ2hELENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxpQkFBaUI7UUFDcEMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDO0lBQ3ZCLElBQUksS0FBSyxHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDdEMsSUFBSSxpQkFBaUIsR0FBRyxLQUFLLENBQUM7SUFDOUIsSUFBSSxNQUFNLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztJQUMxRSxJQUFJLGVBQWUsQ0FBQztJQUNwQixJQUFJLGVBQWUsQ0FBQztJQUNwQixJQUFJLFlBQVksR0FBRyxRQUFRLENBQUM7SUFDNUIsSUFBSSxjQUFjLEdBQUcsS0FBSyxDQUFDO0lBQzNCLGtHQUFrRztJQUNsRyxxRUFBcUU7SUFDckUsS0FDRSxJQUFJLFVBQVUsR0FBRyxDQUFDLEVBQ2xCLFVBQVUsSUFBSSxPQUFPLENBQUMsTUFBTSxJQUFJLENBQUMsY0FBYyxFQUMvQyxVQUFVLEVBQUU7UUFDVixLQUFLO1lBQ0gsaUJBQWlCLEtB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Q29udGVudCI6WyJpbXBvcnQgeyBDYWxsb3V0Q29tcG9uZW50IH0gZnJvbSAnLi9jYWxsb3V0LmNvbXBvbmVudCc7XG5cbnR5cGUgRGltZW5zaW9ucyA9IHtcbiAgd2lkdGg6IG51bWJlcjtcbiAgaGVpZ2h0OiBudW1iZXI7XG59O1xuXG50eXBlIFBvaW50ID0ge1xuICB4OiBudW1iZXI7XG4gIHk6IG51bWJlcjtcbn07XG5cbmV4cG9ydCB0eXBlIEJveCA9IFBvaW50ICYgRGltZW5zaW9ucztcblxuZXhwb3J0IHR5cGUgQW5jaG9yID0gUG9pbnQgJiB7IHBvc2l0aW9uOiBDYWxsb3V0Q29tcG9uZW50LkFuY2hvcmVkUG9zaXRpb24gfTtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldE9yaWdpbihcbiAgYW5jaG9yOiBCb3gsXG4gIGNsaWVudDogRGltZW5zaW9ucyxcbiAgdmlld3BvcnRTaXplOiBEaW1lbnNpb25zLFxuICBwcmVmZXJyZWRQb3NpdGlvbjogQ2FsbG91dENvbXBvbmVudC5BbmNob3JlZFBvc2l0aW9uLFxuICBhbGxvd2VkUG9zaXRpb25zOiBDYWxsb3V0Q29tcG9uZW50LkFuY2hvcmVkUG9zaXRpb25bXSB8IG51bGwgPSBudWxsLFxuICBmYWxsYmFja0RpcmVjdGlvbjogQ2FsbG91dENvbXBvbmVudC5EaXJlY3Rpb24sXG4gIGFkZGl0aW9uYWxPZmZzZXQ6IG51bWJlcixcbik6IEFuY2hvciB7XG4gIGxldCBwb3NpdGlvbiA9IHByZWZlcnJlZFBvc2l0aW9uO1xuICBjb25zdCBhbGxvd2VkID1cbiAgICAhYWxsb3dlZFBvc2l0aW9ucyB8fCBhbGxvd2VkUG9zaXRpb25zLmxlbmd0aCA9PT0gMFxuICAgICAgPyBDYWxsb3V0Q29tcG9uZW50LkFuY2hvcmVkUG9zaXRpb25zXG4gICAgICA6IGFsbG93ZWRQb3NpdGlvbnM7XG4gIGxldCBpbmRleCA9IGFsbG93ZWQuaW5kZXhPZihwb3NpdGlvbik7XG4gIGxldCBsZWFzdENsaXBwZWRJbmRleCA9IGluZGV4O1xuICBsZXQgb3JpZ2luID0gb3JpZ2luQXRQb3NpdGlvbihhbmNob3IsIGNsaWVudCwgcG9zaXRpb24sIGFkZGl0aW9uYWxPZmZzZXQpO1xuICBsZXQgY3VycmVudENsaXBwZWRYO1xuICBsZXQgY3VycmVudENsaXBwZWRZO1xuICBsZXQgbGVhc3RDbGlwcGVkID0gSW5maW5pdHk7XG4gIGxldCBmb3VuZFVuY2xpcHBlZCA9IGZhbHNlO1xuICAvLyBJdGVyYXRlIHRocm91Z2ggYWxsb3dlZCBwb3NpdGlvbnMuIFRoZSBmaXJzdCBvbmUgd2UgZmluZCB0aGF0IGRvZXNuJ3QgY2xpcCBvdXQgb2Ygdmlldywgd2UgdXNlLlxuICAvLyBJZiBhbGwgb2YgdGhlIHBvc2l0aW9ucyBjbGlwLCB1c2UgdGhlIG9uZSB3aGljaCBjbGlwcGVkIHRoZSBsZWFzdC5cbiAgZm9yIChcbiAgICBsZXQgY2hlY2tDb3VudCA9IDA7XG4gICAgY2hlY2tDb3VudCA8PSBhbGxvd2VkLmxlbmd0aCAmJiAhZm91bmRVbmNsaXBwZWQ7XG4gICAgY2hlY2tDb3VudCsrLFxuICAgICAgaW5kZXggPVxuICAgICAgICBmYWxsYmFja0RpcmVjdGlvbiA9PT0gJ2Nsb2Nrd2lzZSdcbiAgICAgICAgICA/IChpbmRleCArIDEpICUgYWxsb3dlZC5sZW5ndGhcbiAgICAgICAgICA6IChpbmRleCAtIDEgKyBhbGxvd2VkLmxlbmd0aCkgJSBhbGxvd2VkLmxlbmd0aFxuICApIHtcbiAgICBwb3NpdGlvbiA9IGFsbG93ZWRbaW5kZXhdO1xuICAgIG9yaWdpbiA9IG9yaWdpbkF0UG9zaXRpb24oYW5jaG9yLCBjbGllbnQsIHBvc2l0aW9uLCBhZGRpdGlvbmFsT2Zmc2V0KTtcbiAgICBjdXJyZW50Q2xpcHBlZFggPVxuICAgICAgLTEgKlxuICAgICAgTWF0aC5taW4ob3JpZ2luLngsIHZpZXdwb3J0U2l6ZS53aWR0aCAtIChvcmlnaW4ueCArIGNsaWVudC53aWR0aCksIDApO1xuICAgIGN1cnJlbnRDbGlwcGVkWSA9XG4gICAgICAtMSAqXG4gICAgICBNYXRoLm1pbihvcmlnaW4ueSwgdmlld3BvcnRTaXplLmhlaWdodCAtIChvcmlnaW4ueSArIGNsaWVudC5oZWlnaHQpLCAwKTtcbiAgICBpZiAoY3VycmVudENsaXBwZWRYID4gMCB8fCBjdXJyZW50Q2xpcHBlZFkgPiAwKSB7XG4gICAgICBjb25zdCBjbGlwcGVkQXJlYSA9XG4gICAgICAgIGN1cnJlbnRDbGlwcGVkWCAqIGN1cnJlbnRDbGlwcGVkWSArXG4gICAgICAgIGN1cnJlbnRDbGlwcGVkWCAqIChjbGllbnQuaGVpZ2h0IC0gY3VycmVudENsaXBwZWRZKSArXG4gICAgICAgIGN1cnJlbnRDbGlwcGVkWSAqIChjbGllbnQud2lkdGggLSBjdXJyZW50Q2xpcHBlZFgpO1xuICAgICAgaWYgKGxlYXN0Q2xpcHBlZCA+IGNsaXBwZWRBcmVhKSB7XG4gICAgICAgIGxlYXN0Q2xpcHBlZCA9IGNsaXBwZWRBcmVhO1xuICAgICAgICBsZWFzdENsaXBwZWRJbmRleCA9IGluZGV4O1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICBmb3VuZFVuY2xpcHBlZCA9IHRydWU7XG4gICAgfVxuICB9XG4gIGlmICghZm91bmRVbmNsaXBwZWQpIHtcbiAgICBwb3NpdGlvbiA9IGFsbG93ZWRbbGVhc3RDbGlwcGVkSW5kZXhdO1xuICAgIG9yaWdpbiA9IG9yaWdpbkF0UG9zaXRpb24oYW5jaG9yLCBjbGllbnQsIHBvc2l0aW9uLCBhZGRpdGlvbmFsT2Zmc2V0KTtcbiAgICBvcmlnaW4ueSA9IG9yaWdpbi55IDwgMCA/IDQgOiBvcmlnaW4ueTtcbiAgfVxuICByZXR1cm4geyAuLi5vcmlnaW4sIHBvc2l0aW9uIH07XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBvcmlnaW5BdFBvc2l0aW9uKFxuICBhbmNob3I6IEJveCxcbiAgY2xpZW50OiBEaW1lbnNpb25zLFxuICBwb3NpdGlvbjogQ2FsbG91dENvbXBvbmVudC5BbmNob3JlZFBvc2l0aW9uLFxuICBvZmZzZXQ6IG51bWJlcixcbik6IFBvaW50IHtcbiAgc3dpdGNoIChwb3NpdGlvbikge1xuICAgIGNhc2UgJ3RvcC1sZWZ0JzpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIHg6IGFuY2hvci54ICsgYW5jaG9yLndpZHRoIC0gY2xpZW50LndpZHRoLFxuICAgICAgICB5OiBhbmNob3IueSAtIGNsaWVudC5oZWlnaHQgLSBvZmZzZXQsXG4gICAgICB9O1xuICAgIGNhc2UgJ3RvcC1jZW50ZXInOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgeDogYW5jaG9yLnggKyBhbmNob3Iud2lkdGggLyAyIC0gY2xpZW50LndpZHRoIC8gMixcbiAgICAgICAgeTogYW5jaG9yLnkgLSBjbGllbnQuaGVpZ2h0IC0gb2Zmc2V0LFxuICAgICAgfTtcbiAgICBjYXNlICd0b3AtcmlnaHQnOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgeDogYW5jaG9yLngsXG4gICAgICAgIHk6IGFuY2hvci55IC0gY2xpZW50LmhlaWdodCAtIG9mZnNldCxcbiAgICAgIH07XG4gICAgY2FzZSAnY2VudGVyLXJpZ2h0JzpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIHg6IGFuY2hvci54ICsgYW5jaG9yLndpZHRoICsgb2Zmc2V0LFxuICAgICAgICB5OiBhbmNob3IueSArIGFuY2hvci5oZWlnaHQgLyAyIC0gY2xpZW50LmhlaWdodCAvIDIsXG4gICAgICB9O1xuICAgIGNhc2UgJ2JvdHRvbS1yaWdodCc6XG4gICAgICByZXR1cm4ge1xuICAgICAgICB4OiBhbmNob3IueCxcbiAgICAgICAgeTogYW5jaG9yLnkgKyBhbmNob3IuaGVpZ2h0ICsgb2Zmc2V0LFxuICAgICAgfTtcbiAgICBjYXNlICdib3R0b20tY2VudGVyJzpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIHg6IGFuY2hvci54ICsgYW5jaG9yLndpZHRoIC8gMiAtIGNsaWVudC53aWR0aCAvIDIsXG4gICAgICAgIHk6IGFuY2hvci55ICsgYW5jaG9yLmhlaWdodCArIG9mZnNldCxcbiAgICAgIH07XG4gICAgY2FzZSAnYm90dG9tLWxlZnQnOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgeDogYW5jaG9yLnggKyBhbmNob3Iud2lkdGggLSBjbGllbnQud2lkdGgsXG4gICAgICAgIHk6IGFuY2hvci55ICsgYW5jaG9yLmhlaWdodCArIG9mZnNldCxcbiAgICAgIH07XG4gICAgY2FzZSAnY2VudGVyLWxlZnQnOlxuICAgICAgcmV0dXJuIHtcbiAgICAgICAgeDogYW5jaG9yLnggLSBjbGllbnQud2lkdGggLSBvZmZzZXQsXG4gICAgICAgIHk6IGFuY2hvci55ICsgYW5jaG9yLmhlaWdodCAvIDIgLSBjbGllbnQuaGVpZ2h0IC8gMixcbiAgICAgIH07XG4gIH1cbn1cbiJdfQ==
package/esm2020/lib/visualization/funnel-chart/funnel-chart.component.mjs CHANGED
@@ -55,7 +55,7 @@ export class FunnelChartComponent {
55
55
  }
56
56
  }
57
57
  FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
58
- FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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.MetricComponent, selector: "riv-metric", inputs: ["label", "value", "card", "help"] }, { kind: "component", type: i3.TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
58
+ FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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.MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "card", "help"] }, { kind: "component", type: i3.TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
59
59
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, decorators: [{
60
60
  type: Component,
61
61
  args: [{ selector: 'riv-funnel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\n"] }]
package/esm2020/lib/visualization/metric/metric.component.mjs CHANGED
@@ -6,22 +6,27 @@ export class MetricComponent {
6
6
  constructor() {
7
7
  this.label = '';
8
8
  this.value = '';
9
- // Variations
9
+ this.size = 'medium';
10
10
  this.card = false;
11
11
  }
12
12
  }
13
13
  MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14
- MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", card: "card", help: "help" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.HelpComponent, selector: "riv-help", inputs: ["help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14
+ MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", card: "card", help: "help" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.HelpComponent, selector: "riv-help", inputs: ["help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
15
15
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, decorators: [{
16
16
  type: Component,
17
- args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"] }]
17
+ args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"] }]
18
18
  }], propDecorators: { label: [{
19
19
  type: Input
20
20
  }], value: [{
21
21
  type: Input
22
+ }], size: [{
23
+ type: Input
22
24
  }], card: [{
23
25
  type: Input
24
26
  }], help: [{
25
27
  type: Input
26
28
  }] } });
27
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL3Zpc3VhbGl6YXRpb24vbWV0cmljL21ldHJpYy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL21ldHJpYy9tZXRyaWMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRMUUsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFRRSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBR25CLFVBQUssR0FBVyxFQUFFLENBQUM7UUFFbkIsYUFBYTtRQUViLFNBQUksR0FBWSxLQUFLLENBQUM7S0FJdkI7OzRHQWJZLGVBQWU7Z0dBQWYsZUFBZSwwSENSNUIsMFlBWUE7MkZESmEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLG1CQUdMLHVCQUF1QixDQUFDLE1BQU07OEJBSS9DLEtBQUs7c0JBREosS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBS04sSUFBSTtzQkFESCxLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1tZXRyaWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbWV0cmljLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWV0cmljLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIGxhYmVsOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKVxuICB2YWx1ZTogc3RyaW5nID0gJyc7XG5cbiAgLy8gVmFyaWF0aW9uc1xuICBASW5wdXQoKVxuICBjYXJkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgaGVscD86IHN0cmluZztcbn1cbiIsIjxkaXYgKm5nSWY9XCJjYXJkOyBlbHNlIGNvbnRlbnRcIiBjbGFzcz1cImNhcmRcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuPG5nLXRlbXBsYXRlICNjb250ZW50PlxuICA8ZGl2IGNsYXNzPVwibGFiZWxcIj5cbiAgICB7eyBsYWJlbCB9fSA8c3BhbiAqbmdJZj1cImhlbHBcIj48cml2LWhlbHAgW2hlbHBdPVwiaGVscFwiPjwvcml2LWhlbHA+PC9zcGFuPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwidmFsdWVcIj57eyB2YWx1ZSB9fTwvZGl2PlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
29
+ (function (MetricComponent) {
30
+ MetricComponent.Sizes = ['small', 'medium', 'large'];
31
+ })(MetricComponent || (MetricComponent = {}));
32
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL3Zpc3VhbGl6YXRpb24vbWV0cmljL21ldHJpYy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL21ldHJpYy9tZXRyaWMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRMUUsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFRRSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBR25CLFVBQUssR0FBVyxFQUFFLENBQUM7UUFHbkIsU0FBSSxHQUF5QixRQUFRLENBQUM7UUFHdEMsU0FBSSxHQUFZLEtBQUssQ0FBQztLQUl2Qjs7NEdBZlksZUFBZTtnR0FBZixlQUFlLHdJQ1I1Qiw2WkFZQTsyRkRKYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLFlBQVksbUJBR0wsdUJBQXVCLENBQUMsTUFBTTs4QkFJL0MsS0FBSztzQkFESixLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSzs7QUFJUixXQUFpQixlQUFlO0lBQ2pCLHFCQUFLLEdBQUcsQ0FBQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE9BQU8sQ0FBVSxDQUFDO0FBRTdELENBQUMsRUFIZ0IsZUFBZSxLQUFmLGVBQWUsUUFHL0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdyaXYtbWV0cmljJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21ldHJpYy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21ldHJpYy5jb21wb25lbnQuY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBNZXRyaWNDb21wb25lbnQge1xuICBASW5wdXQoKVxuICBsYWJlbDogc3RyaW5nID0gJyc7XG5cbiAgQElucHV0KClcbiAgdmFsdWU6IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIHNpemU6IE1ldHJpY0NvbXBvbmVudC5TaXplID0gJ21lZGl1bSc7XG5cbiAgQElucHV0KClcbiAgY2FyZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGhlbHA/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBuYW1lc3BhY2UgTWV0cmljQ29tcG9uZW50IHtcbiAgZXhwb3J0IGNvbnN0IFNpemVzID0gWydzbWFsbCcsICdtZWRpdW0nLCAnbGFyZ2UnXSBhcyBjb25zdDtcbiAgZXhwb3J0IHR5cGUgU2l6ZSA9ICh0eXBlb2YgU2l6ZXMpW251bWJlcl07XG59XG4iLCI8ZGl2ICpuZ0lmPVwiY2FyZDsgZWxzZSBjb250ZW50XCIgY2xhc3M9XCJjYXJkXCI+XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG48L2Rpdj5cbjxuZy10ZW1wbGF0ZSAjY29udGVudD5cbiAgPGRpdiBjbGFzcz1cImxhYmVsXCI+XG4gICAge3sgbGFiZWwgfX0gPHNwYW4gKm5nSWY9XCJoZWxwXCI+PHJpdi1oZWxwIFtoZWxwXT1cImhlbHBcIj48L3Jpdi1oZWxwPjwvc3Bhbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgPGRpdiBjbGFzcz1cInZhbHVlXCIgW25nQ2xhc3NdPVwic2l6ZVwiPnt7IHZhbHVlIH19PC9kaXY+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
package/fesm2015/rivet-health-design-system.mjs CHANGED
@@ -516,8 +516,11 @@ function getOrigin(anchor, client, viewportSize, preferredPosition, allowedPosit
516
516
  -1 *
517
517
  Math.min(origin.y, viewportSize.height - (origin.y + client.height), 0);
518
518
  if (currentClippedX > 0 || currentClippedY > 0) {
519
- if (leastClipped > currentClippedX + currentClippedY) {
520
- leastClipped = currentClippedX + currentClippedY;
519
+ const clippedArea = currentClippedX * currentClippedY +
520
+ currentClippedX * (client.height - currentClippedY) +
521
+ currentClippedY * (client.width - currentClippedX);
522
+ if (leastClipped > clippedArea) {
523
+ leastClipped = clippedArea;
521
524
  leastClippedIndex = index;
522
525
  }
523
526
  }
@@ -1232,10 +1235,10 @@ class LoadingCoverComponent {
1232
1235
  }
1233
1236
  }
1234
1237
  LoadingCoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingCoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1235
- LoadingCoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: { loading: "loading", loadingSize: "loadingSize", errorMessage: "errorMessage" }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index)}.error-icon{font-size:var(--type-5-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1238
+ LoadingCoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: { loading: "loading", loadingSize: "loadingSize", errorMessage: "errorMessage" }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1236
1239
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingCoverComponent, decorators: [{
1237
1240
  type: Component,
1238
- args: [{ selector: 'riv-loading-cover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index)}.error-icon{font-size:var(--type-5-font-size)}\n"] }]
1241
+ args: [{ selector: 'riv-loading-cover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div *ngIf=\"errorMessage\" class=\"cover\">\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"] }]
1239
1242
  }], propDecorators: { loading: [{
1240
1243
  type: Input
1241
1244
  }], loadingSize: [{
@@ -2228,24 +2231,29 @@ class MetricComponent {
2228
2231
  constructor() {
2229
2232
  this.label = '';
2230
2233
  this.value = '';
2231
- // Variations
2234
+ this.size = 'medium';
2232
2235
  this.card = false;
2233
2236
  }
2234
2237
  }
2235
2238
  MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2236
- MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", card: "card", help: "help" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2239
+ MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", card: "card", help: "help" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: HelpComponent, selector: "riv-help", inputs: ["help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2237
2240
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, decorators: [{
2238
2241
  type: Component,
2239
- args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"] }]
2242
+ args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\">{{ value }}</div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"] }]
2240
2243
  }], propDecorators: { label: [{
2241
2244
  type: Input
2242
2245
  }], value: [{
2243
2246
  type: Input
2247
+ }], size: [{
2248
+ type: Input
2244
2249
  }], card: [{
2245
2250
  type: Input
2246
2251
  }], help: [{
2247
2252
  type: Input
2248
2253
  }] } });
2254
+ (function (MetricComponent) {
2255
+ MetricComponent.Sizes = ['small', 'medium', 'large'];
2256
+ })(MetricComponent || (MetricComponent = {}));
2249
2257
 
2250
2258
  class TrendComponent {
2251
2259
  constructor() {
@@ -2346,7 +2354,7 @@ class FunnelChartComponent {
2346
2354
  }
2347
2355
  }
2348
2356
  FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2349
- FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: MetricComponent, selector: "riv-metric", inputs: ["label", "value", "card", "help"] }, { kind: "component", type: TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2357
+ FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "card", "help"] }, { kind: "component", type: TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2350
2358
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, decorators: [{
2351
2359
  type: Component,
2352
2360
  args: [{ selector: 'riv-funnel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\n"] }]