@rivet-health/design-system 26.12.0 → 26.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/select/select/select.component.mjs +7 -3
- package/esm2020/lib/overlay/callout/callout.component.mjs +7 -3
- package/fesm2015/rivet-health-design-system.mjs +43 -36
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +42 -36
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/select/select/select.component.d.ts +1 -0
- package/lib/overlay/callout/callout.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, ContentChild, Input, ViewChild, } from '@angular/core';
|
|
2
|
+
import { debounce } from 'lodash';
|
|
2
3
|
import { InputLabelComponent } from '../../input-label/input-label.component';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
import * as i1 from "@angular/common";
|
|
@@ -17,6 +18,9 @@ export class SelectComponent extends InputLabelComponent {
|
|
|
17
18
|
this.size = 'medium';
|
|
18
19
|
this.disabled = false;
|
|
19
20
|
this.locked = false;
|
|
21
|
+
this.searchChange = debounce((query) => {
|
|
22
|
+
this.manager?.actions?.next({ type: 'searchChange', payload: query });
|
|
23
|
+
}, 500);
|
|
20
24
|
}
|
|
21
25
|
getTrigger() {
|
|
22
26
|
return (this.customTriggerButton?.nativeElement ??
|
|
@@ -50,10 +54,10 @@ export class SelectComponent extends InputLabelComponent {
|
|
|
50
54
|
}
|
|
51
55
|
}
|
|
52
56
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"\n manager?.actions?.next({ type: 'searchChange', payload: $event })\n \"\n ></riv-search>\n <div class=\"options\">\n <riv-select-node\n *ngIf=\"\n s.selection.allowMultiSelect &&\n s.selection.allowSelectAll &&\n !s.display.zeroStateMessage\n \"\n [mode]=\"'multi'\"\n [node]=\"{\n id: '__NOOP__',\n title: s.query.search ? 'Select all matching' : 'Select all',\n selected: s.selection.visibleSelectionState,\n selectable: true,\n expandable: false,\n expanded: false\n }\"\n (selectChange)=\"\n manager?.actions?.next({ type: 'visibleSelectedChange' })\n \"\n ></riv-select-node>\n <div\n *ngFor=\"let group of s.fullOptionGroups\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n </span>\n <ng-container *ngFor=\"let option of group.options\">\n <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ node: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #standardTemplate>\n <riv-select-node\n [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n [node]=\"option\"\n [showSingleSelected]=\"s.display.showSingleSelected\"\n (selectChange)=\"\n selectChange(s.selection.allowMultiSelect, $event)\n \"\n (expandChange)=\"\n manager?.actions?.next({\n type: 'toggleOptionExpanded',\n id: $event\n })\n \"\n ></riv-select-node>\n </ng-template>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.display.displayLimitMessage; let message\"\n class=\"display-limit\"\n >\n {{ message }}\n </span>\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </div>\n <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n <ng-container\n *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n ></ng-container>\n </footer>\n </div>\n </riv-loading-cover>\n </ng-template>\n\n <ng-container *ngIf=\"!s.display.inline; else content\">\n <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ state: s }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <span *ngIf=\"s.selection.selected.size > 1\" class=\"selected-count\">\n {{ s.selection.selected.size | rivNumber }}\n </span>\n <span class=\"value\">{{ s.display.selected }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon\n *ngIf=\"!locked\"\n [name]=\"'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n </ng-template>\n\n <ng-container *ngIf=\"s.display.open\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n</ng-container>\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;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i4.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: i5.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i7.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i8.SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: i9.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
57
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"searchChange($event)\"\n ></riv-search>\n <div class=\"options\">\n <riv-select-node\n *ngIf=\"\n s.selection.allowMultiSelect &&\n s.selection.allowSelectAll &&\n !s.display.zeroStateMessage\n \"\n [mode]=\"'multi'\"\n [node]=\"{\n id: '__NOOP__',\n title: s.query.search ? 'Select all matching' : 'Select all',\n selected: s.selection.visibleSelectionState,\n selectable: true,\n expandable: false,\n expanded: false\n }\"\n (selectChange)=\"\n manager?.actions?.next({ type: 'visibleSelectedChange' })\n \"\n ></riv-select-node>\n <div\n *ngFor=\"let group of s.fullOptionGroups\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n </span>\n <ng-container *ngFor=\"let option of group.options\">\n <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ node: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #standardTemplate>\n <riv-select-node\n [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n [node]=\"option\"\n [showSingleSelected]=\"s.display.showSingleSelected\"\n (selectChange)=\"\n selectChange(s.selection.allowMultiSelect, $event)\n \"\n (expandChange)=\"\n manager?.actions?.next({\n type: 'toggleOptionExpanded',\n id: $event\n })\n \"\n ></riv-select-node>\n </ng-template>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.display.displayLimitMessage; let message\"\n class=\"display-limit\"\n >\n {{ message }}\n </span>\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </div>\n <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n <ng-container\n *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n ></ng-container>\n </footer>\n </div>\n </riv-loading-cover>\n </ng-template>\n\n <ng-container *ngIf=\"!s.display.inline; else content\">\n <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ state: s }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <span *ngIf=\"s.selection.selected.size > 1\" class=\"selected-count\">\n {{ s.selection.selected.size | rivNumber }}\n </span>\n <span class=\"value\">{{ s.display.selected }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon\n *ngIf=\"!locked\"\n [name]=\"'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n </ng-template>\n\n <ng-container *ngIf=\"s.display.open\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n</ng-container>\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;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i4.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: i5.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i7.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i8.SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: i9.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
54
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
55
59
|
type: Component,
|
|
56
|
-
args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"
|
|
60
|
+
args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"searchChange($event)\"\n ></riv-search>\n <div class=\"options\">\n <riv-select-node\n *ngIf=\"\n s.selection.allowMultiSelect &&\n s.selection.allowSelectAll &&\n !s.display.zeroStateMessage\n \"\n [mode]=\"'multi'\"\n [node]=\"{\n id: '__NOOP__',\n title: s.query.search ? 'Select all matching' : 'Select all',\n selected: s.selection.visibleSelectionState,\n selectable: true,\n expandable: false,\n expanded: false\n }\"\n (selectChange)=\"\n manager?.actions?.next({ type: 'visibleSelectedChange' })\n \"\n ></riv-select-node>\n <div\n *ngFor=\"let group of s.fullOptionGroups\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n </span>\n <ng-container *ngFor=\"let option of group.options\">\n <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ node: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #standardTemplate>\n <riv-select-node\n [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n [node]=\"option\"\n [showSingleSelected]=\"s.display.showSingleSelected\"\n (selectChange)=\"\n selectChange(s.selection.allowMultiSelect, $event)\n \"\n (expandChange)=\"\n manager?.actions?.next({\n type: 'toggleOptionExpanded',\n id: $event\n })\n \"\n ></riv-select-node>\n </ng-template>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.display.displayLimitMessage; let message\"\n class=\"display-limit\"\n >\n {{ message }}\n </span>\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </div>\n <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n <ng-container\n *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n ></ng-container>\n </footer>\n </div>\n </riv-loading-cover>\n </ng-template>\n\n <ng-container *ngIf=\"!s.display.inline; else content\">\n <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ state: s }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <span *ngIf=\"s.selection.selected.size > 1\" class=\"selected-count\">\n {{ s.selection.selected.size | rivNumber }}\n </span>\n <span class=\"value\">{{ s.display.selected }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon\n *ngIf=\"!locked\"\n [name]=\"'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n </ng-template>\n\n <ng-container *ngIf=\"s.display.open\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n</ng-container>\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;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
|
|
57
61
|
}], propDecorators: { manager: [{
|
|
58
62
|
type: Input
|
|
59
63
|
}], size: [{
|
|
@@ -84,4 +88,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
84
88
|
(function (SelectComponent) {
|
|
85
89
|
SelectComponent.Sizes = ['small', 'medium', 'large'];
|
|
86
90
|
})(SelectComponent || (SelectComponent = {}));
|
|
87
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L3NlbGVjdC9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L3NlbGVjdC9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFFWixLQUFLLEVBRUwsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDOzs7Ozs7Ozs7Ozs7QUFTOUUsTUFBTSxPQUFPLGVBRVgsU0FBUSxtQkFBbUI7SUFSN0I7O1FBYUUsU0FBSSxHQUF5QixRQUFRLENBQUM7UUFHdEMsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUcxQixXQUFNLEdBQVksS0FBSyxDQUFDO0tBcUR6QjtJQWpDQyxVQUFVO1FBQ1IsT0FBTyxDQUNMLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxhQUFhO1lBQ3ZDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxhQUFhLENBQzFDLENBQUM7SUFDSixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNsQyxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUM7Z0JBQ3pCLElBQUksRUFBRSxZQUFZO2dCQUNsQixJQUFJLEVBQUUsSUFBSTthQUNYLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFjLEVBQUUsRUFBVztRQUN0QyxJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxDQUFDLElBQUksQ0FBQztnQkFDekIsSUFBSSxFQUFFLHNCQUFzQjtnQkFDNUIsRUFBRTthQUNILENBQUMsQ0FBQztTQUNKO2FBQU07WUFDTCxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUM7Z0JBQ3pCLElBQUksRUFBRSxtQkFBbUI7Z0JBQ3pCLEVBQUU7YUFDSCxDQUFDLENBQUM7WUFDSCxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUM7Z0JBQ3pCLElBQUksRUFBRSxZQUFZO2dCQUNsQixJQUFJLEVBQUUsS0FBSzthQUNaLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQzs7NEdBakVVLGVBQWU7Z0dBQWYsZUFBZSxxd0JDbEI1Qiw2K0xBNktBOzJGRDNKYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLFlBQVksbUJBR0wsdUJBQXVCLENBQUMsTUFBTTs4QkFNL0MsT0FBTztzQkFETixLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSU4sTUFBTTtzQkFETCxLQUFLO2dCQUlOLGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxTQUFTO2dCQUl2QixjQUFjO3NCQURiLFlBQVk7dUJBQUMsUUFBUTtnQkFJdEIsY0FBYztzQkFEYixZQUFZO3VCQUFDLFFBQVE7Z0JBSXRCLGNBQWM7c0JBRGIsWUFBWTt1QkFBQyxRQUFRO2dCQUl0QixtQkFBbUI7c0JBRGxCLFNBQVM7dUJBQUMscUJBQXFCO2dCQUloQyxxQkFBcUI7c0JBRHBCLFNBQVM7dUJBQUMsdUJBQXVCOztBQXNDcEMsV0FBaUIsZUFBZTtJQUNqQixxQkFBSyxHQUFHLENBQUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxPQUFPLENBQVUsQ0FBQztBQUU3RCxDQUFDLEVBSGdCLGVBQWUsS0FBZixlQUFlLFFBRy9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJbnB1dExhYmVsQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vaW5wdXQtbGFiZWwvaW5wdXQtbGFiZWwuY29tcG9uZW50JztcbmltcG9ydCB7IFJpdlNlbGVjdCB9IGZyb20gJy4uL3N0YXRlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LXNlbGVjdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zZWxlY3QuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU2VsZWN0Q29tcG9uZW50PFxuICBPIGV4dGVuZHMgUml2U2VsZWN0LkJhc2VPcHRpb24sXG4+IGV4dGVuZHMgSW5wdXRMYWJlbENvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIG1hbmFnZXI/OiBSaXZTZWxlY3QuTWFuYWdlcjxPPjtcblxuICBASW5wdXQoKVxuICBzaXplOiBTZWxlY3RDb21wb25lbnQuU2l6ZSA9ICdtZWRpdW0nO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgbG9ja2VkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQENvbnRlbnRDaGlsZCgndHJpZ2dlcicpXG4gIHRyaWdnZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHsgc3RhdGU6IFJpdlNlbGVjdC5GdWxsU3RhdGU8Tz4gfT47XG5cbiAgQENvbnRlbnRDaGlsZCgnb3B0aW9uJylcbiAgb3B0aW9uVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx7IG5vZGU6IFJpdlNlbGVjdC5GdWxsT3B0aW9uPE8+IH0+O1xuXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlcicpXG4gIGhlYWRlclRlbXBsYXRlPzogVGVtcGxhdGVSZWY8eyBzdGF0ZTogUml2U2VsZWN0LkZ1bGxTdGF0ZTxPPiB9PjtcblxuICBAQ29udGVudENoaWxkKCdmb290ZXInKVxuICBmb290ZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHsgc3RhdGU6IFJpdlNlbGVjdC5GdWxsU3RhdGU8Tz4gfT47XG5cbiAgQFZpZXdDaGlsZCgnY3VzdG9tVHJpZ2dlckJ1dHRvbicpXG4gIGN1c3RvbVRyaWdnZXJCdXR0b24/OiBFbGVtZW50UmVmO1xuXG4gIEBWaWV3Q2hpbGQoJ3N0YW5kYXJkVHJpZ2dlckJ1dHRvbicpXG4gIHN0YW5kYXJkVHJpZ2dlckJ1dHRvbj86IEVsZW1lbnRSZWY7XG5cbiAgZ2V0VHJpZ2dlcigpOiBFbGVtZW50IHwgbnVsbCB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMuY3VzdG9tVHJpZ2dlckJ1dHRvbj8ubmF0aXZlRWxlbWVudCA/P1xuICAgICAgdGhpcy5zdGFuZGFyZFRyaWdnZXJCdXR0b24/Lm5hdGl2ZUVsZW1lbnRcbiAgICApO1xuICB9XG5cbiAgYWxsb3dlZE9wZW4oKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkICYmICF0aGlzLmxvY2tlZCkge1xuICAgICAgdGhpcy5tYW5hZ2VyPy5hY3Rpb25zLm5leHQoe1xuICAgICAgICB0eXBlOiAnb3BlbkNoYW5nZScsXG4gICAgICAgIG9wZW46IHRydWUsXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBzZWxlY3RDaGFuZ2UobXVsdGk6IGJvb2xlYW4sIGlkOiBPWydpZCddKSB7XG4gICAgaWYgKG11bHRpKSB7XG4gICAgICB0aGlzLm1hbmFnZXI/LmFjdGlvbnMubmV4dCh7XG4gICAgICAgIHR5cGU6ICd0b2dnbGVPcHRpb25TZWxlY3RlZCcsXG4gICAgICAgIGlkLFxuICAgICAgfSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMubWFuYWdlcj8uYWN0aW9ucy5uZXh0KHtcbiAgICAgICAgdHlwZTogJ3NldFNlbGVjdGVkT3B0aW9uJyxcbiAgICAgICAgaWQsXG4gICAgICB9KTtcbiAgICAgIHRoaXMubWFuYWdlcj8uYWN0aW9ucy5uZXh0KHtcbiAgICAgICAgdHlwZTogJ29wZW5DaGFuZ2UnLFxuICAgICAgICBvcGVuOiBmYWxzZSxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuXG5leHBvcnQgbmFtZXNwYWNlIFNlbGVjdENvbXBvbmVudCB7XG4gIGV4cG9ydCBjb25zdCBTaXplcyA9IFsnc21hbGwnLCAnbWVkaXVtJywgJ2xhcmdlJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFNpemUgPSAodHlwZW9mIFNpemVzKVtudW1iZXJdO1xufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cIm1hbmFnZXI/LnN0YXRlIHwgYXN5bmM7IGxldCBzXCI+XG4gIDxuZy10ZW1wbGF0ZSAjY29udGVudD5cbiAgICA8cml2LWxvYWRpbmctY292ZXIgW2xvYWRpbmddPVwicy5sb2FkLmxvYWRpbmdcIj5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJjb250ZW50LWJvZHlcIlxuICAgICAgICBbY2xhc3MuaW5saW5lXT1cInMuZGlzcGxheS5pbmxpbmVcIlxuICAgICAgICBbbmdTdHlsZV09XCJ7XG4gICAgICAgICAgJ21heC1oZWlnaHQnOiBzLmRpc3BsYXkubWF4SGVpZ2h0LFxuICAgICAgICAgICdtYXgtd2lkdGgnOiBzLmRpc3BsYXkubWF4V2lkdGhcbiAgICAgICAgfVwiXG4gICAgICA+XG4gICAgICAgIDxoZWFkZXIgKm5nSWY9XCJoZWFkZXJUZW1wbGF0ZVwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiaGVhZGVyVGVtcGxhdGU7IGNvbnRleHQ6IHsgc3RhdGU6IHMgfVwiXG4gICAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2hlYWRlcj5cbiAgICAgICAgPHJpdi1zZWFyY2hcbiAgICAgICAgICAqbmdJZj1cInMucXVlcnkuc2hvd1NlYXJjaFwiXG4gICAgICAgICAgW3ZhbHVlXT1cInMucXVlcnkuc2VhcmNoXCJcbiAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwicy5xdWVyeS5zZWFyY2hQbGFjZWhvbGRlclwiXG4gICAgICAgICAgW2F1dG9Gb2N1c109XCJ0cnVlXCJcbiAgICAgICAgICAodmFsdWVDaGFuZ2UpPVwiXG4gICAgICAgICAgICBtYW5hZ2VyPy5hY3Rpb25zPy5uZXh0KHsgdHlwZTogJ3NlYXJjaENoYW5nZScsIHBheWxvYWQ6ICRldmVudCB9KVxuICAgICAgICAgIFwiXG4gICAgICAgID48L3Jpdi1zZWFyY2g+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJvcHRpb25zXCI+XG4gICAgICAgICAgPHJpdi1zZWxlY3Qtbm9kZVxuICAgICAgICAgICAgKm5nSWY9XCJcbiAgICAgICAgICAgICAgcy5zZWxlY3Rpb24uYWxsb3dNdWx0aVNlbGVjdCAmJlxuICAgICAgICAgICAgICBzLnNlbGVjdGlvbi5hbGxvd1NlbGVjdEFsbCAmJlxuICAgICAgICAgICAgICAhcy5kaXNwbGF5Lnplcm9TdGF0ZU1lc3NhZ2VcbiAgICAgICAgICAgIFwiXG4gICAgICAgICAgICBbbW9kZV09XCInbXVsdGknXCJcbiAgICAgICAgICAgIFtub2RlXT1cIntcbiAgICAgICAgICAgICAgaWQ6ICdfX05PT1BfXycsXG4gICAgICAgICAgICAgIHRpdGxlOiBzLnF1ZXJ5LnNlYXJjaCA/ICdTZWxlY3QgYWxsIG1hdGNoaW5nJyA6ICdTZWxlY3QgYWxsJyxcbiAgICAgICAgICAgICAgc2VsZWN0ZWQ6IHMuc2VsZWN0aW9uLnZpc2libGVTZWxlY3Rpb25TdGF0ZSxcbiAgICAgICAgICAgICAgc2VsZWN0YWJsZTogdHJ1ZSxcbiAgICAgICAgICAgICAgZXhwYW5kYWJsZTogZmFsc2UsXG4gICAgICAgICAgICAgIGV4cGFuZGVkOiBmYWxzZVxuICAgICAgICAgICAgfVwiXG4gICAgICAgICAgICAoc2VsZWN0Q2hhbmdlKT1cIlxuICAgICAgICAgICAgICBtYW5hZ2VyPy5hY3Rpb25zPy5uZXh0KHsgdHlwZTogJ3Zpc2libGVTZWxlY3RlZENoYW5nZScgfSlcbiAgICAgICAgICAgIFwiXG4gICAgICAgICAgPjwvcml2LXNlbGVjdC1ub2RlPlxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCBncm91cCBvZiBzLmZ1bGxPcHRpb25Hcm91cHNcIlxuICAgICAgICAgICAgY2xhc3M9XCJncm91cFwiXG4gICAgICAgICAgICBbY2xhc3MuZGl2aWRlcl09XCJzLmRpc3BsYXkuZGl2aWRlcnNcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwiZ3JvdXAuaGVhZGVyOyBsZXQgaGVhZGVyXCIgY2xhc3M9XCJoZWFkZXJcIj5cbiAgICAgICAgICAgICAge3sgaGVhZGVyIH19XG4gICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZ3JvdXAub3B0aW9uc1wiPlxuICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwib3B0aW9uVGVtcGxhdGU7IGVsc2Ugc3RhbmRhcmRUZW1wbGF0ZVwiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIm9wdGlvblRlbXBsYXRlXCJcbiAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IG5vZGU6IG9wdGlvbiB9XCJcbiAgICAgICAgICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgI3N0YW5kYXJkVGVtcGxhdGU+XG4gICAgICAgICAgICAgICAgPHJpdi1zZWxlY3Qtbm9kZVxuICAgICAgICAgICAgICAgICAgW21vZGVdPVwicy5zZWxlY3Rpb24uYWxsb3dNdWx0aVNlbGVjdCA/ICdtdWx0aScgOiAnc2luZ2xlJ1wiXG4gICAgICAgICAgICAgICAgICBbbm9kZV09XCJvcHRpb25cIlxuICAgICAgICAgICAgICAgICAgW3Nob3dTaW5nbGVTZWxlY3RlZF09XCJzLmRpc3BsYXkuc2hvd1NpbmdsZVNlbGVjdGVkXCJcbiAgICAgICAgICAgICAgICAgIChzZWxlY3RDaGFuZ2UpPVwiXG4gICAgICAgICAgICAgICAgICAgIHNlbGVjdENoYW5nZShzLnNlbGVjdGlvbi5hbGxvd011bHRpU2VsZWN0LCAkZXZlbnQpXG4gICAgICAgICAgICAgICAgICBcIlxuICAgICAgICAgICAgICAgICAgKGV4cGFuZENoYW5nZSk9XCJcbiAgICAgICAgICAgICAgICAgICAgbWFuYWdlcj8uYWN0aW9ucz8ubmV4dCh7XG4gICAgICAgICAgICAgICAgICAgICAgdHlwZTogJ3RvZ2dsZU9wdGlvbkV4cGFuZGVkJyxcbiAgICAgICAgICAgICAgICAgICAgICBpZDogJGV2ZW50XG4gICAgICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgICAgICBcIlxuICAgICAgICAgICAgICAgID48L3Jpdi1zZWxlY3Qtbm9kZT5cbiAgICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAqbmdJZj1cInMuZGlzcGxheS5kaXNwbGF5TGltaXRNZXNzYWdlOyBsZXQgbWVzc2FnZVwiXG4gICAgICAgICAgICBjbGFzcz1cImRpc3BsYXktbGltaXRcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHt7IG1lc3NhZ2UgfX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgPHJpdi16ZXJvLXN0YXRlXG4gICAgICAgICAgICAqbmdJZj1cInMuZGlzcGxheS56ZXJvU3RhdGVNZXNzYWdlOyBsZXQgbWVzc2FnZVwiXG4gICAgICAgICAgICBbbWVzc2FnZV09XCJtZXNzYWdlXCJcbiAgICAgICAgICA+PC9yaXYtemVyby1zdGF0ZT5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxmb290ZXIgKm5nSWY9XCJmb290ZXJUZW1wbGF0ZVwiIGNsYXNzPVwiY3VzdG9tLWZvb3RlclwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiZm9vdGVyVGVtcGxhdGU7IGNvbnRleHQ6IHsgc3RhdGU6IHMgfVwiXG4gICAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Zvb3Rlcj5cbiAgICAgIDwvZGl2PlxuICAgIDwvcml2LWxvYWRpbmctY292ZXI+XG4gIDwvbmctdGVtcGxhdGU+XG5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFzLmRpc3BsYXkuaW5saW5lOyBlbHNlIGNvbnRlbnRcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidHJpZ2dlclRlbXBsYXRlOyBlbHNlIHN0YW5kYXJkVHJpZ2dlclwiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICAjY3VzdG9tVHJpZ2dlckJ1dHRvblxuICAgICAgICAoY2xpY2spPVwiYWxsb3dlZE9wZW4oKVwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCB8fCBsb2NrZWRcIlxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgID5cbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRyaWdnZXJUZW1wbGF0ZVwiXG4gICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgc3RhdGU6IHMgfVwiXG4gICAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvbmctY29udGFpbmVyPlxuICAgIDxuZy10ZW1wbGF0ZSAjc3RhbmRhcmRUcmlnZ2VyPlxuICAgICAgPHJpdi1pbnB1dC1sYWJlbFxuICAgICAgICBbbGFiZWxdPVwibGFiZWxcIlxuICAgICAgICBbaGVscF09XCJoZWxwXCJcbiAgICAgICAgW3JlcXVpcmVkXT1cInJlcXVpcmVkXCJcbiAgICAgICAgW2xhYmVsQWN0aW9uVGV4dF09XCJsYWJlbEFjdGlvblRleHRcIlxuICAgICAgICAobGFiZWxBY3Rpb24pPVwibGFiZWxBY3Rpb24uZW1pdCgkZXZlbnQpXCJcbiAgICAgID5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICNzdGFuZGFyZFRyaWdnZXJCdXR0b25cbiAgICAgICAgICBjbGFzcz1cInRyaWdnZXJcIlxuICAgICAgICAgIFtjbGFzcy5zbWFsbF09XCJzaXplID09PSAnc21hbGwnXCJcbiAgICAgICAgICBbY2xhc3MubGFyZ2VdPVwic2l6ZSA9PT0gJ2xhcmdlJ1wiXG4gICAgICAgICAgKGNsaWNrKT1cImFsbG93ZWRPcGVuKClcIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCB8fCBsb2NrZWRcIlxuICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICA+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICAgKm5nSWY9XCJzLnNlbGVjdGlvbi5zZWxlY3RlZC5zaXplOyBlbHNlIHBsYWNlaG9sZGVyVmFsdWVcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwicy5zZWxlY3Rpb24uc2VsZWN0ZWQuc2l6ZSA+IDFcIiBjbGFzcz1cInNlbGVjdGVkLWNvdW50XCI+XG4gICAgICAgICAgICAgIHt7IHMuc2VsZWN0aW9uLnNlbGVjdGVkLnNpemUgfCByaXZOdW1iZXIgfX1cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidmFsdWVcIj57eyBzLmRpc3BsYXkuc2VsZWN0ZWQgfX08L3NwYW4+XG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlICNwbGFjZWhvbGRlclZhbHVlPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ2YWx1ZSBwbGFjZWhvbGRlclwiPnt7IHMuZGlzcGxheS5wbGFjZWhvbGRlciB9fTwvc3Bhbj5cbiAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2hldnJvblwiPlxuICAgICAgICAgICAgPHJpdi1pY29uXG4gICAgICAgICAgICAgICpuZ0lmPVwiIWxvY2tlZFwiXG4gICAgICAgICAgICAgIFtuYW1lXT1cIidDaGV2cm9uRG93bidcIlxuICAgICAgICAgICAgICBbc2l6ZV09XCIyMFwiXG4gICAgICAgICAgICA+PC9yaXYtaWNvbj5cbiAgICAgICAgICAgIDxyaXYtaWNvbiAqbmdJZj1cImxvY2tlZFwiIFtuYW1lXT1cIidMb2NrJ1wiIFtzaXplXT1cIjIwXCI+PC9yaXYtaWNvbj5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9yaXYtaW5wdXQtbGFiZWw+XG4gICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzLmRpc3BsYXkub3BlblwiPlxuICAgICAgPHJpdi1jYWxsb3V0XG4gICAgICAgICpyaXYtb3ZlcmxheVxuICAgICAgICBbYW5jaG9yXT1cImdldFRyaWdnZXIoKVwiXG4gICAgICAgIFt0aGVtZV09XCInbGlnaHQnXCJcbiAgICAgICAgW3Nob3dDYXJldF09XCJmYWxzZVwiXG4gICAgICAgIFthbGxvd2VkUG9zaXRpb25zXT1cIltcbiAgICAgICAgICAndG9wLWxlZnQnLFxuICAgICAgICAgICd0b3AtY2VudGVyJyxcbiAgICAgICAgICAndG9wLXJpZ2h0JyxcbiAgICAgICAgICAnYm90dG9tLXJpZ2h0JyxcbiAgICAgICAgICAnYm90dG9tLWNlbnRlcicsXG4gICAgICAgICAgJ2JvdHRvbS1sZWZ0J1xuICAgICAgICBdXCJcbiAgICAgICAgKGNsb3NlKT1cIm1hbmFnZXI/LmFjdGlvbnM/Lm5leHQoeyB0eXBlOiAnb3BlbkNoYW5nZScsIG9wZW46IGZhbHNlIH0pXCJcbiAgICAgID5cbiAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gICAgICA8L3Jpdi1jYWxsb3V0PlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvbmctY29udGFpbmVyPlxuIl19
|
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L3NlbGVjdC9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2lucHV0L3NlbGVjdC9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFFWixLQUFLLEVBRUwsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxRQUFRLENBQUM7QUFDbEMsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUNBQXlDLENBQUM7Ozs7Ozs7Ozs7OztBQVM5RSxNQUFNLE9BQU8sZUFFWCxTQUFRLG1CQUFtQjtJQVI3Qjs7UUFhRSxTQUFJLEdBQXlCLFFBQVEsQ0FBQztRQUd0QyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFzRHhCLGlCQUFZLEdBQUcsUUFBUSxDQUFDLENBQUMsS0FBYSxFQUFFLEVBQUU7WUFDeEMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLGNBQWMsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUN4RSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7S0FDVDtJQXJDQyxVQUFVO1FBQ1IsT0FBTyxDQUNMLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxhQUFhO1lBQ3ZDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxhQUFhLENBQzFDLENBQUM7SUFDSixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNsQyxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUM7Z0JBQ3pCLElBQUksRUFBRSxZQUFZO2dCQUNsQixJQUFJLEVBQUUsSUFBSTthQUNYLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFjLEVBQUUsRUFBVztRQUN0QyxJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxDQUFDLElBQUksQ0FBQztnQkFDekIsSUFBSSxFQUFFLHNCQUFzQjtnQkFDNUIsRUFBRTthQUNILENBQUMsQ0FBQztTQUNKO2FBQU07WUFDTCxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUM7Z0JBQ3pCLElBQUksRUFBRSxtQkFBbUI7Z0JBQ3pCLEVBQUU7YUFDSCxDQUFDLENBQUM7WUFDSCxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUM7Z0JBQ3pCLElBQUksRUFBRSxZQUFZO2dCQUNsQixJQUFJLEVBQUUsS0FBSzthQUNaLENBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQzs7NEdBakVVLGVBQWU7Z0dBQWYsZUFBZSxxd0JDbkI1QixzNkxBMktBOzJGRHhKYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLFlBQVksbUJBR0wsdUJBQXVCLENBQUMsTUFBTTs4QkFNL0MsT0FBTztzQkFETixLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSU4sTUFBTTtzQkFETCxLQUFLO2dCQUlOLGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxTQUFTO2dCQUl2QixjQUFjO3NCQURiLFlBQVk7dUJBQUMsUUFBUTtnQkFJdEIsY0FBYztzQkFEYixZQUFZO3VCQUFDLFFBQVE7Z0JBSXRCLGNBQWM7c0JBRGIsWUFBWTt1QkFBQyxRQUFRO2dCQUl0QixtQkFBbUI7c0JBRGxCLFNBQVM7dUJBQUMscUJBQXFCO2dCQUloQyxxQkFBcUI7c0JBRHBCLFNBQVM7dUJBQUMsdUJBQXVCOztBQTBDcEMsV0FBaUIsZUFBZTtJQUNqQixxQkFBSyxHQUFHLENBQUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxPQUFPLENBQVUsQ0FBQztBQUU3RCxDQUFDLEVBSGdCLGVBQWUsS0FBZixlQUFlLFFBRy9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBkZWJvdW5jZSB9IGZyb20gJ2xvZGFzaCc7XG5pbXBvcnQgeyBJbnB1dExhYmVsQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vaW5wdXQtbGFiZWwvaW5wdXQtbGFiZWwuY29tcG9uZW50JztcbmltcG9ydCB7IFJpdlNlbGVjdCB9IGZyb20gJy4uL3N0YXRlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LXNlbGVjdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zZWxlY3QuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU2VsZWN0Q29tcG9uZW50PFxuICBPIGV4dGVuZHMgUml2U2VsZWN0LkJhc2VPcHRpb24sXG4+IGV4dGVuZHMgSW5wdXRMYWJlbENvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIG1hbmFnZXI/OiBSaXZTZWxlY3QuTWFuYWdlcjxPPjtcblxuICBASW5wdXQoKVxuICBzaXplOiBTZWxlY3RDb21wb25lbnQuU2l6ZSA9ICdtZWRpdW0nO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgbG9ja2VkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQENvbnRlbnRDaGlsZCgndHJpZ2dlcicpXG4gIHRyaWdnZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHsgc3RhdGU6IFJpdlNlbGVjdC5GdWxsU3RhdGU8Tz4gfT47XG5cbiAgQENvbnRlbnRDaGlsZCgnb3B0aW9uJylcbiAgb3B0aW9uVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx7IG5vZGU6IFJpdlNlbGVjdC5GdWxsT3B0aW9uPE8+IH0+O1xuXG4gIEBDb250ZW50Q2hpbGQoJ2hlYWRlcicpXG4gIGhlYWRlclRlbXBsYXRlPzogVGVtcGxhdGVSZWY8eyBzdGF0ZTogUml2U2VsZWN0LkZ1bGxTdGF0ZTxPPiB9PjtcblxuICBAQ29udGVudENoaWxkKCdmb290ZXInKVxuICBmb290ZXJUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHsgc3RhdGU6IFJpdlNlbGVjdC5GdWxsU3RhdGU8Tz4gfT47XG5cbiAgQFZpZXdDaGlsZCgnY3VzdG9tVHJpZ2dlckJ1dHRvbicpXG4gIGN1c3RvbVRyaWdnZXJCdXR0b24/OiBFbGVtZW50UmVmO1xuXG4gIEBWaWV3Q2hpbGQoJ3N0YW5kYXJkVHJpZ2dlckJ1dHRvbicpXG4gIHN0YW5kYXJkVHJpZ2dlckJ1dHRvbj86IEVsZW1lbnRSZWY7XG5cbiAgZ2V0VHJpZ2dlcigpOiBFbGVtZW50IHwgbnVsbCB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMuY3VzdG9tVHJpZ2dlckJ1dHRvbj8ubmF0aXZlRWxlbWVudCA/P1xuICAgICAgdGhpcy5zdGFuZGFyZFRyaWdnZXJCdXR0b24/Lm5hdGl2ZUVsZW1lbnRcbiAgICApO1xuICB9XG5cbiAgYWxsb3dlZE9wZW4oKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkICYmICF0aGlzLmxvY2tlZCkge1xuICAgICAgdGhpcy5tYW5hZ2VyPy5hY3Rpb25zLm5leHQoe1xuICAgICAgICB0eXBlOiAnb3BlbkNoYW5nZScsXG4gICAgICAgIG9wZW46IHRydWUsXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBzZWxlY3RDaGFuZ2UobXVsdGk6IGJvb2xlYW4sIGlkOiBPWydpZCddKSB7XG4gICAgaWYgKG11bHRpKSB7XG4gICAgICB0aGlzLm1hbmFnZXI/LmFjdGlvbnMubmV4dCh7XG4gICAgICAgIHR5cGU6ICd0b2dnbGVPcHRpb25TZWxlY3RlZCcsXG4gICAgICAgIGlkLFxuICAgICAgfSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMubWFuYWdlcj8uYWN0aW9ucy5uZXh0KHtcbiAgICAgICAgdHlwZTogJ3NldFNlbGVjdGVkT3B0aW9uJyxcbiAgICAgICAgaWQsXG4gICAgICB9KTtcbiAgICAgIHRoaXMubWFuYWdlcj8uYWN0aW9ucy5uZXh0KHtcbiAgICAgICAgdHlwZTogJ29wZW5DaGFuZ2UnLFxuICAgICAgICBvcGVuOiBmYWxzZSxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHNlYXJjaENoYW5nZSA9IGRlYm91bmNlKChxdWVyeTogc3RyaW5nKSA9PiB7XG4gICAgdGhpcy5tYW5hZ2VyPy5hY3Rpb25zPy5uZXh0KHsgdHlwZTogJ3NlYXJjaENoYW5nZScsIHBheWxvYWQ6IHF1ZXJ5IH0pO1xuICB9LCA1MDApO1xufVxuXG5leHBvcnQgbmFtZXNwYWNlIFNlbGVjdENvbXBvbmVudCB7XG4gIGV4cG9ydCBjb25zdCBTaXplcyA9IFsnc21hbGwnLCAnbWVkaXVtJywgJ2xhcmdlJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFNpemUgPSAodHlwZW9mIFNpemVzKVtudW1iZXJdO1xufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cIm1hbmFnZXI/LnN0YXRlIHwgYXN5bmM7IGxldCBzXCI+XG4gIDxuZy10ZW1wbGF0ZSAjY29udGVudD5cbiAgICA8cml2LWxvYWRpbmctY292ZXIgW2xvYWRpbmddPVwicy5sb2FkLmxvYWRpbmdcIj5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJjb250ZW50LWJvZHlcIlxuICAgICAgICBbY2xhc3MuaW5saW5lXT1cInMuZGlzcGxheS5pbmxpbmVcIlxuICAgICAgICBbbmdTdHlsZV09XCJ7XG4gICAgICAgICAgJ21heC1oZWlnaHQnOiBzLmRpc3BsYXkubWF4SGVpZ2h0LFxuICAgICAgICAgICdtYXgtd2lkdGgnOiBzLmRpc3BsYXkubWF4V2lkdGhcbiAgICAgICAgfVwiXG4gICAgICA+XG4gICAgICAgIDxoZWFkZXIgKm5nSWY9XCJoZWFkZXJUZW1wbGF0ZVwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiaGVhZGVyVGVtcGxhdGU7IGNvbnRleHQ6IHsgc3RhdGU6IHMgfVwiXG4gICAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2hlYWRlcj5cbiAgICAgICAgPHJpdi1zZWFyY2hcbiAgICAgICAgICAqbmdJZj1cInMucXVlcnkuc2hvd1NlYXJjaFwiXG4gICAgICAgICAgW3ZhbHVlXT1cInMucXVlcnkuc2VhcmNoXCJcbiAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwicy5xdWVyeS5zZWFyY2hQbGFjZWhvbGRlclwiXG4gICAgICAgICAgW2F1dG9Gb2N1c109XCJ0cnVlXCJcbiAgICAgICAgICAodmFsdWVDaGFuZ2UpPVwic2VhcmNoQ2hhbmdlKCRldmVudClcIlxuICAgICAgICA+PC9yaXYtc2VhcmNoPlxuICAgICAgICA8ZGl2IGNsYXNzPVwib3B0aW9uc1wiPlxuICAgICAgICAgIDxyaXYtc2VsZWN0LW5vZGVcbiAgICAgICAgICAgICpuZ0lmPVwiXG4gICAgICAgICAgICAgIHMuc2VsZWN0aW9uLmFsbG93TXVsdGlTZWxlY3QgJiZcbiAgICAgICAgICAgICAgcy5zZWxlY3Rpb24uYWxsb3dTZWxlY3RBbGwgJiZcbiAgICAgICAgICAgICAgIXMuZGlzcGxheS56ZXJvU3RhdGVNZXNzYWdlXG4gICAgICAgICAgICBcIlxuICAgICAgICAgICAgW21vZGVdPVwiJ211bHRpJ1wiXG4gICAgICAgICAgICBbbm9kZV09XCJ7XG4gICAgICAgICAgICAgIGlkOiAnX19OT09QX18nLFxuICAgICAgICAgICAgICB0aXRsZTogcy5xdWVyeS5zZWFyY2ggPyAnU2VsZWN0IGFsbCBtYXRjaGluZycgOiAnU2VsZWN0IGFsbCcsXG4gICAgICAgICAgICAgIHNlbGVjdGVkOiBzLnNlbGVjdGlvbi52aXNpYmxlU2VsZWN0aW9uU3RhdGUsXG4gICAgICAgICAgICAgIHNlbGVjdGFibGU6IHRydWUsXG4gICAgICAgICAgICAgIGV4cGFuZGFibGU6IGZhbHNlLFxuICAgICAgICAgICAgICBleHBhbmRlZDogZmFsc2VcbiAgICAgICAgICAgIH1cIlxuICAgICAgICAgICAgKHNlbGVjdENoYW5nZSk9XCJcbiAgICAgICAgICAgICAgbWFuYWdlcj8uYWN0aW9ucz8ubmV4dCh7IHR5cGU6ICd2aXNpYmxlU2VsZWN0ZWRDaGFuZ2UnIH0pXG4gICAgICAgICAgICBcIlxuICAgICAgICAgID48L3Jpdi1zZWxlY3Qtbm9kZT5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAqbmdGb3I9XCJsZXQgZ3JvdXAgb2Ygcy5mdWxsT3B0aW9uR3JvdXBzXCJcbiAgICAgICAgICAgIGNsYXNzPVwiZ3JvdXBcIlxuICAgICAgICAgICAgW2NsYXNzLmRpdmlkZXJdPVwicy5kaXNwbGF5LmRpdmlkZXJzXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8c3BhbiAqbmdJZj1cImdyb3VwLmhlYWRlcjsgbGV0IGhlYWRlclwiIGNsYXNzPVwiaGVhZGVyXCI+XG4gICAgICAgICAgICAgIHt7IGhlYWRlciB9fVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGdyb3VwLm9wdGlvbnNcIj5cbiAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIm9wdGlvblRlbXBsYXRlOyBlbHNlIHN0YW5kYXJkVGVtcGxhdGVcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJvcHRpb25UZW1wbGF0ZVwiXG4gICAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyBub2RlOiBvcHRpb24gfVwiXG4gICAgICAgICAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlICNzdGFuZGFyZFRlbXBsYXRlPlxuICAgICAgICAgICAgICAgIDxyaXYtc2VsZWN0LW5vZGVcbiAgICAgICAgICAgICAgICAgIFttb2RlXT1cInMuc2VsZWN0aW9uLmFsbG93TXVsdGlTZWxlY3QgPyAnbXVsdGknIDogJ3NpbmdsZSdcIlxuICAgICAgICAgICAgICAgICAgW25vZGVdPVwib3B0aW9uXCJcbiAgICAgICAgICAgICAgICAgIFtzaG93U2luZ2xlU2VsZWN0ZWRdPVwicy5kaXNwbGF5LnNob3dTaW5nbGVTZWxlY3RlZFwiXG4gICAgICAgICAgICAgICAgICAoc2VsZWN0Q2hhbmdlKT1cIlxuICAgICAgICAgICAgICAgICAgICBzZWxlY3RDaGFuZ2Uocy5zZWxlY3Rpb24uYWxsb3dNdWx0aVNlbGVjdCwgJGV2ZW50KVxuICAgICAgICAgICAgICAgICAgXCJcbiAgICAgICAgICAgICAgICAgIChleHBhbmRDaGFuZ2UpPVwiXG4gICAgICAgICAgICAgICAgICAgIG1hbmFnZXI/LmFjdGlvbnM/Lm5leHQoe1xuICAgICAgICAgICAgICAgICAgICAgIHR5cGU6ICd0b2dnbGVPcHRpb25FeHBhbmRlZCcsXG4gICAgICAgICAgICAgICAgICAgICAgaWQ6ICRldmVudFxuICAgICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICAgXCJcbiAgICAgICAgICAgICAgICA+PC9yaXYtc2VsZWN0LW5vZGU+XG4gICAgICAgICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgKm5nSWY9XCJzLmRpc3BsYXkuZGlzcGxheUxpbWl0TWVzc2FnZTsgbGV0IG1lc3NhZ2VcIlxuICAgICAgICAgICAgY2xhc3M9XCJkaXNwbGF5LWxpbWl0XCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7eyBtZXNzYWdlIH19XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDxyaXYtemVyby1zdGF0ZVxuICAgICAgICAgICAgKm5nSWY9XCJzLmRpc3BsYXkuemVyb1N0YXRlTWVzc2FnZTsgbGV0IG1lc3NhZ2VcIlxuICAgICAgICAgICAgW21lc3NhZ2VdPVwibWVzc2FnZVwiXG4gICAgICAgICAgPjwvcml2LXplcm8tc3RhdGU+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8Zm9vdGVyICpuZ0lmPVwiZm9vdGVyVGVtcGxhdGVcIiBjbGFzcz1cImN1c3RvbS1mb290ZXJcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAqbmdUZW1wbGF0ZU91dGxldD1cImZvb3RlclRlbXBsYXRlOyBjb250ZXh0OiB7IHN0YXRlOiBzIH1cIlxuICAgICAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9mb290ZXI+XG4gICAgICA8L2Rpdj5cbiAgICA8L3Jpdi1sb2FkaW5nLWNvdmVyPlxuICA8L25nLXRlbXBsYXRlPlxuXG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhcy5kaXNwbGF5LmlubGluZTsgZWxzZSBjb250ZW50XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRyaWdnZXJUZW1wbGF0ZTsgZWxzZSBzdGFuZGFyZFRyaWdnZXJcIj5cbiAgICAgIDxidXR0b25cbiAgICAgICAgI2N1c3RvbVRyaWdnZXJCdXR0b25cbiAgICAgICAgKGNsaWNrKT1cImFsbG93ZWRPcGVuKClcIlxuICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQgfHwgbG9ja2VkXCJcbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICA+XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJ0cmlnZ2VyVGVtcGxhdGVcIlxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IHN0YXRlOiBzIH1cIlxuICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICA8L2J1dHRvbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI3N0YW5kYXJkVHJpZ2dlcj5cbiAgICAgIDxyaXYtaW5wdXQtbGFiZWxcbiAgICAgICAgW2xhYmVsXT1cImxhYmVsXCJcbiAgICAgICAgW2hlbHBdPVwiaGVscFwiXG4gICAgICAgIFtyZXF1aXJlZF09XCJyZXF1aXJlZFwiXG4gICAgICAgIFtsYWJlbEFjdGlvblRleHRdPVwibGFiZWxBY3Rpb25UZXh0XCJcbiAgICAgICAgKGxhYmVsQWN0aW9uKT1cImxhYmVsQWN0aW9uLmVtaXQoJGV2ZW50KVwiXG4gICAgICA+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAjc3RhbmRhcmRUcmlnZ2VyQnV0dG9uXG4gICAgICAgICAgY2xhc3M9XCJ0cmlnZ2VyXCJcbiAgICAgICAgICBbY2xhc3Muc21hbGxdPVwic2l6ZSA9PT0gJ3NtYWxsJ1wiXG4gICAgICAgICAgW2NsYXNzLmxhcmdlXT1cInNpemUgPT09ICdsYXJnZSdcIlxuICAgICAgICAgIChjbGljayk9XCJhbGxvd2VkT3BlbigpXCJcbiAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQgfHwgbG9ja2VkXCJcbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICpuZ0lmPVwicy5zZWxlY3Rpb24uc2VsZWN0ZWQuc2l6ZTsgZWxzZSBwbGFjZWhvbGRlclZhbHVlXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8c3BhbiAqbmdJZj1cInMuc2VsZWN0aW9uLnNlbGVjdGVkLnNpemUgPiAxXCIgY2xhc3M9XCJzZWxlY3RlZC1jb3VudFwiPlxuICAgICAgICAgICAgICB7eyBzLnNlbGVjdGlvbi5zZWxlY3RlZC5zaXplIHwgcml2TnVtYmVyIH19XG4gICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cInZhbHVlXCI+e3sgcy5kaXNwbGF5LnNlbGVjdGVkIH19PC9zcGFuPlxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjcGxhY2Vob2xkZXJWYWx1ZT5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidmFsdWUgcGxhY2Vob2xkZXJcIj57eyBzLmRpc3BsYXkucGxhY2Vob2xkZXIgfX08L3NwYW4+XG4gICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNoZXZyb25cIj5cbiAgICAgICAgICAgIDxyaXYtaWNvblxuICAgICAgICAgICAgICAqbmdJZj1cIiFsb2NrZWRcIlxuICAgICAgICAgICAgICBbbmFtZV09XCInQ2hldnJvbkRvd24nXCJcbiAgICAgICAgICAgICAgW3NpemVdPVwiMjBcIlxuICAgICAgICAgICAgPjwvcml2LWljb24+XG4gICAgICAgICAgICA8cml2LWljb24gKm5nSWY9XCJsb2NrZWRcIiBbbmFtZV09XCInTG9jaydcIiBbc2l6ZV09XCIyMFwiPjwvcml2LWljb24+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvcml2LWlucHV0LWxhYmVsPlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwicy5kaXNwbGF5Lm9wZW5cIj5cbiAgICAgIDxyaXYtY2FsbG91dFxuICAgICAgICAqcml2LW92ZXJsYXlcbiAgICAgICAgW2FuY2hvcl09XCJnZXRUcmlnZ2VyKClcIlxuICAgICAgICBbdGhlbWVdPVwiJ2xpZ2h0J1wiXG4gICAgICAgIFtzaG93Q2FyZXRdPVwiZmFsc2VcIlxuICAgICAgICBbYWxsb3dlZFBvc2l0aW9uc109XCJbXG4gICAgICAgICAgJ3RvcC1sZWZ0JyxcbiAgICAgICAgICAndG9wLWNlbnRlcicsXG4gICAgICAgICAgJ3RvcC1yaWdodCcsXG4gICAgICAgICAgJ2JvdHRvbS1yaWdodCcsXG4gICAgICAgICAgJ2JvdHRvbS1jZW50ZXInLFxuICAgICAgICAgICdib3R0b20tbGVmdCdcbiAgICAgICAgXVwiXG4gICAgICAgIChjbG9zZSk9XCJtYW5hZ2VyPy5hY3Rpb25zPy5uZXh0KHsgdHlwZTogJ29wZW5DaGFuZ2UnLCBvcGVuOiBmYWxzZSB9KVwiXG4gICAgICA+XG4gICAgICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPC9yaXYtY2FsbG91dD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==
|
|
@@ -3,6 +3,7 @@ import { getOrigin } from './callout.helpers';
|
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
5
5
|
import * as i2 from "./lock-scroll.directive";
|
|
6
|
+
import * as i3 from "../../size/size.directive";
|
|
6
7
|
// TODO: once we upgrade to Angular 16, this component can be cleaned up with
|
|
7
8
|
// signals instead of lifecycle hooks.
|
|
8
9
|
// https://www.notion.so/rivet/Resolve-TODOs-after-Angular-upgrade-1f2667eb2a3180b79f6ad92a7e576f08
|
|
@@ -36,6 +37,9 @@ export class CalloutComponent {
|
|
|
36
37
|
ngOnChanges() {
|
|
37
38
|
this.setPosition();
|
|
38
39
|
}
|
|
40
|
+
onContentSizeChanges() {
|
|
41
|
+
this.setPosition();
|
|
42
|
+
}
|
|
39
43
|
setPosition() {
|
|
40
44
|
const windowSize = {
|
|
41
45
|
width: window.innerWidth,
|
|
@@ -65,10 +69,10 @@ export class CalloutComponent {
|
|
|
65
69
|
}
|
|
66
70
|
}
|
|
67
71
|
CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
-
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
72
|
+
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n (rivClientSize)=\"onContentSizeChanges()\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }, { kind: "directive", type: i3.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
69
73
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, decorators: [{
|
|
70
74
|
type: Component,
|
|
71
|
-
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
|
|
75
|
+
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n (rivClientSize)=\"onContentSizeChanges()\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
|
|
72
76
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
|
|
73
77
|
type: Input
|
|
74
78
|
}], isModal: [{
|
|
@@ -110,4 +114,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
110
114
|
];
|
|
111
115
|
CalloutComponent.Directions = ['clockwise', 'counter-clockwise'];
|
|
112
116
|
})(CalloutComponent || (CalloutComponent = {}));
|
|
113
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
117
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsbG91dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9vdmVybGF5L2NhbGxvdXQvY2FsbG91dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9vdmVybGF5L2NhbGxvdXQvY2FsbG91dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBRXZCLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFDTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7OztBQUU5Qyw2RUFBNkU7QUFDN0Usc0NBQXNDO0FBQ3RDLG1HQUFtRztBQU9uRyxNQUFNLE9BQU8sZ0JBQWdCO0lBQzNCLFlBQTZCLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBR25ELFdBQU0sR0FBNkIsSUFBSSxDQUFDO1FBR3hDLFlBQU8sR0FBWSxJQUFJLENBQUM7UUFHeEIsc0JBQWlCLEdBQXNDLGNBQWMsQ0FBQztRQUd0RSxxQkFBZ0IsR0FBd0M7WUFDdEQsR0FBRyxnQkFBZ0IsQ0FBQyxpQkFBaUI7U0FDdEMsQ0FBQztRQUdGLHNCQUFpQixHQUErQixtQkFBbUIsQ0FBQztRQUdwRSxjQUFTLEdBQVksSUFBSSxDQUFDO1FBRzFCLFVBQUssR0FBMkIsTUFBTSxDQUFDO1FBR3ZDLFlBQU8sR0FBc0MsSUFBSSxDQUFDO1FBR2xELFVBQUssR0FBbUMsSUFBSSxDQUFDO1FBUTdDLFNBQUksR0FBVyxDQUFDLENBQUM7UUFDakIsUUFBRyxHQUFXLENBQUMsQ0FBQztRQUNoQixxQkFBZ0IsR0FBc0MsSUFBSSxDQUFDLGlCQUFpQixDQUFDO1FBeURwRSxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztJQWhHWSxDQUFDO0lBK0J2RCxVQUFVLENBQUMsR0FBZTtRQUN4QixJQUFJLEdBQUcsQ0FBQyxNQUFNLEtBQUssR0FBRyxDQUFDLGFBQWEsRUFBRTtZQUNwQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQU1ELGVBQWU7UUFDYixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUNELFdBQVc7UUFDVCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUNELG9CQUFvQjtRQUNsQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELFdBQVc7UUFDVCxNQUFNLFVBQVUsR0FBRztZQUNqQixLQUFLLEVBQUUsTUFBTSxDQUFDLFVBQVU7WUFDeEIsTUFBTSxFQUFFLE1BQU0sQ0FBQyxXQUFXO1NBQzNCLENBQUM7UUFFRixJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssSUFBSSxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssSUFBSSxJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssSUFBSTtZQUN0RSxPQUFPO1FBRVQsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUVuRSxNQUFNLFVBQVUsR0FDZCxJQUFJLENBQUMsTUFBTSxZQUFZLE9BQU87WUFDNUIsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMscUJBQXFCLEVBQUU7WUFDckMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7UUFFbEIsTUFBTSxZQUFZLEdBQUc7WUFDbkIsQ0FBQyxFQUFFLFVBQVUsQ0FBQyxJQUFJLEdBQUcsU0FBUyxDQUFDLElBQUk7WUFDbkMsQ0FBQyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEdBQUcsU0FBUyxDQUFDLEdBQUc7WUFDakMsS0FBSyxFQUFFLFVBQVUsQ0FBQyxLQUFLLEdBQUcsVUFBVSxDQUFDLElBQUk7WUFDekMsTUFBTSxFQUFFLFVBQVUsQ0FBQyxNQUFNLEdBQUcsVUFBVSxDQUFDLEdBQUc7U0FDM0MsQ0FBQztRQUVGLE1BQU0sV0FBVyxHQUFHO1lBQ2xCLEtBQUssRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxXQUFXO1lBQzdDLE1BQU0sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxZQUFZO1NBQ2hELENBQUM7UUFFRixNQUFNLGFBQWEsR0FBRyxTQUFTLENBQzdCLFlBQVksRUFDWixXQUFXLEVBQ1gsVUFBVSxFQUNWLElBQUksQ0FBQyxpQkFBaUIsRUFDdEIsSUFBSSxDQUFDLGdCQUFnQixFQUNyQixJQUFJLENBQUMsaUJBQWlCLEVBQ3RCLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUN2QixDQUFDO1FBRUYsSUFBSSxDQUFDLElBQUksR0FBRyxhQUFhLENBQUMsQ0FBQyxDQUFDO1FBQzVCLElBQUksQ0FBQyxHQUFHLEdBQUcsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUMzQixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsYUFBYSxDQUFDLFFBQVEsQ0FBQztRQUMvQyxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQzNCLENBQUM7OzZHQTlGVSxnQkFBZ0I7aUdBQWhCLGdCQUFnQiwwZUN2QjdCLG9aQWNBOzJGRFNhLGdCQUFnQjtrQkFONUIsU0FBUzsrQkFDRSxhQUFhLG1CQUdOLHVCQUF1QixDQUFDLE1BQU07d0dBTS9DLE1BQU07c0JBREwsS0FBSztnQkFJTixPQUFPO3NCQUROLEtBQUs7Z0JBSU4saUJBQWlCO3NCQURoQixLQUFLO2dCQUlOLGdCQUFnQjtzQkFEZixLQUFLO2dCQU1OLGlCQUFpQjtzQkFEaEIsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBSU4sS0FBSztzQkFESixLQUFLO2dCQUlOLE9BQU87c0JBRE4sU0FBUzt1QkFBQyxTQUFTO2dCQUlwQixLQUFLO3NCQURKLFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFvRTVCLEtBQUs7c0JBRGIsTUFBTTs7QUFJVCxXQUFpQixnQkFBZ0I7SUFDbEIsdUJBQU0sR0FBRyxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQVUsQ0FBQztJQUdwQyxrQ0FBaUIsR0FBRztRQUMvQixVQUFVO1FBQ1YsWUFBWTtRQUNaLFdBQVc7UUFDWCxXQUFXO1FBQ1gsY0FBYztRQUNkLGNBQWM7UUFDZCxjQUFjO1FBQ2QsZUFBZTtRQUNmLGFBQWE7UUFDYixhQUFhO1FBQ2IsYUFBYTtRQUNiLFVBQVU7S0FDRixDQUFDO0lBR0UsMkJBQVUsR0FBRyxDQUFDLFdBQVcsRUFBRSxtQkFBbUIsQ0FBVSxDQUFDO0FBRXhFLENBQUMsRUF0QmdCLGdCQUFnQixLQUFoQixnQkFBZ0IsUUFzQmhDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZ2V0T3JpZ2luIH0gZnJvbSAnLi9jYWxsb3V0LmhlbHBlcnMnO1xuXG4vLyBUT0RPOiBvbmNlIHdlIHVwZ3JhZGUgdG8gQW5ndWxhciAxNiwgdGhpcyBjb21wb25lbnQgY2FuIGJlIGNsZWFuZWQgdXAgd2l0aFxuLy8gc2lnbmFscyBpbnN0ZWFkIG9mIGxpZmVjeWNsZSBob29rcy5cbi8vIGh0dHBzOi8vd3d3Lm5vdGlvbi5zby9yaXZldC9SZXNvbHZlLVRPRE9zLWFmdGVyLUFuZ3VsYXItdXBncmFkZS0xZjI2NjdlYjJhMzE4MGI3OWY2YWQ5MmE3ZTU3NmYwOFxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LWNhbGxvdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FsbG91dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhbGxvdXQuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQ2FsbG91dENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uQ2hhbmdlcyB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICBASW5wdXQoKVxuICBhbmNob3I6IEVsZW1lbnQgfCBET01SZWN0IHwgbnVsbCA9IG51bGw7XG5cbiAgQElucHV0KClcbiAgaXNNb2RhbDogYm9vbGVhbiA9IHRydWU7XG5cbiAgQElucHV0KClcbiAgcHJlZmVycmVkUG9zaXRpb246IENhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbiA9ICdib3R0b20tcmlnaHQnO1xuXG4gIEBJbnB1dCgpXG4gIGFsbG93ZWRQb3NpdGlvbnM6IENhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbltdID0gW1xuICAgIC4uLkNhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbnMsXG4gIF07XG5cbiAgQElucHV0KClcbiAgZmFsbGJhY2tEaXJlY3Rpb246IENhbGxvdXRDb21wb25lbnQuRGlyZWN0aW9uID0gJ2NvdW50ZXItY2xvY2t3aXNlJztcblxuICBASW5wdXQoKVxuICBzaG93Q2FyZXQ6IGJvb2xlYW4gPSB0cnVlO1xuXG4gIEBJbnB1dCgpXG4gIHRoZW1lOiBDYWxsb3V0Q29tcG9uZW50LlRoZW1lID0gJ2RhcmsnO1xuXG4gIEBWaWV3Q2hpbGQoJ2NvbnRlbnQnKVxuICBjb250ZW50OiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PiB8IG51bGwgPSBudWxsO1xuXG4gIEBWaWV3Q2hpbGQoJ3NjcmltJywgeyBzdGF0aWM6IGZhbHNlIH0pXG4gIHNjcmltOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PiB8IG51bGwgPSBudWxsO1xuXG4gIHNjcmltQ2xpY2soZXZ0OiBNb3VzZUV2ZW50KSB7XG4gICAgaWYgKGV2dC50YXJnZXQgPT09IGV2dC5jdXJyZW50VGFyZ2V0KSB7XG4gICAgICB0aGlzLmNsb3NlLmVtaXQoKTtcbiAgICB9XG4gIH1cblxuICBsZWZ0OiBudW1iZXIgPSAwO1xuICB0b3A6IG51bWJlciA9IDA7XG4gIHJlc29sdmVkUG9zaXRpb246IENhbGxvdXRDb21wb25lbnQuQW5jaG9yZWRQb3NpdGlvbiA9IHRoaXMucHJlZmVycmVkUG9zaXRpb247XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuc2V0UG9zaXRpb24oKTtcbiAgfVxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLnNldFBvc2l0aW9uKCk7XG4gIH1cbiAgb25Db250ZW50U2l6ZUNoYW5nZXMoKSB7XG4gICAgdGhpcy5zZXRQb3NpdGlvbigpO1xuICB9XG5cbiAgc2V0UG9zaXRpb24oKSB7XG4gICAgY29uc3Qgd2luZG93U2l6ZSA9IHtcbiAgICAgIHdpZHRoOiB3aW5kb3cuaW5uZXJXaWR0aCxcbiAgICAgIGhlaWdodDogd2luZG93LmlubmVySGVpZ2h0LFxuICAgIH07XG5cbiAgICBpZiAodGhpcy5hbmNob3IgPT09IG51bGwgfHwgdGhpcy5jb250ZW50ID09PSBudWxsIHx8IHRoaXMuc2NyaW0gPT09IG51bGwpXG4gICAgICByZXR1cm47XG5cbiAgICBjb25zdCBzY3JpbVJlY3QgPSB0aGlzLnNjcmltLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICBjb25zdCBhbmNob3JSZWN0ID1cbiAgICAgIHRoaXMuYW5jaG9yIGluc3RhbmNlb2YgRWxlbWVudFxuICAgICAgICA/IHRoaXMuYW5jaG9yLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpXG4gICAgICAgIDogdGhpcy5hbmNob3I7XG5cbiAgICBjb25zdCBhbmNob3JCb3VuZHMgPSB7XG4gICAgICB4OiBhbmNob3JSZWN0LmxlZnQgLSBzY3JpbVJlY3QubGVmdCwgLy8gSW4gbW9zdCBjYXNlcywgdGhlIHNjcmltIHdpbGwgYmUgcG9zaXRpb25lZCBhdCAoMCwwKSwgYnV0IGlmIGl0J3Mgbm90LCB0aGlzIHdpbGwgbWFrZSBzdXJlIHRoZSBjYWxsb3V0IGlzIHBvc2l0aW9uZWQgY29ycmVjdGx5IHJlZ2FyZGxlc3MuXG4gICAgICB5OiBhbmNob3JSZWN0LnRvcCAtIHNjcmltUmVjdC50b3AsXG4gICAgICB3aWR0aDogYW5jaG9yUmVjdC5yaWdodCAtIGFuY2hvclJlY3QubGVmdCxcbiAgICAgIGhlaWdodDogYW5jaG9yUmVjdC5ib3R0b20gLSBhbmNob3JSZWN0LnRvcCxcbiAgICB9O1xuXG4gICAgY29uc3QgY2FsbG91dFNpemUgPSB7XG4gICAgICB3aWR0aDogdGhpcy5jb250ZW50Lm5hdGl2ZUVsZW1lbnQuY2xpZW50V2lkdGgsXG4gICAgICBoZWlnaHQ6IHRoaXMuY29udGVudC5uYXRpdmVFbGVtZW50LmNsaWVudEhlaWdodCxcbiAgICB9O1xuXG4gICAgY29uc3QgY2FsbG91dE9yaWdpbiA9IGdldE9yaWdpbihcbiAgICAgIGFuY2hvckJvdW5kcyxcbiAgICAgIGNhbGxvdXRTaXplLFxuICAgICAgd2luZG93U2l6ZSxcbiAgICAgIHRoaXMucHJlZmVycmVkUG9zaXRpb24sXG4gICAgICB0aGlzLmFsbG93ZWRQb3NpdGlvbnMsXG4gICAgICB0aGlzLmZhbGxiYWNrRGlyZWN0aW9uLFxuICAgICAgdGhpcy5zaG93Q2FyZXQgPyA4IDogMCxcbiAgICApO1xuXG4gICAgdGhpcy5sZWZ0ID0gY2FsbG91dE9yaWdpbi54O1xuICAgIHRoaXMudG9wID0gY2FsbG91dE9yaWdpbi55O1xuICAgIHRoaXMucmVzb2x2ZWRQb3NpdGlvbiA9IGNhbGxvdXRPcmlnaW4ucG9zaXRpb247XG4gICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICB9XG5cbiAgQE91dHB1dCgpXG4gIHJlYWRvbmx5IGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xufVxuXG5leHBvcnQgbmFtZXNwYWNlIENhbGxvdXRDb21wb25lbnQge1xuICBleHBvcnQgY29uc3QgVGhlbWVzID0gWydsaWdodCcsICdkYXJrJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFRoZW1lID0gKHR5cGVvZiBUaGVtZXMpW251bWJlcl07XG5cbiAgZXhwb3J0IGNvbnN0IEFuY2hvcmVkUG9zaXRpb25zID0gW1xuICAgICd0b3AtbGVmdCcsXG4gICAgJ3RvcC1jZW50ZXInLFxuICAgICd0b3AtcmlnaHQnLFxuICAgICdyaWdodC10b3AnLFxuICAgICdjZW50ZXItcmlnaHQnLFxuICAgICdyaWdodC1ib3R0b20nLFxuICAgICdib3R0b20tcmlnaHQnLFxuICAgICdib3R0b20tY2VudGVyJyxcbiAgICAnYm90dG9tLWxlZnQnLFxuICAgICdsZWZ0LWJvdHRvbScsXG4gICAgJ2NlbnRlci1sZWZ0JyxcbiAgICAnbGVmdC10b3AnLFxuICBdIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBBbmNob3JlZFBvc2l0aW9uID0gKHR5cGVvZiBBbmNob3JlZFBvc2l0aW9ucylbbnVtYmVyXTtcblxuICBleHBvcnQgY29uc3QgRGlyZWN0aW9ucyA9IFsnY2xvY2t3aXNlJywgJ2NvdW50ZXItY2xvY2t3aXNlJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIERpcmVjdGlvbiA9ICh0eXBlb2YgRGlyZWN0aW9ucylbbnVtYmVyXTtcbn1cbiIsIjxkaXYgI3NjcmltIGNsYXNzPVwic2NyaW1cIiBbY2xhc3MuZnVsbF09XCJpc01vZGFsXCIgKGNsaWNrKT1cInNjcmltQ2xpY2soJGV2ZW50KVwiPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJjYWxsb3V0XCJcbiAgICAocml2Q2xpZW50U2l6ZSk9XCJvbkNvbnRlbnRTaXplQ2hhbmdlcygpXCJcbiAgICBbbmdDbGFzc109XCJbdGhlbWUsIHJlc29sdmVkUG9zaXRpb25dXCJcbiAgICBbY2xhc3MuY2FyZXRdPVwic2hvd0NhcmV0XCJcbiAgICBbc3R5bGUubGVmdC5weF09XCJsZWZ0XCJcbiAgICBbc3R5bGUudG9wLnB4XT1cInRvcFwiXG4gICAgW3JpdkxvY2tTY3JvbGxdPVwiaXNNb2RhbFwiXG4gICAgI2NvbnRlbnRcbiAgPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -2,11 +2,11 @@ import { __awaiter, __asyncGenerator, __await, __asyncDelegator, __asyncValues }
|
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
3
|
import { DOCUMENT, DatePipe as DatePipe$1, DecimalPipe, CurrencyPipe, PercentPipe, CommonModule } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { Injectable, Inject, Pipe, Directive, Input, EventEmitter, Component, ChangeDetectionStrategy, ViewChild,
|
|
5
|
+
import { Injectable, Inject, Pipe, Directive, Input, EventEmitter, Output, Component, ChangeDetectionStrategy, ViewChild, HostListener, ViewContainerRef, Self, HostBinding, Optional, ContentChild, ElementRef, ContentChildren, TemplateRef, NgModule } from '@angular/core';
|
|
6
6
|
import { BehaviorSubject, Subject, merge, scan, startWith, connectable, map, ReplaySubject, filter, distinctUntilChanged, combineLatest, shareReplay, debounceTime, switchMap, from, pairwise, withLatestFrom, skipUntil, mergeScan, fromEvent, tap, takeUntil, concatWith, of } from 'rxjs';
|
|
7
7
|
import { timeYears, timeYear, timeMonths, timeMonth, timeDays, timeDay, timeSunday, timeWeek, utcYear, utcMonth, utcWeek, utcDay } from 'd3-time';
|
|
8
8
|
import { timeFormat, utcFormat } from 'd3-time-format';
|
|
9
|
-
import { defaultsDeep, sortBy, flattenDeep,
|
|
9
|
+
import { defaultsDeep, sortBy, flattenDeep, debounce, isEqual, cloneDeep, orderBy, range, difference, union } from 'lodash';
|
|
10
10
|
import Fuse from 'fuse.js';
|
|
11
11
|
import { query, style, animate, trigger, transition, group } from '@angular/animations';
|
|
12
12
|
import * as i2 from '@angular/router';
|
|
@@ -360,6 +360,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
360
360
|
args: ['rivLockScroll']
|
|
361
361
|
}] } });
|
|
362
362
|
|
|
363
|
+
class SizeDirective {
|
|
364
|
+
constructor(elementRef, zone) {
|
|
365
|
+
this.elementRef = elementRef;
|
|
366
|
+
this.rivClientSize = new EventEmitter();
|
|
367
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
368
|
+
zone.run(() => {
|
|
369
|
+
for (const entry of entries) {
|
|
370
|
+
this.rivClientSize.emit(entry.target.getBoundingClientRect());
|
|
371
|
+
}
|
|
372
|
+
});
|
|
373
|
+
});
|
|
374
|
+
}
|
|
375
|
+
ngOnInit() {
|
|
376
|
+
this.resizeObserver.observe(this.elementRef.nativeElement);
|
|
377
|
+
}
|
|
378
|
+
ngOnDestroy() {
|
|
379
|
+
this.resizeObserver.unobserve(this.elementRef.nativeElement);
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
SizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
383
|
+
SizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: SizeDirective, selector: "[rivClientSize]", outputs: { rivClientSize: "rivClientSize" }, ngImport: i0 });
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, decorators: [{
|
|
385
|
+
type: Directive,
|
|
386
|
+
args: [{
|
|
387
|
+
selector: '[rivClientSize]',
|
|
388
|
+
}]
|
|
389
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { rivClientSize: [{
|
|
390
|
+
type: Output
|
|
391
|
+
}] } });
|
|
392
|
+
|
|
363
393
|
// TODO: once we upgrade to Angular 16, this component can be cleaned up with
|
|
364
394
|
// signals instead of lifecycle hooks.
|
|
365
395
|
// https://www.notion.so/rivet/Resolve-TODOs-after-Angular-upgrade-1f2667eb2a3180b79f6ad92a7e576f08
|
|
@@ -393,6 +423,9 @@ class CalloutComponent {
|
|
|
393
423
|
ngOnChanges() {
|
|
394
424
|
this.setPosition();
|
|
395
425
|
}
|
|
426
|
+
onContentSizeChanges() {
|
|
427
|
+
this.setPosition();
|
|
428
|
+
}
|
|
396
429
|
setPosition() {
|
|
397
430
|
const windowSize = {
|
|
398
431
|
width: window.innerWidth,
|
|
@@ -422,10 +455,10 @@ class CalloutComponent {
|
|
|
422
455
|
}
|
|
423
456
|
}
|
|
424
457
|
CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
425
|
-
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
458
|
+
CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n (rivClientSize)=\"onContentSizeChanges()\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
426
459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, decorators: [{
|
|
427
460
|
type: Component,
|
|
428
|
-
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
|
|
461
|
+
args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #scrim class=\"scrim\" [class.full]=\"isModal\" (click)=\"scrimClick($event)\">\n <div\n class=\"callout\"\n (rivClientSize)=\"onContentSizeChanges()\"\n [ngClass]=\"[theme, resolvedPosition]\"\n [class.caret]=\"showCaret\"\n [style.left.px]=\"left\"\n [style.top.px]=\"top\"\n [rivLockScroll]=\"isModal\"\n #content\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
|
|
429
462
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
|
|
430
463
|
type: Input
|
|
431
464
|
}], isModal: [{
|
|
@@ -2384,6 +2417,10 @@ class SelectComponent extends InputLabelComponent {
|
|
|
2384
2417
|
this.size = 'medium';
|
|
2385
2418
|
this.disabled = false;
|
|
2386
2419
|
this.locked = false;
|
|
2420
|
+
this.searchChange = debounce((query) => {
|
|
2421
|
+
var _a, _b;
|
|
2422
|
+
(_b = (_a = this.manager) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.next({ type: 'searchChange', payload: query });
|
|
2423
|
+
}, 500);
|
|
2387
2424
|
}
|
|
2388
2425
|
getTrigger() {
|
|
2389
2426
|
var _a, _b, _c;
|
|
@@ -2419,10 +2456,10 @@ class SelectComponent extends InputLabelComponent {
|
|
|
2419
2456
|
}
|
|
2420
2457
|
}
|
|
2421
2458
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2422
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"\n manager?.actions?.next({ type: 'searchChange', payload: $event })\n \"\n ></riv-search>\n <div class=\"options\">\n <riv-select-node\n *ngIf=\"\n s.selection.allowMultiSelect &&\n s.selection.allowSelectAll &&\n !s.display.zeroStateMessage\n \"\n [mode]=\"'multi'\"\n [node]=\"{\n id: '__NOOP__',\n title: s.query.search ? 'Select all matching' : 'Select all',\n selected: s.selection.visibleSelectionState,\n selectable: true,\n expandable: false,\n expanded: false\n }\"\n (selectChange)=\"\n manager?.actions?.next({ type: 'visibleSelectedChange' })\n \"\n ></riv-select-node>\n <div\n *ngFor=\"let group of s.fullOptionGroups\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n </span>\n <ng-container *ngFor=\"let option of group.options\">\n <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ node: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #standardTemplate>\n <riv-select-node\n [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n [node]=\"option\"\n [showSingleSelected]=\"s.display.showSingleSelected\"\n (selectChange)=\"\n selectChange(s.selection.allowMultiSelect, $event)\n \"\n (expandChange)=\"\n manager?.actions?.next({\n type: 'toggleOptionExpanded',\n id: $event\n })\n \"\n ></riv-select-node>\n </ng-template>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.display.displayLimitMessage; let message\"\n class=\"display-limit\"\n >\n {{ message }}\n </span>\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </div>\n <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n <ng-container\n *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n ></ng-container>\n </footer>\n </div>\n </riv-loading-cover>\n </ng-template>\n\n <ng-container *ngIf=\"!s.display.inline; else content\">\n <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ state: s }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <span *ngIf=\"s.selection.selected.size > 1\" class=\"selected-count\">\n {{ s.selection.selected.size | rivNumber }}\n </span>\n <span class=\"value\">{{ s.display.selected }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon\n *ngIf=\"!locked\"\n [name]=\"'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n </ng-template>\n\n <ng-container *ngIf=\"s.display.open\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n</ng-container>\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;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2459
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"searchChange($event)\"\n ></riv-search>\n <div class=\"options\">\n <riv-select-node\n *ngIf=\"\n s.selection.allowMultiSelect &&\n s.selection.allowSelectAll &&\n !s.display.zeroStateMessage\n \"\n [mode]=\"'multi'\"\n [node]=\"{\n id: '__NOOP__',\n title: s.query.search ? 'Select all matching' : 'Select all',\n selected: s.selection.visibleSelectionState,\n selectable: true,\n expandable: false,\n expanded: false\n }\"\n (selectChange)=\"\n manager?.actions?.next({ type: 'visibleSelectedChange' })\n \"\n ></riv-select-node>\n <div\n *ngFor=\"let group of s.fullOptionGroups\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n </span>\n <ng-container *ngFor=\"let option of group.options\">\n <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ node: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #standardTemplate>\n <riv-select-node\n [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n [node]=\"option\"\n [showSingleSelected]=\"s.display.showSingleSelected\"\n (selectChange)=\"\n selectChange(s.selection.allowMultiSelect, $event)\n \"\n (expandChange)=\"\n manager?.actions?.next({\n type: 'toggleOptionExpanded',\n id: $event\n })\n \"\n ></riv-select-node>\n </ng-template>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.display.displayLimitMessage; let message\"\n class=\"display-limit\"\n >\n {{ message }}\n </span>\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </div>\n <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n <ng-container\n *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n ></ng-container>\n </footer>\n </div>\n </riv-loading-cover>\n </ng-template>\n\n <ng-container *ngIf=\"!s.display.inline; else content\">\n <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ state: s }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <span *ngIf=\"s.selection.selected.size > 1\" class=\"selected-count\">\n {{ s.selection.selected.size | rivNumber }}\n </span>\n <span class=\"value\">{{ s.display.selected }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon\n *ngIf=\"!locked\"\n [name]=\"'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n </ng-template>\n\n <ng-container *ngIf=\"s.display.open\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n</ng-container>\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;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2423
2460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
2424
2461
|
type: Component,
|
|
2425
|
-
args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"
|
|
2462
|
+
args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-template #content>\n <riv-loading-cover [loading]=\"s.load.loading\">\n <div\n class=\"content-body\"\n [class.inline]=\"s.display.inline\"\n [ngStyle]=\"{\n 'max-height': s.display.maxHeight,\n 'max-width': s.display.maxWidth\n }\"\n >\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-search\n *ngIf=\"s.query.showSearch\"\n [value]=\"s.query.search\"\n [placeholder]=\"s.query.searchPlaceholder\"\n [autoFocus]=\"true\"\n (valueChange)=\"searchChange($event)\"\n ></riv-search>\n <div class=\"options\">\n <riv-select-node\n *ngIf=\"\n s.selection.allowMultiSelect &&\n s.selection.allowSelectAll &&\n !s.display.zeroStateMessage\n \"\n [mode]=\"'multi'\"\n [node]=\"{\n id: '__NOOP__',\n title: s.query.search ? 'Select all matching' : 'Select all',\n selected: s.selection.visibleSelectionState,\n selectable: true,\n expandable: false,\n expanded: false\n }\"\n (selectChange)=\"\n manager?.actions?.next({ type: 'visibleSelectedChange' })\n \"\n ></riv-select-node>\n <div\n *ngFor=\"let group of s.fullOptionGroups\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n </span>\n <ng-container *ngFor=\"let option of group.options\">\n <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ node: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #standardTemplate>\n <riv-select-node\n [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n [node]=\"option\"\n [showSingleSelected]=\"s.display.showSingleSelected\"\n (selectChange)=\"\n selectChange(s.selection.allowMultiSelect, $event)\n \"\n (expandChange)=\"\n manager?.actions?.next({\n type: 'toggleOptionExpanded',\n id: $event\n })\n \"\n ></riv-select-node>\n </ng-template>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.display.displayLimitMessage; let message\"\n class=\"display-limit\"\n >\n {{ message }}\n </span>\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </div>\n <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n <ng-container\n *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n ></ng-container>\n </footer>\n </div>\n </riv-loading-cover>\n </ng-template>\n\n <ng-container *ngIf=\"!s.display.inline; else content\">\n <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ state: s }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <span *ngIf=\"s.selection.selected.size > 1\" class=\"selected-count\">\n {{ s.selection.selected.size | rivNumber }}\n </span>\n <span class=\"value\">{{ s.display.selected }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon\n *ngIf=\"!locked\"\n [name]=\"'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n </ng-template>\n\n <ng-container *ngIf=\"s.display.open\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n</ng-container>\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;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
|
|
2426
2463
|
}], propDecorators: { manager: [{
|
|
2427
2464
|
type: Input
|
|
2428
2465
|
}], size: [{
|
|
@@ -4309,36 +4346,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4309
4346
|
type: Output
|
|
4310
4347
|
}] } });
|
|
4311
4348
|
|
|
4312
|
-
class SizeDirective {
|
|
4313
|
-
constructor(elementRef, zone) {
|
|
4314
|
-
this.elementRef = elementRef;
|
|
4315
|
-
this.rivClientSize = new EventEmitter();
|
|
4316
|
-
this.resizeObserver = new ResizeObserver(entries => {
|
|
4317
|
-
zone.run(() => {
|
|
4318
|
-
for (const entry of entries) {
|
|
4319
|
-
this.rivClientSize.emit(entry.target.getBoundingClientRect());
|
|
4320
|
-
}
|
|
4321
|
-
});
|
|
4322
|
-
});
|
|
4323
|
-
}
|
|
4324
|
-
ngOnInit() {
|
|
4325
|
-
this.resizeObserver.observe(this.elementRef.nativeElement);
|
|
4326
|
-
}
|
|
4327
|
-
ngOnDestroy() {
|
|
4328
|
-
this.resizeObserver.unobserve(this.elementRef.nativeElement);
|
|
4329
|
-
}
|
|
4330
|
-
}
|
|
4331
|
-
SizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4332
|
-
SizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: SizeDirective, selector: "[rivClientSize]", outputs: { rivClientSize: "rivClientSize" }, ngImport: i0 });
|
|
4333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, decorators: [{
|
|
4334
|
-
type: Directive,
|
|
4335
|
-
args: [{
|
|
4336
|
-
selector: '[rivClientSize]',
|
|
4337
|
-
}]
|
|
4338
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { rivClientSize: [{
|
|
4339
|
-
type: Output
|
|
4340
|
-
}] } });
|
|
4341
|
-
|
|
4342
4349
|
class ToastComponent {
|
|
4343
4350
|
constructor() {
|
|
4344
4351
|
this.variant = 'basic';
|