@rivet-health/design-system 40.29.0 → 40.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/select/select/select.component.mjs +6 -3
- package/esm2020/lib/input/select/select-node/select-node.component.mjs +5 -3
- package/fesm2015/rivet-health-design-system.mjs +9 -4
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +9 -4
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/select/select/select.component.d.ts +8 -1
- package/lib/input/select/select-node/select-node.component.d.ts +10 -2
- package/package.json +1 -1
|
@@ -3012,16 +3012,18 @@ class SelectNodeComponent {
|
|
|
3012
3012
|
}
|
|
3013
3013
|
}
|
|
3014
3014
|
SelectNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3015
|
-
SelectNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n <riv-highlight\n class=\"title\"\n [text]=\"n.title\"\n [indices]=\"n.titleHighlightIndices ?? []\"\n ></riv-highlight>\n <span *ngIf=\"n.subtitle\"> </span>\n <riv-highlight\n *ngIf=\"n.subtitle\"\n class=\"subtitle\"\n [text]=\"n.subtitle\"\n [indices]=\"n.subtitleHighlightIndices ?? []\"\n ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n <ng-container *ngIf=\"mode === 'multi'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n <riv-checkbox\n *ngIf=\"n.selectable\"\n [value]=\"n.selected === true\"\n [indeterminate]=\"n.selected === 'indeterminate'\"\n [disabled]=\"getDisabled(n)\"\n (valueChange)=\"selectChange.emit(getId(n))\"\n >\n </riv-checkbox>\n <span\n rivTruncate\n class=\"name\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </label>\n <button\n *ngIf=\"n.children?.length\"\n class=\"expand\"\n [disabled]=\"!n.expandable\"\n [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n (click)=\"expandChange.emit(getId(n))\"\n >\n <riv-icon\n [size]=\"20\"\n [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n ></riv-icon>\n </button>\n </div>\n <div *ngIf=\"n.expanded\" class=\"children\">\n <riv-select-node\n *ngFor=\"let child of n.children\"\n [mode]=\"mode\"\n [node]=\"child\"\n [showSingleSelected]=\"showSingleSelected\"\n (selectChange)=\"selectChange.emit($event)\"\n (expandChange)=\"expandChange.emit($event)\"\n ></riv-select-node>\n </div>\n </ng-container>\n <ng-container *ngIf=\"mode === 'single'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <button\n class=\"single\"\n [disabled]=\"getDisabled(n)\"\n [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n (click)=\"selectChange.emit(getId(n))\"\n >\n <span\n class=\"label\"\n rivTruncate\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <riv-icon\n *ngIf=\"showSingleSelected && n.selected\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </button>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3015
|
+
SelectNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected", titleTemplate: "titleTemplate" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n <riv-highlight\n class=\"title\"\n [text]=\"n.title\"\n [indices]=\"n.titleHighlightIndices ?? []\"\n ></riv-highlight>\n <span *ngIf=\"n.subtitle\"> </span>\n <riv-highlight\n *ngIf=\"n.subtitle\"\n class=\"subtitle\"\n [text]=\"n.subtitle\"\n [indices]=\"n.subtitleHighlightIndices ?? []\"\n ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n <ng-container *ngIf=\"mode === 'multi'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n <riv-checkbox\n *ngIf=\"n.selectable\"\n [value]=\"n.selected === true\"\n [indeterminate]=\"n.selected === 'indeterminate'\"\n [disabled]=\"getDisabled(n)\"\n (valueChange)=\"selectChange.emit(getId(n))\"\n >\n </riv-checkbox>\n <span\n rivTruncate\n class=\"name\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </label>\n <button\n *ngIf=\"n.children?.length\"\n class=\"expand\"\n [disabled]=\"!n.expandable\"\n [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n (click)=\"expandChange.emit(getId(n))\"\n >\n <riv-icon\n [size]=\"20\"\n [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n ></riv-icon>\n </button>\n </div>\n <div *ngIf=\"n.expanded\" class=\"children\">\n <riv-select-node\n *ngFor=\"let child of n.children\"\n [mode]=\"mode\"\n [node]=\"child\"\n [showSingleSelected]=\"showSingleSelected\"\n [titleTemplate]=\"titleTemplate\"\n (selectChange)=\"selectChange.emit($event)\"\n (expandChange)=\"expandChange.emit($event)\"\n ></riv-select-node>\n </div>\n </ng-container>\n <ng-container *ngIf=\"mode === 'single'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <button\n class=\"single\"\n [disabled]=\"getDisabled(n)\"\n [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n (click)=\"selectChange.emit(getId(n))\"\n >\n <span\n class=\"label\"\n rivTruncate\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <riv-icon\n *ngIf=\"showSingleSelected && n.selected\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </button>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3016
3016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectNodeComponent, decorators: [{
|
|
3017
3017
|
type: Component,
|
|
3018
|
-
args: [{ selector: 'riv-select-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #title let-n=\"node\">\n <riv-highlight\n class=\"title\"\n [text]=\"n.title\"\n [indices]=\"n.titleHighlightIndices ?? []\"\n ></riv-highlight>\n <span *ngIf=\"n.subtitle\"> </span>\n <riv-highlight\n *ngIf=\"n.subtitle\"\n class=\"subtitle\"\n [text]=\"n.subtitle\"\n [indices]=\"n.subtitleHighlightIndices ?? []\"\n ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n <ng-container *ngIf=\"mode === 'multi'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n <riv-checkbox\n *ngIf=\"n.selectable\"\n [value]=\"n.selected === true\"\n [indeterminate]=\"n.selected === 'indeterminate'\"\n [disabled]=\"getDisabled(n)\"\n (valueChange)=\"selectChange.emit(getId(n))\"\n >\n </riv-checkbox>\n <span\n rivTruncate\n class=\"name\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </label>\n <button\n *ngIf=\"n.children?.length\"\n class=\"expand\"\n [disabled]=\"!n.expandable\"\n [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n (click)=\"expandChange.emit(getId(n))\"\n >\n <riv-icon\n [size]=\"20\"\n [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n ></riv-icon>\n </button>\n </div>\n <div *ngIf=\"n.expanded\" class=\"children\">\n <riv-select-node\n *ngFor=\"let child of n.children\"\n [mode]=\"mode\"\n [node]=\"child\"\n [showSingleSelected]=\"showSingleSelected\"\n (selectChange)=\"selectChange.emit($event)\"\n (expandChange)=\"expandChange.emit($event)\"\n ></riv-select-node>\n </div>\n </ng-container>\n <ng-container *ngIf=\"mode === 'single'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <button\n class=\"single\"\n [disabled]=\"getDisabled(n)\"\n [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n (click)=\"selectChange.emit(getId(n))\"\n >\n <span\n class=\"label\"\n rivTruncate\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <riv-icon\n *ngIf=\"showSingleSelected && n.selected\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </button>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"] }]
|
|
3018
|
+
args: [{ selector: 'riv-select-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #title let-n=\"node\">\n <riv-highlight\n class=\"title\"\n [text]=\"n.title\"\n [indices]=\"n.titleHighlightIndices ?? []\"\n ></riv-highlight>\n <span *ngIf=\"n.subtitle\"> </span>\n <riv-highlight\n *ngIf=\"n.subtitle\"\n class=\"subtitle\"\n [text]=\"n.subtitle\"\n [indices]=\"n.subtitleHighlightIndices ?? []\"\n ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n <ng-container *ngIf=\"mode === 'multi'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n <riv-checkbox\n *ngIf=\"n.selectable\"\n [value]=\"n.selected === true\"\n [indeterminate]=\"n.selected === 'indeterminate'\"\n [disabled]=\"getDisabled(n)\"\n (valueChange)=\"selectChange.emit(getId(n))\"\n >\n </riv-checkbox>\n <span\n rivTruncate\n class=\"name\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </label>\n <button\n *ngIf=\"n.children?.length\"\n class=\"expand\"\n [disabled]=\"!n.expandable\"\n [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n (click)=\"expandChange.emit(getId(n))\"\n >\n <riv-icon\n [size]=\"20\"\n [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n ></riv-icon>\n </button>\n </div>\n <div *ngIf=\"n.expanded\" class=\"children\">\n <riv-select-node\n *ngFor=\"let child of n.children\"\n [mode]=\"mode\"\n [node]=\"child\"\n [showSingleSelected]=\"showSingleSelected\"\n [titleTemplate]=\"titleTemplate\"\n (selectChange)=\"selectChange.emit($event)\"\n (expandChange)=\"expandChange.emit($event)\"\n ></riv-select-node>\n </div>\n </ng-container>\n <ng-container *ngIf=\"mode === 'single'\">\n <div\n #row\n class=\"row\"\n [rivTooltip]=\"\n getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n >\n <button\n class=\"single\"\n [disabled]=\"getDisabled(n)\"\n [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n (click)=\"selectChange.emit(getId(n))\"\n >\n <span\n class=\"label\"\n rivTruncate\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n >\n <ng-container\n *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n ></ng-container>\n </span>\n <span class=\"help\">\n <riv-help\n *ngIf=\"getHelp(n); let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <span\n class=\"spacer\"\n [rivTooltip]=\"\n getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n \"\n [rivTooltipAnchor]=\"row\"\n ></span>\n <riv-icon\n *ngIf=\"showSingleSelected && n.selected\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n <span *ngIf=\"includeCount()\" class=\"count\">\n {{ getCount(n) | rivNumber }}\n </span>\n </button>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"] }]
|
|
3019
3019
|
}], propDecorators: { mode: [{
|
|
3020
3020
|
type: Input
|
|
3021
3021
|
}], node: [{
|
|
3022
3022
|
type: Input
|
|
3023
3023
|
}], showSingleSelected: [{
|
|
3024
3024
|
type: Input
|
|
3025
|
+
}], titleTemplate: [{
|
|
3026
|
+
type: Input
|
|
3025
3027
|
}], selectChange: [{
|
|
3026
3028
|
type: Output
|
|
3027
3029
|
}], expandChange: [{
|
|
@@ -3160,10 +3162,10 @@ class SelectComponent extends InputLabelComponent {
|
|
|
3160
3162
|
}
|
|
3161
3163
|
}
|
|
3162
3164
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3163
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", grow: "grow", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], 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 'min-height': s.display.minHeight,\n 'min-width': s.display.minWidth\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 *ngIf=\"s.query.showOrder\">\n <span class=\"order-by\">Sort by:</span>\n <riv-select [manager]=\"orderByManager\">\n <ng-template #trigger let-state=\"state\">\n <span\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n [iconPosition]=\"'last'\"\n >\n {{ getSelectedOrderByOption(s)?.title }}\n </span>\n </ng-template>\n </riv-select>\n </div>\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; trackBy: trackBySymbol\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n <riv-help\n *ngIf=\"group.help; let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <ng-container\n *ngFor=\"let option of group.options; trackBy: trackByOption\"\n >\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 [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n class=\"custom-trigger-button\"\n [class.grow]=\"grow\"\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 [state]=\"state\"\n [errorMessage]=\"errorMessage\"\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 [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <ng-container\n *ngIf=\"\n customSelectedOptionsTemplate;\n else standardSelectedOptionsTemplate\n \"\n >\n <span class=\"value\">\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n ></ng-container>\n </span>\n </ng-container>\n <ng-template #standardSelectedOptionsTemplate>\n <span class=\"value\">{{\n s.display.formattedSelectedOptions\n }}</span>\n <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n {{ s.display.pillCount | rivNumber }}\n </span>\n </ng-template>\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]=\"s.display.open ? 'ChevronUp' : '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]=\"allowedCalloutPositions\"\n [preferredPosition]=\"preferredCalloutPosition\"\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-low-contrast)}.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)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.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;display:flex;align-items:center;gap:var(--size-small)}.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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }, { 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 });
|
|
3165
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", grow: "grow", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "optionTitleTemplate", first: true, predicate: ["optionTitle"], 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 'min-height': s.display.minHeight,\n 'min-width': s.display.minWidth\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 *ngIf=\"s.query.showOrder\">\n <span class=\"order-by\">Sort by:</span>\n <riv-select [manager]=\"orderByManager\">\n <ng-template #trigger let-state=\"state\">\n <span\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n [iconPosition]=\"'last'\"\n >\n {{ getSelectedOrderByOption(s)?.title }}\n </span>\n </ng-template>\n </riv-select>\n </div>\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; trackBy: trackBySymbol\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n <riv-help\n *ngIf=\"group.help; let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <ng-container\n *ngFor=\"let option of group.options; trackBy: trackByOption\"\n >\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 [titleTemplate]=\"optionTitleTemplate\"\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 [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n class=\"custom-trigger-button\"\n [class.grow]=\"grow\"\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 [state]=\"state\"\n [errorMessage]=\"errorMessage\"\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 [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <ng-container\n *ngIf=\"\n customSelectedOptionsTemplate;\n else standardSelectedOptionsTemplate\n \"\n >\n <span class=\"value\">\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n ></ng-container>\n </span>\n </ng-container>\n <ng-template #standardSelectedOptionsTemplate>\n <span class=\"value\">{{\n s.display.formattedSelectedOptions\n }}</span>\n <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n {{ s.display.pillCount | rivNumber }}\n </span>\n </ng-template>\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]=\"s.display.open ? 'ChevronUp' : '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]=\"allowedCalloutPositions\"\n [preferredPosition]=\"preferredCalloutPosition\"\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-low-contrast)}.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)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.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;display:flex;align-items:center;gap:var(--size-small)}.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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], 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 });
|
|
3164
3166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectComponent, decorators: [{
|
|
3165
3167
|
type: Component,
|
|
3166
|
-
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 'min-height': s.display.minHeight,\n 'min-width': s.display.minWidth\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 *ngIf=\"s.query.showOrder\">\n <span class=\"order-by\">Sort by:</span>\n <riv-select [manager]=\"orderByManager\">\n <ng-template #trigger let-state=\"state\">\n <span\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n [iconPosition]=\"'last'\"\n >\n {{ getSelectedOrderByOption(s)?.title }}\n </span>\n </ng-template>\n </riv-select>\n </div>\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; trackBy: trackBySymbol\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n <riv-help\n *ngIf=\"group.help; let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <ng-container\n *ngFor=\"let option of group.options; trackBy: trackByOption\"\n >\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 [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n class=\"custom-trigger-button\"\n [class.grow]=\"grow\"\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 [state]=\"state\"\n [errorMessage]=\"errorMessage\"\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 [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <ng-container\n *ngIf=\"\n customSelectedOptionsTemplate;\n else standardSelectedOptionsTemplate\n \"\n >\n <span class=\"value\">\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n ></ng-container>\n </span>\n </ng-container>\n <ng-template #standardSelectedOptionsTemplate>\n <span class=\"value\">{{\n s.display.formattedSelectedOptions\n }}</span>\n <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n {{ s.display.pillCount | rivNumber }}\n </span>\n </ng-template>\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]=\"s.display.open ? 'ChevronUp' : '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]=\"allowedCalloutPositions\"\n [preferredPosition]=\"preferredCalloutPosition\"\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-low-contrast)}.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)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.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;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
|
|
3168
|
+
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 'min-height': s.display.minHeight,\n 'min-width': s.display.minWidth\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 *ngIf=\"s.query.showOrder\">\n <span class=\"order-by\">Sort by:</span>\n <riv-select [manager]=\"orderByManager\">\n <ng-template #trigger let-state=\"state\">\n <span\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'small'\"\n [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n [iconPosition]=\"'last'\"\n >\n {{ getSelectedOrderByOption(s)?.title }}\n </span>\n </ng-template>\n </riv-select>\n </div>\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; trackBy: trackBySymbol\"\n class=\"group\"\n [class.divider]=\"s.display.dividers\"\n >\n <span *ngIf=\"group.header; let header\" class=\"header\">\n {{ header }}\n <riv-help\n *ngIf=\"group.help; let help\"\n [help]=\"help\"\n [size]=\"12\"\n ></riv-help>\n </span>\n <ng-container\n *ngFor=\"let option of group.options; trackBy: trackByOption\"\n >\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 [titleTemplate]=\"optionTitleTemplate\"\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 [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n class=\"custom-trigger-button\"\n [class.grow]=\"grow\"\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 [state]=\"state\"\n [errorMessage]=\"errorMessage\"\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 [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (click)=\"allowedOpen()\"\n [disabled]=\"disabled || locked\"\n [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"s.selection.selected.size; else placeholderValue\"\n >\n <ng-container\n *ngIf=\"\n customSelectedOptionsTemplate;\n else standardSelectedOptionsTemplate\n \"\n >\n <span class=\"value\">\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n ></ng-container>\n </span>\n </ng-container>\n <ng-template #standardSelectedOptionsTemplate>\n <span class=\"value\">{{\n s.display.formattedSelectedOptions\n }}</span>\n <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n {{ s.display.pillCount | rivNumber }}\n </span>\n </ng-template>\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]=\"s.display.open ? 'ChevronUp' : '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]=\"allowedCalloutPositions\"\n [preferredPosition]=\"preferredCalloutPosition\"\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-low-contrast)}.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)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.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;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
|
|
3167
3169
|
}], propDecorators: { manager: [{
|
|
3168
3170
|
type: Input
|
|
3169
3171
|
}], size: [{
|
|
@@ -3187,6 +3189,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3187
3189
|
}], optionTemplate: [{
|
|
3188
3190
|
type: ContentChild,
|
|
3189
3191
|
args: ['option']
|
|
3192
|
+
}], optionTitleTemplate: [{
|
|
3193
|
+
type: ContentChild,
|
|
3194
|
+
args: ['optionTitle']
|
|
3190
3195
|
}], headerTemplate: [{
|
|
3191
3196
|
type: ContentChild,
|
|
3192
3197
|
args: ['header']
|