@rivet-health/design-system 40.44.2 → 40.44.3
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/esm2022/lib/accessibility/sr-only/sr-only.component.mjs +3 -3
- package/esm2022/lib/download/download.service.mjs +3 -3
- package/esm2022/lib/format/pipes/date.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/days.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/dollars.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/number.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/percentage.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/sentence-case.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/small-currency.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/small-number.pipe.mjs +3 -3
- package/esm2022/lib/format/svg-text-truncate/svg-text-truncate.directive.mjs +3 -3
- package/esm2022/lib/format/truncate/truncate.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/input/alphabetic-field/alphabetic-field.component.mjs +3 -3
- package/esm2022/lib/input/auto-focus/auto-focus.directive.mjs +3 -3
- package/esm2022/lib/input/button/button.component.mjs +3 -3
- package/esm2022/lib/input/button-group/button-group.component.mjs +3 -3
- package/esm2022/lib/input/calendar/calendar.component.mjs +3 -3
- package/esm2022/lib/input/card-checkbox/card-checkbox.component.mjs +3 -3
- package/esm2022/lib/input/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/input/currency-field/currency-field.component.mjs +3 -3
- package/esm2022/lib/input/date/date.component.mjs +3 -3
- package/esm2022/lib/input/date-range/date-range.component.mjs +3 -3
- package/esm2022/lib/input/filter-chip/filter-chip.component.mjs +3 -3
- package/esm2022/lib/input/filter-dropdown/filter-dropdown.component.mjs +3 -3
- package/esm2022/lib/input/input-label/input-label.component.mjs +3 -3
- package/esm2022/lib/input/mentions-input/mentions-input.component.mjs +3 -3
- package/esm2022/lib/input/number-field/number-field.component.mjs +3 -3
- package/esm2022/lib/input/percentage-field/percentage-field.component.mjs +3 -3
- package/esm2022/lib/input/phone-field/phone-field.component.mjs +3 -3
- package/esm2022/lib/input/radio/radio.component.mjs +3 -3
- package/esm2022/lib/input/search/search.component.mjs +3 -3
- package/esm2022/lib/input/search-select/search-select.component.mjs +3 -3
- package/esm2022/lib/input/select/select/select.component.mjs +3 -3
- package/esm2022/lib/input/select/select-node/select-node.component.mjs +3 -3
- package/esm2022/lib/input/simple-select/option-group.pipe.mjs +3 -3
- package/esm2022/lib/input/simple-select/simple-select.component.mjs +3 -3
- package/esm2022/lib/input/switch-checkbox/switch-checkbox.component.mjs +3 -3
- package/esm2022/lib/input/text-field/text-field.component.mjs +3 -3
- package/esm2022/lib/input/textarea-field/textarea-field.component.mjs +3 -3
- package/esm2022/lib/input/validation-message/validation-message.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-actions.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-content.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-header.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-link.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-media.component.mjs +3 -3
- package/esm2022/lib/layout/card/card.component.mjs +3 -3
- package/esm2022/lib/layout/setting-row/setting-row.component.mjs +3 -3
- package/esm2022/lib/load/loading/loading.component.mjs +3 -3
- package/esm2022/lib/load/loading-cover/loading-cover.component.mjs +3 -3
- package/esm2022/lib/navigation/editable-heading/editable-heading.component.mjs +3 -3
- package/esm2022/lib/navigation/link/link.component.mjs +3 -3
- package/esm2022/lib/navigation/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/navigation/simple-tabs/simple-tab/simple-tab.component.mjs +3 -3
- package/esm2022/lib/navigation/simple-tabs/simple-tabs/simple-tabs.component.mjs +3 -3
- package/esm2022/lib/navigation/tabs/tab/tab.component.mjs +3 -3
- package/esm2022/lib/navigation/tabs/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/navigation/views/all-views-modal/all-views-modal.component.mjs +3 -3
- package/esm2022/lib/navigation/views/edit-view/edit-view.component.mjs +3 -3
- package/esm2022/lib/navigation/views/permission-picker/permission-picker.component.mjs +3 -3
- package/esm2022/lib/navigation/views/view-menu/view-menu.component.mjs +3 -3
- package/esm2022/lib/navigation/views/views/views.component.mjs +3 -3
- package/esm2022/lib/notification/badge/badge.component.mjs +3 -3
- package/esm2022/lib/notification/banner/banner-action.component.mjs +3 -3
- package/esm2022/lib/notification/banner/banner.component.mjs +3 -3
- package/esm2022/lib/notification/map-indicator/map-indicator.component.mjs +3 -3
- package/esm2022/lib/notification/notification-badge/notification-badge.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/callout.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/help/help.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/lock-scroll.directive.mjs +6 -6
- package/esm2022/lib/overlay/callout/menu/menu-item/menu-item.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/menu/menu.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/tooltip/locked-tooltip.directive.mjs +3 -3
- package/esm2022/lib/overlay/callout/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/tooltip/tooltip.directive.mjs +3 -3
- package/esm2022/lib/overlay/modal/dialog/dialog.component.mjs +3 -3
- package/esm2022/lib/overlay/modal/dialog-stack.service.mjs +3 -3
- package/esm2022/lib/overlay/modal/form-dialog/form-dialog.component.mjs +3 -3
- package/esm2022/lib/overlay/modal/modal.component.mjs +3 -3
- package/esm2022/lib/overlay/modal/side-sheet/side-sheet.component.mjs +3 -3
- package/esm2022/lib/overlay/overlay-outlet.component.mjs +3 -3
- package/esm2022/lib/overlay/overlay.directive.mjs +3 -3
- package/esm2022/lib/overlay/overlay.service.mjs +3 -3
- package/esm2022/lib/overlay/toast/toast-action.component.mjs +3 -3
- package/esm2022/lib/overlay/toast/toast.component.mjs +3 -3
- package/esm2022/lib/riv.module.mjs +4 -4
- package/esm2022/lib/size/size.directive.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table-cell.component.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table-header-cell.component.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table-row.component.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table.component.mjs +3 -3
- package/esm2022/lib/table/table/table/table.component.mjs +3 -3
- package/esm2022/lib/table/table/table-collapse-all/table-collapse-all.component.mjs +3 -3
- package/esm2022/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs +3 -3
- package/esm2022/lib/table/table/table-column-settings/table-column-settings.component.mjs +3 -3
- package/esm2022/lib/table/table/table-csv-export/table-csv-export.component.mjs +3 -3
- package/esm2022/lib/table/table/table-header-resize-handle/table-header-resize-handle.component.mjs +3 -3
- package/esm2022/lib/table/table/table-search/table-search.component.mjs +3 -3
- package/esm2022/lib/table/table/table-search-columns/table-search-columns.component.mjs +3 -3
- package/esm2022/lib/visibility/visibility.directive.mjs +3 -3
- package/esm2022/lib/visualization/chart/chart.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table-cell.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table-header-cell.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table-row.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table.component.mjs +3 -3
- package/esm2022/lib/visualization/donut/donut.component.mjs +3 -3
- package/esm2022/lib/visualization/funnel-chart/funnel-chart.component.mjs +3 -3
- package/esm2022/lib/visualization/highlight/highlight.component.mjs +3 -3
- package/esm2022/lib/visualization/issue/issue.component.mjs +3 -3
- package/esm2022/lib/visualization/legend-item/legend-item.component.mjs +3 -3
- package/esm2022/lib/visualization/metric/metric.component.mjs +3 -3
- package/esm2022/lib/visualization/mini-pie/mini-pie.component.mjs +3 -3
- package/esm2022/lib/visualization/progress/progress.component.mjs +3 -3
- package/esm2022/lib/visualization/stacked-column/stacked-column.component.mjs +3 -3
- package/esm2022/lib/visualization/stacked-row/stacked-row.component.mjs +3 -3
- package/esm2022/lib/visualization/time-series/time-series.component.mjs +3 -3
- package/esm2022/lib/visualization/trend/trend.component.mjs +3 -3
- package/esm2022/lib/visualization/zero-state/zero-state.component.mjs +3 -3
- package/fesm2022/rivet-health-design-system.mjs +360 -360
- package/fesm2022/rivet-health-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -68,10 +68,10 @@ export class CardLinkComponent {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
71
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardLinkComponent, selector: "[riv-card-link]", inputs: { mode: "mode", disabled: "disabled" }, host: { properties: { "class": "this.classes", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.tabIndex" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index);transition:background-color var(--short-transition)}:host.stretch:not(.disabled):hover:after{background-color:var(--black-20)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
73
73
|
}
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardLinkComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
76
76
|
args: [{ selector: '[riv-card-link]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index);transition:background-color var(--short-transition)}:host.stretch:not(.disabled):hover:after{background-color:var(--black-20)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"] }]
|
|
77
77
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { mode: [{
|
|
@@ -38,10 +38,10 @@ export class CardMediaComponent {
|
|
|
38
38
|
get heightStyle() {
|
|
39
39
|
return this.height ?? null;
|
|
40
40
|
}
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardMediaComponent, selector: "riv-card-media", inputs: { src: "src", alt: "alt", aspectRatio: "aspectRatio", height: "height", fit: "fit" }, host: { properties: { "class": "this.classes", "style.aspect-ratio": "this.aspectRatioStyle", "style.height": "this.heightStyle" } }, ngImport: i0, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardMediaComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
46
|
args: [{ selector: 'riv-card-media', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"] }]
|
|
47
47
|
}], propDecorators: { src: [{
|
|
@@ -221,10 +221,10 @@ export class CardComponent {
|
|
|
221
221
|
.map(([k]) => k)
|
|
222
222
|
.join(' ');
|
|
223
223
|
}
|
|
224
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
225
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
224
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardComponent, selector: "riv-card", inputs: { variant: "variant", surface: "surface", tone: "tone", orientation: "orientation", padding: "padding", radius: "radius", hoverDepth: "hoverDepth", clickable: "clickable", clickLabel: "clickLabel", selected: "selected", disabled: "disabled" }, outputs: { cardClick: "cardClick" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.classes" } }, ngImport: i0, template: "<button\n *ngIf=\"clickable\"\n type=\"button\"\n class=\"click-target\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"clickLabel\"\n [attr.aria-labelledby]=\"labelledBy\"\n (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light)}:host.dashed{border:var(--border-width) dashed var(--border-light)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.radius-small{border-radius:var(--card-border-radius, var(--border-radius-small))}:host.radius-medium{border-radius:var(--card-border-radius, var(--border-radius-medium))}:host.radius-large{border-radius:var(--card-border-radius, var(--border-radius-large))}:host.radius-xlarge{border-radius:var(--card-border-radius, var(--border-radius-xlarge))}:host:not(.hover-depth-none){transition:box-shadow var(--short-transition)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.clickable{transition:box-shadow var(--short-transition)}:host.hover-depth-1:not(.disabled):hover{box-shadow:var(--depth-1)}:host.hover-depth-2:not(.disabled):hover{box-shadow:var(--depth-2)}:host.hover-depth-3:not(.disabled):hover{box-shadow:var(--depth-3)}:host.hover-depth-4:not(.disabled):hover{box-shadow:var(--depth-4)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled,:host.dashed.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
226
226
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
|
|
228
228
|
type: Component,
|
|
229
229
|
args: [{ selector: 'riv-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n *ngIf=\"clickable\"\n type=\"button\"\n class=\"click-target\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"clickLabel\"\n [attr.aria-labelledby]=\"labelledBy\"\n (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light)}:host.dashed{border:var(--border-width) dashed var(--border-light)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.radius-small{border-radius:var(--card-border-radius, var(--border-radius-small))}:host.radius-medium{border-radius:var(--card-border-radius, var(--border-radius-medium))}:host.radius-large{border-radius:var(--card-border-radius, var(--border-radius-large))}:host.radius-xlarge{border-radius:var(--card-border-radius, var(--border-radius-xlarge))}:host:not(.hover-depth-none){transition:box-shadow var(--short-transition)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.clickable{transition:box-shadow var(--short-transition)}:host.hover-depth-1:not(.disabled):hover{box-shadow:var(--depth-1)}:host.hover-depth-2:not(.disabled):hover{box-shadow:var(--depth-2)}:host.hover-depth-3:not(.disabled):hover{box-shadow:var(--depth-3)}:host.hover-depth-4:not(.disabled):hover{box-shadow:var(--depth-4)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled,:host.dashed.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"] }]
|
|
230
230
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
|
|
@@ -75,10 +75,10 @@ export class SettingRowComponent {
|
|
|
75
75
|
get editingClass() {
|
|
76
76
|
return this.editing;
|
|
77
77
|
}
|
|
78
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
79
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
78
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
79
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SettingRowComponent, selector: "riv-setting-row", inputs: { label: "label", value: "value", infoTooltip: "infoTooltip", editing: "editing", saveDisabled: "saveDisabled", saving: "saving", tooltipMaxWidth: "tooltipMaxWidth" }, outputs: { edit: "edit", cancel: "cancel", save: "save" }, host: { properties: { "class.editing": "this.editingClass" } }, queries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<span class=\"label\">\n <riv-icon\n *ngIf=\"infoTooltip\"\n [name]=\"'Info'\"\n [size]=\"16\"\n [rivTooltip]=\"infoTooltip\"\n [rivTooltipMaxWidth]=\"tooltipMaxWidth\"\n ></riv-icon>\n {{ label }}\n</span>\n\n<ng-container *ngIf=\"!editing; else editMode\">\n <span class=\"value\">\n <ng-container *ngIf=\"value; else projectedValue\">{{ value }}</ng-container>\n <ng-template #projectedValue>\n <ng-content select=\"[display-value]\"></ng-content>\n </ng-template>\n </span>\n <div class=\"actions\">\n <button\n rivButton\n type=\"button\"\n [icon]=\"'Edit2'\"\n [rivTooltip]=\"'Edit'\"\n [variant]=\"'ghost'\"\n [attr.aria-label]=\"'Edit ' + label\"\n (click)=\"edit.emit()\"\n ></button>\n </div>\n</ng-container>\n\n<ng-template #editMode>\n <label class=\"field\">\n <riv-sr-only>{{ label }}</riv-sr-only>\n <ng-container *ngTemplateOutlet=\"editor ?? null\"></ng-container>\n </label>\n\n <div class=\"actions\">\n <button\n rivButton\n type=\"button\"\n [variant]=\"'basic'\"\n [size]=\"'medium'\"\n [disabled]=\"saving\"\n (click)=\"cancel.emit()\"\n >\n Cancel\n </button>\n <button\n rivButton\n type=\"button\"\n [variant]=\"'primary'\"\n [size]=\"'medium'\"\n [disabled]=\"saveDisabled || saving\"\n [loading]=\"saving\"\n (click)=\"save.emit()\"\n >\n Save\n </button>\n </div>\n</ng-template>\n", styles: [":host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--size-large);align-items:center;padding-block:var(--size-medium);color:var(--type-light-high-contrast)}.label,.value,.actions{display:flex;align-items:center;gap:var(--size-small)}.label{grid-column-end:span 4;font:var(--title-02)}.value{grid-column-end:span 7;font:var(--body-medium)}.field{grid-column-end:span 4}.actions{grid-column-end:span 1;justify-content:flex-end}:host.editing .actions{grid-column-end:span 4}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i4.SrOnlyComponent, selector: "riv-sr-only" }, { kind: "directive", type: i5.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
80
80
|
}
|
|
81
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingRowComponent, decorators: [{
|
|
82
82
|
type: Component,
|
|
83
83
|
args: [{ selector: 'riv-setting-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"label\">\n <riv-icon\n *ngIf=\"infoTooltip\"\n [name]=\"'Info'\"\n [size]=\"16\"\n [rivTooltip]=\"infoTooltip\"\n [rivTooltipMaxWidth]=\"tooltipMaxWidth\"\n ></riv-icon>\n {{ label }}\n</span>\n\n<ng-container *ngIf=\"!editing; else editMode\">\n <span class=\"value\">\n <ng-container *ngIf=\"value; else projectedValue\">{{ value }}</ng-container>\n <ng-template #projectedValue>\n <ng-content select=\"[display-value]\"></ng-content>\n </ng-template>\n </span>\n <div class=\"actions\">\n <button\n rivButton\n type=\"button\"\n [icon]=\"'Edit2'\"\n [rivTooltip]=\"'Edit'\"\n [variant]=\"'ghost'\"\n [attr.aria-label]=\"'Edit ' + label\"\n (click)=\"edit.emit()\"\n ></button>\n </div>\n</ng-container>\n\n<ng-template #editMode>\n <label class=\"field\">\n <riv-sr-only>{{ label }}</riv-sr-only>\n <ng-container *ngTemplateOutlet=\"editor ?? null\"></ng-container>\n </label>\n\n <div class=\"actions\">\n <button\n rivButton\n type=\"button\"\n [variant]=\"'basic'\"\n [size]=\"'medium'\"\n [disabled]=\"saving\"\n (click)=\"cancel.emit()\"\n >\n Cancel\n </button>\n <button\n rivButton\n type=\"button\"\n [variant]=\"'primary'\"\n [size]=\"'medium'\"\n [disabled]=\"saveDisabled || saving\"\n [loading]=\"saving\"\n (click)=\"save.emit()\"\n >\n Save\n </button>\n </div>\n</ng-template>\n", styles: [":host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--size-large);align-items:center;padding-block:var(--size-medium);color:var(--type-light-high-contrast)}.label,.value,.actions{display:flex;align-items:center;gap:var(--size-small)}.label{grid-column-end:span 4;font:var(--title-02)}.value{grid-column-end:span 7;font:var(--body-medium)}.field{grid-column-end:span 4}.actions{grid-column-end:span 1;justify-content:flex-end}:host.editing .actions{grid-column-end:span 4}\n"] }]
|
|
84
84
|
}], propDecorators: { label: [{
|
|
@@ -25,10 +25,10 @@ export class LoadingComponent {
|
|
|
25
25
|
];
|
|
26
26
|
return commands.join(' ');
|
|
27
27
|
}
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LoadingComponent, selector: "riv-loading", inputs: { size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
33
|
args: [{ selector: 'riv-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"] }]
|
|
34
34
|
}], propDecorators: { size: [{
|
|
@@ -7,10 +7,10 @@ export class LoadingCoverComponent {
|
|
|
7
7
|
this.loading = false;
|
|
8
8
|
this.loadingSize = 40;
|
|
9
9
|
}
|
|
10
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
10
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingCoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: { loading: "loading", loadingSize: "loadingSize", zIndexOverride: "zIndexOverride", errorMessage: "errorMessage" }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n *ngIf=\"errorMessage\"\n class=\"cover\"\n [style.z-index]=\"zIndexOverride ?? null\"\n>\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12
12
|
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingCoverComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
15
|
args: [{ selector: 'riv-loading-cover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n *ngIf=\"errorMessage\"\n class=\"cover\"\n [style.z-index]=\"zIndexOverride ?? null\"\n>\n <span class=\"error-icon\">\uD83D\uDE41</span>\n <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"] }]
|
|
16
16
|
}], propDecorators: { loading: [{
|
|
@@ -207,10 +207,10 @@ export class EditableHeadingComponent {
|
|
|
207
207
|
input.setSelectionRange(len, len);
|
|
208
208
|
this.cdr.markForCheck();
|
|
209
209
|
}
|
|
210
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
210
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditableHeadingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditableHeadingComponent, selector: "riv-editable-heading", inputs: { title: "title", description: "description", titleMaxLength: "titleMaxLength", descriptionMaxLength: "descriptionMaxLength", disabled: "disabled" }, outputs: { titleChange: "titleChange", descriptionChange: "descriptionChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" }, properties: { "class.editing": "this.isEditing" } }, viewQueries: [{ propertyName: "titleInputRef", first: true, predicate: ["titleInput"], descendants: true, read: ElementRef }, { propertyName: "descriptionInputRef", first: true, predicate: ["descriptionInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"leading\">\n <ng-container [ngSwitch]=\"mode\">\n <!-- View mode -->\n <ng-container *ngSwitchDefault>\n <button\n type=\"button\"\n class=\"title\"\n [class.has-description]=\"description\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n rivTruncate\n [attr.aria-label]=\"(title || 'Untitled') + ', rename'\"\n (click)=\"startEditingTitle()\"\n >\n {{ title || 'Untitled' }}\n </button>\n\n <div class=\"divider\"></div>\n\n <button\n *ngIf=\"description; else addDescription\"\n type=\"button\"\n class=\"description\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n rivTruncate\n [attr.aria-label]=\"description + ', edit description'\"\n (click)=\"startEditingDescription()\"\n >\n {{ description }}\n </button>\n\n <ng-template #addDescription>\n <div class=\"add-description-wrap\" *ngIf=\"!disabled\">\n <button\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'xsmall'\"\n [icon]=\"'Plus'\"\n [iconPosition]=\"'first'\"\n type=\"button\"\n (click)=\"startEditingDescription()\"\n >\n Add description\n </button>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'editingTitle'\">\n <riv-text-field\n #titleInput\n class=\"title-input\"\n [value]=\"draftTitle\"\n [maxLength]=\"titleMaxLength\"\n [autoFocus]=\"true\"\n (valueChange)=\"draftTitle = $event\"\n (keydown.enter)=\"commitTitle()\"\n (keydown.escape)=\"cancel()\"\n ></riv-text-field>\n <button\n rivButton\n type=\"button\"\n class=\"commit\"\n [variant]=\"'primary'\"\n [icon]=\"'Check'\"\n [disabled]=\"!draftTitle\"\n (click)=\"commitTitle()\"\n aria-label=\"Save title\"\n ></button>\n </ng-container>\n\n <!-- Editing description -->\n <ng-container *ngSwitchCase=\"'editingDescription'\">\n <riv-text-field\n #descriptionInput\n class=\"description-input\"\n placeholder=\"Add a description\"\n [value]=\"draftDescription\"\n [maxLength]=\"descriptionMaxLength\"\n [autoFocus]=\"true\"\n (valueChange)=\"draftDescription = $event\"\n (keydown.enter)=\"commitDescription()\"\n (keydown.escape)=\"cancel()\"\n ></riv-text-field>\n <button\n rivButton\n type=\"button\"\n class=\"commit\"\n [variant]=\"'primary'\"\n [icon]=\"'Check'\"\n (click)=\"commitDescription()\"\n aria-label=\"Save description\"\n ></button>\n </ng-container>\n </ng-container>\n</div>\n\n<div class=\"actions\" *ngIf=\"!isEditing\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:stretch;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 8);font:var(--body-medium)}.leading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--size-small)}.title,.description{padding:0;border:none;background:none;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title:disabled,.description:disabled{cursor:default}.title{font:var(--stat-xsmall);line-height:calc(var(--base-grid-size) * 4.5);color:var(--type-light-high-contrast);max-width:100%}.title.has-description{width:fit-content;max-width:50%;flex-shrink:0}.description{font:var(--input-small);line-height:calc(var(--base-grid-size) * 3.5);color:var(--type-light-low-contrast);flex:1 1 auto}.divider{align-self:stretch;border-right:var(--border-width) solid var(--border-light);margin:0 var(--base-grid-size) 0 0;flex-shrink:0}.add-description-wrap{flex-shrink:0}.title-input,.description-input{flex:1 1 auto;min-width:0}.commit{flex-shrink:0}.actions{display:flex;align-items:center;gap:var(--size-small);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }, { kind: "component", type: i4.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
212
212
|
}
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditableHeadingComponent, decorators: [{
|
|
214
214
|
type: Component,
|
|
215
215
|
args: [{ selector: 'riv-editable-heading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n <ng-container [ngSwitch]=\"mode\">\n <!-- View mode -->\n <ng-container *ngSwitchDefault>\n <button\n type=\"button\"\n class=\"title\"\n [class.has-description]=\"description\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n rivTruncate\n [attr.aria-label]=\"(title || 'Untitled') + ', rename'\"\n (click)=\"startEditingTitle()\"\n >\n {{ title || 'Untitled' }}\n </button>\n\n <div class=\"divider\"></div>\n\n <button\n *ngIf=\"description; else addDescription\"\n type=\"button\"\n class=\"description\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n rivTruncate\n [attr.aria-label]=\"description + ', edit description'\"\n (click)=\"startEditingDescription()\"\n >\n {{ description }}\n </button>\n\n <ng-template #addDescription>\n <div class=\"add-description-wrap\" *ngIf=\"!disabled\">\n <button\n rivButton\n [variant]=\"'ghost'\"\n [size]=\"'xsmall'\"\n [icon]=\"'Plus'\"\n [iconPosition]=\"'first'\"\n type=\"button\"\n (click)=\"startEditingDescription()\"\n >\n Add description\n </button>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'editingTitle'\">\n <riv-text-field\n #titleInput\n class=\"title-input\"\n [value]=\"draftTitle\"\n [maxLength]=\"titleMaxLength\"\n [autoFocus]=\"true\"\n (valueChange)=\"draftTitle = $event\"\n (keydown.enter)=\"commitTitle()\"\n (keydown.escape)=\"cancel()\"\n ></riv-text-field>\n <button\n rivButton\n type=\"button\"\n class=\"commit\"\n [variant]=\"'primary'\"\n [icon]=\"'Check'\"\n [disabled]=\"!draftTitle\"\n (click)=\"commitTitle()\"\n aria-label=\"Save title\"\n ></button>\n </ng-container>\n\n <!-- Editing description -->\n <ng-container *ngSwitchCase=\"'editingDescription'\">\n <riv-text-field\n #descriptionInput\n class=\"description-input\"\n placeholder=\"Add a description\"\n [value]=\"draftDescription\"\n [maxLength]=\"descriptionMaxLength\"\n [autoFocus]=\"true\"\n (valueChange)=\"draftDescription = $event\"\n (keydown.enter)=\"commitDescription()\"\n (keydown.escape)=\"cancel()\"\n ></riv-text-field>\n <button\n rivButton\n type=\"button\"\n class=\"commit\"\n [variant]=\"'primary'\"\n [icon]=\"'Check'\"\n (click)=\"commitDescription()\"\n aria-label=\"Save description\"\n ></button>\n </ng-container>\n </ng-container>\n</div>\n\n<div class=\"actions\" *ngIf=\"!isEditing\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:stretch;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 8);font:var(--body-medium)}.leading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--size-small)}.title,.description{padding:0;border:none;background:none;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title:disabled,.description:disabled{cursor:default}.title{font:var(--stat-xsmall);line-height:calc(var(--base-grid-size) * 4.5);color:var(--type-light-high-contrast);max-width:100%}.title.has-description{width:fit-content;max-width:50%;flex-shrink:0}.description{font:var(--input-small);line-height:calc(var(--base-grid-size) * 3.5);color:var(--type-light-low-contrast);flex:1 1 auto}.divider{align-self:stretch;border-right:var(--border-width) solid var(--border-light);margin:0 var(--base-grid-size) 0 0;flex-shrink:0}.add-description-wrap{flex-shrink:0}.title-input,.description-input{flex:1 1 auto;min-width:0}.commit{flex-shrink:0}.actions{display:flex;align-items:center;gap:var(--size-small);flex-shrink:0}\n"] }]
|
|
216
216
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { title: [{
|
|
@@ -21,10 +21,10 @@ export class LinkComponent {
|
|
|
21
21
|
.map(([k]) => k)
|
|
22
22
|
.join(' ');
|
|
23
23
|
}
|
|
24
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
24
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkComponent, deps: [{ token: i1.CalloutComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LinkComponent, selector: "[rivLink]", inputs: { disabled: "disabled", locked: "locked", theme: "theme", variant: "variant" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;cursor:pointer;transition:color var(--short-transition)}:host:hover:not(.disabled){color:var(--type-light-link-hover);text-decoration:underline}:host:active:not(.disabled){color:var(--type-light-link-active);text-decoration:underline}:host.basic{color:var(--type-light-link)}:host.ghost{color:var(--type-light-low-contrast)}:host.basic.disabled,:host.ghost.disabled{color:var(--type-light-disabled);cursor:default}:host.theme{color:var(--type-dark-link)}:host.theme:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.theme:active:not(.disabled){color:var(--type-dark-link-active)}:host.theme.disabled{color:var(--type-dark-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
args: [{ selector: '[rivLink]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;cursor:pointer;transition:color var(--short-transition)}:host:hover:not(.disabled){color:var(--type-light-link-hover);text-decoration:underline}:host:active:not(.disabled){color:var(--type-light-link-active);text-decoration:underline}:host.basic{color:var(--type-light-link)}:host.ghost{color:var(--type-light-low-contrast)}:host.basic.disabled,:host.ghost.disabled{color:var(--type-light-disabled);cursor:default}:host.theme{color:var(--type-dark-link)}:host.theme:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.theme:active:not(.disabled){color:var(--type-dark-link-active)}:host.theme.disabled{color:var(--type-dark-disabled)}\n"] }]
|
|
30
30
|
}], ctorParameters: () => [{ type: i1.CalloutComponent, decorators: [{
|
|
@@ -44,10 +44,10 @@ export class PageHeaderComponent {
|
|
|
44
44
|
get hasDescription() {
|
|
45
45
|
return !this.isBack && !!this.description;
|
|
46
46
|
}
|
|
47
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
48
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
47
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
48
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", description: "description", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack", "class.has-description": "this.hasDescription" } }, ngImport: i0, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.has-description{align-items:flex-start}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
49
49
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
51
51
|
type: Component,
|
|
52
52
|
args: [{ selector: 'riv-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.has-description{align-items:flex-start}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"] }]
|
|
53
53
|
}], propDecorators: { title: [{
|
|
@@ -20,10 +20,10 @@ export class SimpleTabComponent {
|
|
|
20
20
|
get ariaDisabled() {
|
|
21
21
|
return this.locked ? 'true' : null;
|
|
22
22
|
}
|
|
23
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
23
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SimpleTabComponent, selector: "[riv-simple-tab]", inputs: { current: "current", locked: "locked" }, host: { properties: { "class": "this.classes", "attr.aria-current": "this.ariaCurrent", "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{font:inherit;color:var(--type-light-low-contrast);background-color:transparent;border:none;border-bottom:var(--border-width) solid transparent;margin-bottom:calc(var(--border-width) * -1);padding:var(--size-xsmall) var(--size-large);text-decoration:none;cursor:pointer;transition:background-color var(--medium-transition),border-color var(--medium-transition)}:host:hover:not(.locked){background-color:var(--surface-light-1)}:host:hover:not(.locked):not(.current){border-bottom-color:var(--border-light)}:host.current{color:var(--brand);border-bottom-color:var(--brand)}:host.locked{display:inline-flex;align-items:center;color:var(--type-light-disabled);cursor:default}riv-icon{margin-left:var(--size-small)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
args: [{ selector: '[riv-simple-tab]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{font:inherit;color:var(--type-light-low-contrast);background-color:transparent;border:none;border-bottom:var(--border-width) solid transparent;margin-bottom:calc(var(--border-width) * -1);padding:var(--size-xsmall) var(--size-large);text-decoration:none;cursor:pointer;transition:background-color var(--medium-transition),border-color var(--medium-transition)}:host:hover:not(.locked){background-color:var(--surface-light-1)}:host:hover:not(.locked):not(.current){border-bottom-color:var(--border-light)}:host.current{color:var(--brand);border-bottom-color:var(--brand)}:host.locked{display:inline-flex;align-items:center;color:var(--type-light-disabled);cursor:default}riv-icon{margin-left:var(--size-small)}\n"] }]
|
|
29
29
|
}], propDecorators: { current: [{
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class SimpleTabsComponent {
|
|
4
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SimpleTabsComponent, selector: "riv-simple-tabs", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;border-bottom:var(--border-width) solid var(--border-light);font:var(--body-medium)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6
6
|
}
|
|
7
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabsComponent, decorators: [{
|
|
8
8
|
type: Component,
|
|
9
9
|
args: [{ selector: 'riv-simple-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;border-bottom:var(--border-width) solid var(--border-light);font:var(--body-medium)}\n"] }]
|
|
10
10
|
}] });
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, HostBinding, Input, } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class TabComponent {
|
|
4
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabComponent, selector: "[riv-tab]", inputs: { current: "current" }, host: { properties: { "class.current": "this.current" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{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:center;align-items:center;position:relative}:host:hover{background-color:var(--surface-light-2)}:host:active{background-color:var(--surface-light-3)}:host:not(:first-child){margin-left:calc(var(--border-width) * -1)}:host.current{color:var(--type-light-link-hover);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}:host.current:active{border:var(--border-width) solid var(--purp-80)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6
6
|
}
|
|
7
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
|
|
8
8
|
type: Component,
|
|
9
9
|
args: [{ selector: '[riv-tab]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{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:center;align-items:center;position:relative}:host:hover{background-color:var(--surface-light-2)}:host:active{background-color:var(--surface-light-3)}:host:not(:first-child){margin-left:calc(var(--border-width) * -1)}:host.current{color:var(--type-light-link-hover);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}:host.current:active{border:var(--border-width) solid var(--purp-80)}\n"] }]
|
|
10
10
|
}], propDecorators: { current: [{
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class TabsComponent {
|
|
4
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabsComponent, selector: "riv-tabs", ngImport: i0, template: "<div class=\"container\">\n <ng-content></ng-content>\n</div>\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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6
6
|
}
|
|
7
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, decorators: [{
|
|
8
8
|
type: Component,
|
|
9
9
|
args: [{ selector: 'riv-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n <ng-content></ng-content>\n</div>\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)}\n"] }]
|
|
10
10
|
}] });
|
|
@@ -27,10 +27,10 @@ export class AllViewsModalComponent {
|
|
|
27
27
|
trackById(_, view) {
|
|
28
28
|
return view.id;
|
|
29
29
|
}
|
|
30
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
31
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
30
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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\n [label]=\"'All views'\"\n [topOffset]=\"topOffset\"\n (close)=\"close.emit()\"\n >\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n type=\"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 type=\"button\"\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n [attr.aria-disabled]=\"!!s.all.search ? 'true' : null\"\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 type=\"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 type=\"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 [attr.aria-disabled]=\"view.system ? 'true' : null\"\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", "label"], outputs: ["close"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "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 }); }
|
|
32
32
|
}
|
|
33
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
33
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\n [label]=\"'All views'\"\n [topOffset]=\"topOffset\"\n (close)=\"close.emit()\"\n >\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n type=\"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 type=\"button\"\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n [attr.aria-disabled]=\"!!s.all.search ? 'true' : null\"\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 type=\"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 type=\"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 [attr.aria-disabled]=\"view.system ? 'true' : null\"\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"] }]
|
|
36
36
|
}], propDecorators: { manager: [{
|
|
@@ -86,10 +86,10 @@ export class EditViewComponent {
|
|
|
86
86
|
}
|
|
87
87
|
return EditViewComponent.NO_SHARED_USERS;
|
|
88
88
|
}
|
|
89
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
90
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
89
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
90
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditViewComponent, selector: "riv-edit-view", inputs: { anchor: "anchor", autoSelectName: "autoSelectName", view: "view", userSource: "userSource", userSelectMode: "userSelectMode", onAddUser: "onAddUser", newTooltip: "newTooltip", mode: "mode" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"editedView; let ev\">\n <riv-callout\n *riv-overlay\n [anchor]=\"anchor ?? null\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-right'\"\n [fallbackDirection]=\"'clockwise'\"\n (close)=\"close.emit()\"\n >\n <div class=\"edit-view\">\n <div class=\"name-input\">\n <span class=\"name-label\">Name * </span>\n <riv-text-field\n [autoFocus]=\"autoSelectName ? 'select' : false\"\n [value]=\"ev.title ?? ''\"\n (valueChange)=\"titleChange($event)\"\n ></riv-text-field>\n </div>\n\n <hr class=\"divider\" />\n\n <riv-permission-picker\n [permission]=\"ev.permission\"\n [sharedUsers]=\"getSharedUsers(ev)\"\n [userSelectMode]=\"userSelectMode\"\n [userSource]=\"userSource\"\n [onAddUser]=\"onAddUser\"\n [newTooltip]=\"newTooltip\"\n (permissionChange)=\"onPermissionChange($event)\"\n (sharedUsersChange)=\"onSharedUsersChange($event)\"\n ></riv-permission-picker>\n\n <hr class=\"divider\" />\n\n <div class=\"actions\">\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'Trash2'\"\n (click)=\"delete.emit(ev); close.emit()\"\n *ngIf=\"canEdit()\"\n >\n Delete\n </button>\n\n <div class=\"actions-spacer\"></div>\n\n <div class=\"primary-actions\">\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n (click)=\"close.emit()\"\n >\n Cancel\n </button>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'primary'\"\n [disabled]=\"canEdit() && isClean()\"\n (click)=\"save.emit(ev); close.emit()\"\n >\n Save\n </button>\n </div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i4.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i5.PermissionPickerComponent, selector: "riv-permission-picker", inputs: ["permission", "sharedUsers", "userSelectMode", "userSource", "onAddUser", "newTooltip", "disabledPermissions"], outputs: ["permissionChange", "sharedUsersChange"] }, { kind: "component", type: i6.TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
91
91
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditViewComponent, decorators: [{
|
|
93
93
|
type: Component,
|
|
94
94
|
args: [{ selector: 'riv-edit-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"editedView; let ev\">\n <riv-callout\n *riv-overlay\n [anchor]=\"anchor ?? null\"\n [isModal]=\"true\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [preferredPosition]=\"'bottom-right'\"\n [fallbackDirection]=\"'clockwise'\"\n (close)=\"close.emit()\"\n >\n <div class=\"edit-view\">\n <div class=\"name-input\">\n <span class=\"name-label\">Name * </span>\n <riv-text-field\n [autoFocus]=\"autoSelectName ? 'select' : false\"\n [value]=\"ev.title ?? ''\"\n (valueChange)=\"titleChange($event)\"\n ></riv-text-field>\n </div>\n\n <hr class=\"divider\" />\n\n <riv-permission-picker\n [permission]=\"ev.permission\"\n [sharedUsers]=\"getSharedUsers(ev)\"\n [userSelectMode]=\"userSelectMode\"\n [userSource]=\"userSource\"\n [onAddUser]=\"onAddUser\"\n [newTooltip]=\"newTooltip\"\n (permissionChange)=\"onPermissionChange($event)\"\n (sharedUsersChange)=\"onSharedUsersChange($event)\"\n ></riv-permission-picker>\n\n <hr class=\"divider\" />\n\n <div class=\"actions\">\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'Trash2'\"\n (click)=\"delete.emit(ev); close.emit()\"\n *ngIf=\"canEdit()\"\n >\n Delete\n </button>\n\n <div class=\"actions-spacer\"></div>\n\n <div class=\"primary-actions\">\n <button\n type=\"button\"\n rivButton\n [variant]=\"'ghost'\"\n (click)=\"close.emit()\"\n >\n Cancel\n </button>\n <button\n type=\"button\"\n rivButton\n [variant]=\"'primary'\"\n [disabled]=\"canEdit() && isClean()\"\n (click)=\"save.emit(ev); close.emit()\"\n >\n Save\n </button>\n </div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"] }]
|
|
95
95
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { anchor: [{
|
|
@@ -123,10 +123,10 @@ export class PermissionPickerComponent {
|
|
|
123
123
|
this.sharedUsersChange.emit(RivViews.toSharedUsers(this.selectedUsers));
|
|
124
124
|
this.cdr.markForCheck();
|
|
125
125
|
}
|
|
126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: { permission: "permission", sharedUsers: "sharedUsers", userSelectMode: "userSelectMode", userSource: "userSource", onAddUser: "onAddUser", newTooltip: "newTooltip", disabledPermissions: "disabledPermissions" }, outputs: { permissionChange: "permissionChange", sharedUsersChange: "sharedUsersChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"permission-picker\">\n <div class=\"permission-label\">View permissions</div>\n\n <div class=\"permission-options\">\n <button\n *ngFor=\"let option of permissionOptions\"\n class=\"permission-option\"\n [class.current]=\"permission === option.value\"\n [class.disabled]=\"isDisabled(option.value)\"\n type=\"button\"\n [attr.aria-checked]=\"permission === option.value\"\n [attr.aria-label]=\"option.title + ' permission'\"\n [attr.aria-disabled]=\"isDisabled(option.value)\"\n (click)=\"onPermissionClick(option.value)\"\n >\n <div class=\"option-content\">\n <div class=\"option-title\">\n <span>{{ option.title }}</span>\n <span class=\"option-description\">{{ option.subtitle }}</span>\n </div>\n <riv-icon\n *ngIf=\"permission === option.value\"\n class=\"permission-indicator\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n </div>\n <riv-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'select' &&\n userSelectManager\n \"\n [label]=\"'Users with access'\"\n [manager]=\"userSelectManager\"\n ></riv-select>\n <riv-search-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'search-select'\n \"\n (click)=\"$event.stopPropagation()\"\n [label]=\"'Users with access'\"\n [options]=\"userOptions\"\n [selected]=\"selectedUsers\"\n [placeholder]=\"'Search users'\"\n [addNewLabel]=\"'Add'\"\n [newTooltip]=\"newTooltip\"\n (selectedChange)=\"onSelectedUsersChange($event)\"\n (addNew)=\"handleAddUser($event)\"\n ></riv-search-select>\n </button>\n </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\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.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i3.SearchSelectComponent, selector: "riv-search-select", inputs: ["options", "selected", "placeholder", "addNewLabel", "newTooltip", "size", "disabled", "label", "help", "required", "state", "errorMessage", "optionTemplate", "chipTemplate"], outputs: ["selectedChange", "addNew"] }, { kind: "component", type: i4.SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
128
128
|
}
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionPickerComponent, decorators: [{
|
|
130
130
|
type: Component,
|
|
131
131
|
args: [{ selector: 'riv-permission-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"permission-picker\">\n <div class=\"permission-label\">View permissions</div>\n\n <div class=\"permission-options\">\n <button\n *ngFor=\"let option of permissionOptions\"\n class=\"permission-option\"\n [class.current]=\"permission === option.value\"\n [class.disabled]=\"isDisabled(option.value)\"\n type=\"button\"\n [attr.aria-checked]=\"permission === option.value\"\n [attr.aria-label]=\"option.title + ' permission'\"\n [attr.aria-disabled]=\"isDisabled(option.value)\"\n (click)=\"onPermissionClick(option.value)\"\n >\n <div class=\"option-content\">\n <div class=\"option-title\">\n <span>{{ option.title }}</span>\n <span class=\"option-description\">{{ option.subtitle }}</span>\n </div>\n <riv-icon\n *ngIf=\"permission === option.value\"\n class=\"permission-indicator\"\n [name]=\"'Check'\"\n [size]=\"16\"\n ></riv-icon>\n </div>\n <riv-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'select' &&\n userSelectManager\n \"\n [label]=\"'Users with access'\"\n [manager]=\"userSelectManager\"\n ></riv-select>\n <riv-search-select\n *ngIf=\"\n permission === 'shared' &&\n option.value === 'shared' &&\n userSelectMode === 'search-select'\n \"\n (click)=\"$event.stopPropagation()\"\n [label]=\"'Users with access'\"\n [options]=\"userOptions\"\n [selected]=\"selectedUsers\"\n [placeholder]=\"'Search users'\"\n [addNewLabel]=\"'Add'\"\n [newTooltip]=\"newTooltip\"\n (selectedChange)=\"onSelectedUsersChange($event)\"\n (addNew)=\"handleAddUser($event)\"\n ></riv-search-select>\n </button>\n </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\n"] }]
|
|
132
132
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { permission: [{
|