@rivet-health/design-system 40.10.0 → 40.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/checkbox/checkbox.component.mjs +1 -1
- package/esm2020/lib/input/date-range/date-range.component.mjs +1 -1
- package/esm2020/lib/input/search-select/search-select.component.mjs +1 -1
- package/esm2020/lib/navigation/views/all-views-modal/all-views-modal.component.mjs +1 -1
- package/esm2020/lib/navigation/views/views/views.component.mjs +1 -1
- package/esm2020/lib/notification/banner/banner.component.mjs +1 -1
- package/esm2020/lib/overlay/callout/help/help.component.mjs +1 -1
- package/esm2020/lib/overlay/callout/tooltip/tooltip.directive.mjs +36 -3
- package/esm2020/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs +1 -1
- package/esm2020/lib/table/table/table-csv-export/table-csv-export.component.mjs +1 -1
- package/esm2020/lib/table/table/table-search-columns/table-search-columns.component.mjs +1 -1
- package/esm2020/lib/visualization/donut/donut.component.mjs +1 -1
- package/esm2020/lib/visualization/legend-item/legend-item.component.mjs +1 -1
- package/esm2020/lib/visualization/metric/metric.component.mjs +1 -1
- package/fesm2015/rivet-health-design-system.mjs +48 -15
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +48 -15
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/overlay/callout/tooltip/tooltip.directive.d.ts +19 -1
- package/package.json +1 -1
|
@@ -44,7 +44,7 @@ export class CheckboxComponent {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
-
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", checkboxTooltip: "checkboxTooltip", indeterminate: "indeterminate", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage", ariaLabel: "ariaLabel" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label\n #label\n [class.disabled]=\"disabled\"\n [class.has-content]=\"!isCheckboxOnly()\"\n>\n <input\n #input\n type=\"checkbox\"\n [id]=\"identifier\"\n [name]=\"name\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [class.error]=\"state === 'error'\"\n (change)=\"emit(!!input.checked)\"\n [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n [rivTooltip]=\"checkboxTooltip\"\n [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n />\n <ng-content></ng-content>\n</label>\n<riv-validation-message\n *ngIf=\"errorMessage\"\n class=\"error-message\"\n [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light-blend);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: i3.ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
47
|
+
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", checkboxTooltip: "checkboxTooltip", indeterminate: "indeterminate", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage", ariaLabel: "ariaLabel" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label\n #label\n [class.disabled]=\"disabled\"\n [class.has-content]=\"!isCheckboxOnly()\"\n>\n <input\n #input\n type=\"checkbox\"\n [id]=\"identifier\"\n [name]=\"name\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [class.error]=\"state === 'error'\"\n (change)=\"emit(!!input.checked)\"\n [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n [rivTooltip]=\"checkboxTooltip\"\n [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n />\n <ng-content></ng-content>\n</label>\n<riv-validation-message\n *ngIf=\"errorMessage\"\n class=\"error-message\"\n [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light-blend);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i3.ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
50
|
args: [{ selector: 'riv-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n #label\n [class.disabled]=\"disabled\"\n [class.has-content]=\"!isCheckboxOnly()\"\n>\n <input\n #input\n type=\"checkbox\"\n [id]=\"identifier\"\n [name]=\"name\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [class.error]=\"state === 'error'\"\n (change)=\"emit(!!input.checked)\"\n [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n [rivTooltip]=\"checkboxTooltip\"\n [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n />\n <ng-content></ng-content>\n</label>\n<riv-validation-message\n *ngIf=\"errorMessage\"\n class=\"error-message\"\n [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light-blend);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"] }]
|
|
@@ -200,7 +200,7 @@ export class DateRangeComponent extends InputLabelComponent {
|
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
203
|
-
DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n ></ng-container>\n </button>\n</ng-container>\n<ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n</ng-template>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\" [class.include-preset]=\"showPresets\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n [orderBy]=\"'source'\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
203
|
+
DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n ></ng-container>\n </button>\n</ng-container>\n<ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n</ng-template>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\" [class.include-preset]=\"showPresets\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n [orderBy]=\"'source'\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
204
204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n <button\n #customTriggerButton\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerTemplate\"\n [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n ></ng-container>\n </button>\n</ng-container>\n<ng-template #standardTrigger>\n <riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n >\n <button\n #standardTriggerButton\n class=\"trigger\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n </riv-input-label>\n</ng-template>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"getTrigger()\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\" [class.include-preset]=\"showPresets\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n [orderBy]=\"'source'\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0);cursor:pointer}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
|
|
@@ -137,7 +137,7 @@ export class SearchSelectComponent {
|
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
SearchSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
-
SearchSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchSelectComponent, selector: "riv-search-select", inputs: { options: "options", selected: "selected", placeholder: "placeholder", addNewLabel: "addNewLabel", newTooltip: "newTooltip", size: "size", disabled: "disabled", label: "label", help: "help", required: "required", state: "state", errorMessage: "errorMessage", optionTemplate: "optionTemplate", chipTemplate: "chipTemplate" }, outputs: { selectedChange: "selectedChange", addNew: "addNew" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage ?? ''\"\n>\n <div class=\"search-select\" [class.disabled]=\"disabled\">\n <div #trigger class=\"input-wrapper\">\n <input\n #searchInput\n type=\"text\"\n [placeholder]=\"placeholder\"\n [value]=\"searchText\"\n [disabled]=\"disabled\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (input)=\"onSearchInput(searchInput.value)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n />\n </div>\n\n <div *ngIf=\"selected.length > 0\" class=\"chips\">\n <div\n *ngFor=\"let option of selected; trackBy: trackByOption\"\n class=\"chip\"\n [class.new]=\"option.new\"\n [class.existing]=\"!option.new\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n >\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n [size]=\"'xsmall'\"\n [disabled]=\"disabled\"\n (click)=\"removeOption(option)\"\n ></button>\n <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n <ng-container\n *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultChip>\n <span class=\"chip-text\">{{ option.title }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"isOpen\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'bottom-right'\"\n [allowedPositions]=\"['bottom-right']\"\n (close)=\"close()\"\n >\n <div class=\"dropdown\">\n <button\n *ngIf=\"showAddNew\"\n type=\"button\"\n class=\"dropdown-option add-new\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onAddNew()\"\n >\n <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n </button>\n\n <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n <button\n *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n type=\"button\"\n class=\"dropdown-option\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectOption(option)\"\n >\n <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultOption>\n <span class=\"option-title\">{{ option.title }}</span>\n <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n option.subtitle\n }}</span>\n </ng-template>\n </button>\n </div>\n\n <div\n *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n class=\"no-results\"\n >\n No results found\n </div>\n </div>\n </riv-callout>\n </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i7.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
140
|
+
SearchSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchSelectComponent, selector: "riv-search-select", inputs: { options: "options", selected: "selected", placeholder: "placeholder", addNewLabel: "addNewLabel", newTooltip: "newTooltip", size: "size", disabled: "disabled", label: "label", help: "help", required: "required", state: "state", errorMessage: "errorMessage", optionTemplate: "optionTemplate", chipTemplate: "chipTemplate" }, outputs: { selectedChange: "selectedChange", addNew: "addNew" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage ?? ''\"\n>\n <div class=\"search-select\" [class.disabled]=\"disabled\">\n <div #trigger class=\"input-wrapper\">\n <input\n #searchInput\n type=\"text\"\n [placeholder]=\"placeholder\"\n [value]=\"searchText\"\n [disabled]=\"disabled\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (input)=\"onSearchInput(searchInput.value)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n />\n </div>\n\n <div *ngIf=\"selected.length > 0\" class=\"chips\">\n <div\n *ngFor=\"let option of selected; trackBy: trackByOption\"\n class=\"chip\"\n [class.new]=\"option.new\"\n [class.existing]=\"!option.new\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n >\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n [size]=\"'xsmall'\"\n [disabled]=\"disabled\"\n (click)=\"removeOption(option)\"\n ></button>\n <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n <ng-container\n *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultChip>\n <span class=\"chip-text\">{{ option.title }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"isOpen\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'bottom-right'\"\n [allowedPositions]=\"['bottom-right']\"\n (close)=\"close()\"\n >\n <div class=\"dropdown\">\n <button\n *ngIf=\"showAddNew\"\n type=\"button\"\n class=\"dropdown-option add-new\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onAddNew()\"\n >\n <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n </button>\n\n <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n <button\n *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n type=\"button\"\n class=\"dropdown-option\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectOption(option)\"\n >\n <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultOption>\n <span class=\"option-title\">{{ option.title }}</span>\n <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n option.subtitle\n }}</span>\n </ng-template>\n </button>\n </div>\n\n <div\n *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n class=\"no-results\"\n >\n No results found\n </div>\n </div>\n </riv-callout>\n </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i7.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
141
141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchSelectComponent, decorators: [{
|
|
142
142
|
type: Component,
|
|
143
143
|
args: [{ selector: 'riv-search-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [state]=\"state\"\n [errorMessage]=\"errorMessage ?? ''\"\n>\n <div class=\"search-select\" [class.disabled]=\"disabled\">\n <div #trigger class=\"input-wrapper\">\n <input\n #searchInput\n type=\"text\"\n [placeholder]=\"placeholder\"\n [value]=\"searchText\"\n [disabled]=\"disabled\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n (input)=\"onSearchInput(searchInput.value)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n />\n </div>\n\n <div *ngIf=\"selected.length > 0\" class=\"chips\">\n <div\n *ngFor=\"let option of selected; trackBy: trackByOption\"\n class=\"chip\"\n [class.new]=\"option.new\"\n [class.existing]=\"!option.new\"\n [class.small]=\"size === 'small'\"\n [class.large]=\"size === 'large'\"\n [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n >\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n [size]=\"'xsmall'\"\n [disabled]=\"disabled\"\n (click)=\"removeOption(option)\"\n ></button>\n <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n <ng-container\n *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultChip>\n <span class=\"chip-text\">{{ option.title }}</span>\n </ng-template>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"isOpen\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'bottom-right'\"\n [allowedPositions]=\"['bottom-right']\"\n (close)=\"close()\"\n >\n <div class=\"dropdown\">\n <button\n *ngIf=\"showAddNew\"\n type=\"button\"\n class=\"dropdown-option add-new\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onAddNew()\"\n >\n <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n </button>\n\n <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n <button\n *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n type=\"button\"\n class=\"dropdown-option\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectOption(option)\"\n >\n <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultOption>\n <span class=\"option-title\">{{ option.title }}</span>\n <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n option.subtitle\n }}</span>\n </ng-template>\n </button>\n </div>\n\n <div\n *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n class=\"no-results\"\n >\n No results found\n </div>\n </div>\n </riv-callout>\n </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-medium)}\n"] }]
|
|
@@ -29,7 +29,7 @@ export class AllViewsModalComponent {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
AllViewsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: { manager: "manager", topOffset: "topOffset" }, outputs: { close: "close" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n\n <riv-search\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setAllViewsSearchQuery',\n query: $event\n })\n \"\n [value]=\"s.all.search\"\n placeholder=\"Search\"\n ></riv-search>\n\n <div class=\"views\">\n <!-- View sections by permission type -->\n <ng-container\n *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i6.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: i8.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: i9.ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32
|
+
AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: { manager: "manager", topOffset: "topOffset" }, outputs: { close: "close" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n\n <riv-search\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setAllViewsSearchQuery',\n query: $event\n })\n \"\n [value]=\"s.all.search\"\n placeholder=\"Search\"\n ></riv-search>\n\n <div class=\"views\">\n <!-- View sections by permission type -->\n <ng-container\n *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i6.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i8.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: i9.ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AllViewsModalComponent, decorators: [{
|
|
34
34
|
type: Component,
|
|
35
35
|
args: [{ selector: 'riv-all-views-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n\n <riv-search\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setAllViewsSearchQuery',\n query: $event\n })\n \"\n [value]=\"s.all.search\"\n placeholder=\"Search\"\n ></riv-search>\n\n <div class=\"views\">\n <!-- View sections by permission type -->\n <ng-container\n *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"] }]
|
|
@@ -75,7 +75,7 @@ export class ViewsComponent {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
ViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
ViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewsComponent, selector: "riv-views", inputs: { manager: "manager", sideSheetTopOffset: "sideSheetTopOffset" }, viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: ["overflowTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n (rivClientSize)=\"\n manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n \"\n class=\"container\"\n>\n <ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-container\n *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n >\n <ng-container *ngIf=\"view.active; else inactiveTab\">\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'tab'\"\n class=\"active-menu\"\n >\n <ng-template #menuTrigger>\n <div\n class=\"tab active\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-left]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-right]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, false)\"\n >\n <riv-icon\n class=\"tab-reorder\"\n [class.hidden-class]=\"view.system\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <div rivTruncate>\n {{ view.title }}\n </div>\n <riv-icon\n class=\"permission-icon\"\n [name]=\"getPermissionIcon(view.permission)\"\n [size]=\"12\"\n [rivTooltip]=\"getPermissionDescription(view.permission)\"\n ></riv-icon>\n </div>\n </ng-template>\n </riv-view-menu>\n </ng-container>\n <ng-template #inactiveTab>\n <button\n class=\"tab\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-left]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-right]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, false)\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'tab'\n })\n \"\n >\n <riv-icon\n class=\"tab-reorder\"\n [class.hidden-class]=\"view.system\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <span rivTruncate>\n {{ view.title }}\n </span>\n </button>\n </ng-template>\n </ng-container>\n <button\n *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n class=\"tab overflow\"\n rivTruncate\n #overflowTrigger\n (click)=\"\n manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n \"\n >\n {{ count | rivNumber }} more\n </button>\n <ng-container *ngIf=\"s.overflow.pickerOpen\">\n <riv-callout\n *riv-overlay\n [anchor]=\"overflowTrigger?.nativeElement\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-left'\"\n (close)=\"\n manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n \"\n >\n <div class=\"overflow-callout\">\n <riv-search\n [value]=\"s.overflow.search\"\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setOverflowSearchQuery',\n query: $event\n })\n \"\n ></riv-search>\n <div class=\"overflow-view-list\">\n <button\n *ngFor=\"let view of s.enabledViews; let i = index\"\n class=\"overflow-view\"\n [class.system]=\"view.system\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-top]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-bottom]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, true)\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'overflow'\n });\n manager?.actions?.next({\n type: 'setOverflowPickerOpen',\n open: false\n })\n \"\n >\n <riv-icon\n *ngIf=\"!view.system\"\n class=\"overflow-reorder\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <div class=\"overflow-title\" rivTruncate>\n <riv-highlight\n [indices]=\"view.titleHighlightIndices ?? []\"\n [text]=\"view.title\"\n ></riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'overflow'\"\n ></riv-view-menu>\n </button>\n <riv-zero-state\n *ngIf=\"!s.enabledViews.length\"\n [message]=\"'No matching views.'\"\n ></riv-zero-state>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n <div class=\"all-views-button-container\">\n <button\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'medium'\"\n (click)=\"showAllViews = true\"\n >\n All views\n </button>\n </div>\n </ng-container>\n</div>\n\n<riv-all-views-modal\n *ngIf=\"showAllViews\"\n [manager]=\"manager\"\n [topOffset]=\"sideSheetTopOffset\"\n (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AllViewsModalComponent, selector: "riv-all-views-modal", inputs: ["manager", "topOffset"], outputs: ["close"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i7.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "directive", type: i9.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i10.ToastComponent, selector: "riv-toast", inputs: ["variant", "icon"], outputs: ["close"] }, { kind: "directive", type: i11.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: i12.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: i13.ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "component", type: i14.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
78
|
+
ViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewsComponent, selector: "riv-views", inputs: { manager: "manager", sideSheetTopOffset: "sideSheetTopOffset" }, viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: ["overflowTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n (rivClientSize)=\"\n manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n \"\n class=\"container\"\n>\n <ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-container\n *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n >\n <ng-container *ngIf=\"view.active; else inactiveTab\">\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'tab'\"\n class=\"active-menu\"\n >\n <ng-template #menuTrigger>\n <div\n class=\"tab active\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-left]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-right]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, false)\"\n >\n <riv-icon\n class=\"tab-reorder\"\n [class.hidden-class]=\"view.system\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <div rivTruncate>\n {{ view.title }}\n </div>\n <riv-icon\n class=\"permission-icon\"\n [name]=\"getPermissionIcon(view.permission)\"\n [size]=\"12\"\n [rivTooltip]=\"getPermissionDescription(view.permission)\"\n ></riv-icon>\n </div>\n </ng-template>\n </riv-view-menu>\n </ng-container>\n <ng-template #inactiveTab>\n <button\n class=\"tab\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-left]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-right]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, false)\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'tab'\n })\n \"\n >\n <riv-icon\n class=\"tab-reorder\"\n [class.hidden-class]=\"view.system\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <span rivTruncate>\n {{ view.title }}\n </span>\n </button>\n </ng-template>\n </ng-container>\n <button\n *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n class=\"tab overflow\"\n rivTruncate\n #overflowTrigger\n (click)=\"\n manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n \"\n >\n {{ count | rivNumber }} more\n </button>\n <ng-container *ngIf=\"s.overflow.pickerOpen\">\n <riv-callout\n *riv-overlay\n [anchor]=\"overflowTrigger?.nativeElement\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-left'\"\n (close)=\"\n manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n \"\n >\n <div class=\"overflow-callout\">\n <riv-search\n [value]=\"s.overflow.search\"\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setOverflowSearchQuery',\n query: $event\n })\n \"\n ></riv-search>\n <div class=\"overflow-view-list\">\n <button\n *ngFor=\"let view of s.enabledViews; let i = index\"\n class=\"overflow-view\"\n [class.system]=\"view.system\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-top]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-bottom]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, true)\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'overflow'\n });\n manager?.actions?.next({\n type: 'setOverflowPickerOpen',\n open: false\n })\n \"\n >\n <riv-icon\n *ngIf=\"!view.system\"\n class=\"overflow-reorder\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <div class=\"overflow-title\" rivTruncate>\n <riv-highlight\n [indices]=\"view.titleHighlightIndices ?? []\"\n [text]=\"view.title\"\n ></riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'overflow'\"\n ></riv-view-menu>\n </button>\n <riv-zero-state\n *ngIf=\"!s.enabledViews.length\"\n [message]=\"'No matching views.'\"\n ></riv-zero-state>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n <div class=\"all-views-button-container\">\n <button\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'medium'\"\n (click)=\"showAllViews = true\"\n >\n All views\n </button>\n </div>\n </ng-container>\n</div>\n\n<riv-all-views-modal\n *ngIf=\"showAllViews\"\n [manager]=\"manager\"\n [topOffset]=\"sideSheetTopOffset\"\n (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AllViewsModalComponent, selector: "riv-all-views-modal", inputs: ["manager", "topOffset"], outputs: ["close"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i7.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i8.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "directive", type: i9.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i10.ToastComponent, selector: "riv-toast", inputs: ["variant", "icon"], outputs: ["close"] }, { kind: "directive", type: i11.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i12.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: i13.ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "component", type: i14.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i15.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewsComponent, decorators: [{
|
|
80
80
|
type: Component,
|
|
81
81
|
args: [{ selector: 'riv-views', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n (rivClientSize)=\"\n manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n \"\n class=\"container\"\n>\n <ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-container\n *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n >\n <ng-container *ngIf=\"view.active; else inactiveTab\">\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'tab'\"\n class=\"active-menu\"\n >\n <ng-template #menuTrigger>\n <div\n class=\"tab active\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-left]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-right]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, false)\"\n >\n <riv-icon\n class=\"tab-reorder\"\n [class.hidden-class]=\"view.system\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <div rivTruncate>\n {{ view.title }}\n </div>\n <riv-icon\n class=\"permission-icon\"\n [name]=\"getPermissionIcon(view.permission)\"\n [size]=\"12\"\n [rivTooltip]=\"getPermissionDescription(view.permission)\"\n ></riv-icon>\n </div>\n </ng-template>\n </riv-view-menu>\n </ng-container>\n <ng-template #inactiveTab>\n <button\n class=\"tab\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-left]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-right]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, false)\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'tab'\n })\n \"\n >\n <riv-icon\n class=\"tab-reorder\"\n [class.hidden-class]=\"view.system\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <span rivTruncate>\n {{ view.title }}\n </span>\n </button>\n </ng-template>\n </ng-container>\n <button\n *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n class=\"tab overflow\"\n rivTruncate\n #overflowTrigger\n (click)=\"\n manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n \"\n >\n {{ count | rivNumber }} more\n </button>\n <ng-container *ngIf=\"s.overflow.pickerOpen\">\n <riv-callout\n *riv-overlay\n [anchor]=\"overflowTrigger?.nativeElement\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-left'\"\n (close)=\"\n manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n \"\n >\n <div class=\"overflow-callout\">\n <riv-search\n [value]=\"s.overflow.search\"\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setOverflowSearchQuery',\n query: $event\n })\n \"\n ></riv-search>\n <div class=\"overflow-view-list\">\n <button\n *ngFor=\"let view of s.enabledViews; let i = index\"\n class=\"overflow-view\"\n [class.system]=\"view.system\"\n [class.dragging]=\"draggedTabIndex === i\"\n [class.dragged-over-top]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex > i\n \"\n [class.dragged-over-bottom]=\"\n draggedOverTabIndex === i &&\n draggedTabIndex !== null &&\n draggedTabIndex < i\n \"\n [attr.draggable]=\"!view.system\"\n [attr.droppable]=\"!view.system\"\n (dragstart)=\"dragStart(i, view.title, view.system)\"\n (dragenter)=\"$event.preventDefault()\"\n (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n (drop)=\"drop(i, true)\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'overflow'\n });\n manager?.actions?.next({\n type: 'setOverflowPickerOpen',\n open: false\n })\n \"\n >\n <riv-icon\n *ngIf=\"!view.system\"\n class=\"overflow-reorder\"\n [name]=\"'Reorder'\"\n [size]=\"16\"\n ></riv-icon>\n <div class=\"overflow-title\" rivTruncate>\n <riv-highlight\n [indices]=\"view.titleHighlightIndices ?? []\"\n [text]=\"view.title\"\n ></riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'overflow'\"\n ></riv-view-menu>\n </button>\n <riv-zero-state\n *ngIf=\"!s.enabledViews.length\"\n [message]=\"'No matching views.'\"\n ></riv-zero-state>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n <div class=\"all-views-button-container\">\n <button\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'medium'\"\n (click)=\"showAllViews = true\"\n >\n All views\n </button>\n </div>\n </ng-container>\n</div>\n\n<riv-all-views-modal\n *ngIf=\"showAllViews\"\n [manager]=\"manager\"\n [topOffset]=\"sideSheetTopOffset\"\n (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\n"] }]
|
|
@@ -32,7 +32,7 @@ export class BannerComponent {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35
|
-
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", heading: "heading", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant", "class.has-heading": "this.hasHeading" } }, ngImport: i0, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent)}:host .icon{color:var(--banner-accent)}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \". content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
|
+
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", heading: "heading", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant", "class.has-heading": "this.hasHeading" } }, ngImport: i0, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent)}:host .icon{color:var(--banner-accent)}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \". content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BannerComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
38
|
args: [{ selector: 'riv-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n *ngIf=\"getResolvedIcon(); let icon\"\n [name]=\"icon\"\n [rivTooltip]=\"iconTooltip\"\n [size]=\"20\"\n class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent)}:host .icon{color:var(--banner-accent)}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \". content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"] }]
|
|
@@ -8,7 +8,7 @@ export class HelpComponent {
|
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
HelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
-
HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HelpComponent, selector: "riv-help", inputs: { help: "help", size: "size" }, ngImport: i0, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"size\"></riv-icon>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11
|
+
HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HelpComponent, selector: "riv-help", inputs: { help: "help", size: "size" }, ngImport: i0, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"size\"></riv-icon>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
12
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HelpComponent, decorators: [{
|
|
13
13
|
type: Component,
|
|
14
14
|
args: [{ selector: 'riv-help', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"size\"></riv-icon>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}\n"] }]
|