@rivet-health/design-system 23.11.0 → 23.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/content-toggle/toggle/toggle.component.mjs +20 -3
- package/esm2020/lib/navigation/views/all-views-modal/all-views-modal.component.mjs +1 -1
- package/fesm2015/rivet-health-design-system.mjs +20 -3
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +20 -3
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/content-toggle/toggle/toggle.component.d.ts +11 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ export class ToggleComponent {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.open = false;
|
|
8
8
|
this.disabled = false;
|
|
9
|
+
this.size = 'medium';
|
|
9
10
|
this.openChange = new EventEmitter();
|
|
10
11
|
}
|
|
11
12
|
toggleOpen() {
|
|
@@ -13,20 +14,36 @@ export class ToggleComponent {
|
|
|
13
14
|
this.open = newOpenState;
|
|
14
15
|
this.openChange.emit(newOpenState);
|
|
15
16
|
}
|
|
17
|
+
getIconSize() {
|
|
18
|
+
switch (this.size) {
|
|
19
|
+
case 'medium':
|
|
20
|
+
return 20;
|
|
21
|
+
case 'small':
|
|
22
|
+
return 16;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
16
25
|
}
|
|
17
26
|
ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToggleComponent, selector: "riv-toggle", inputs: { open: "open", disabled: "disabled" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" class=\"
|
|
27
|
+
ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToggleComponent, selector: "riv-toggle", inputs: { open: "open", disabled: "disabled", size: "size" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dataTemplate", first: true, predicate: ["data"], descendants: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" [class.grow]=\"!dataTemplate\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n <riv-icon\n [class.open]=\"open\"\n [name]=\"'ChevronDown'\"\n [size]=\"getIconSize()\"\n ></riv-icon>\n <div *ngIf=\"dataTemplate; let tpl\" class=\"grow data\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n</button>\n\n<ng-container *ngIf=\"open\">\n <ng-content></ng-content>\n</ng-container>\n", styles: [".toggle-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:none;padding:var(--size-xsmall);font:var(--input-medium);text-align:left;border-radius:var(--border-radius-medium);color:inherit;gap:var(--size-small);cursor:pointer;transition:background-color var(--short-transition)}.toggle-button:hover:not(:disabled){background-color:var(--surface-light-1)}.toggle-button:active:not(:disabled){background-color:var(--surface-light-2)}.toggle-button:disabled{cursor:default;color:var(--type-light-disabled)}.toggle-button .grow{flex-grow:1}.toggle-button .data{text-align:right}riv-icon{transition:transform var(--medium-transition)}riv-icon.open{transform:rotate(-180deg)}\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.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
20
29
|
type: Component,
|
|
21
|
-
args: [{ selector: 'riv-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" class=\"
|
|
30
|
+
args: [{ selector: 'riv-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" [class.grow]=\"!dataTemplate\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n <riv-icon\n [class.open]=\"open\"\n [name]=\"'ChevronDown'\"\n [size]=\"getIconSize()\"\n ></riv-icon>\n <div *ngIf=\"dataTemplate; let tpl\" class=\"grow data\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n</button>\n\n<ng-container *ngIf=\"open\">\n <ng-content></ng-content>\n</ng-container>\n", styles: [".toggle-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:none;padding:var(--size-xsmall);font:var(--input-medium);text-align:left;border-radius:var(--border-radius-medium);color:inherit;gap:var(--size-small);cursor:pointer;transition:background-color var(--short-transition)}.toggle-button:hover:not(:disabled){background-color:var(--surface-light-1)}.toggle-button:active:not(:disabled){background-color:var(--surface-light-2)}.toggle-button:disabled{cursor:default;color:var(--type-light-disabled)}.toggle-button .grow{flex-grow:1}.toggle-button .data{text-align:right}riv-icon{transition:transform var(--medium-transition)}riv-icon.open{transform:rotate(-180deg)}\n"] }]
|
|
22
31
|
}], propDecorators: { open: [{
|
|
23
32
|
type: Input
|
|
24
33
|
}], disabled: [{
|
|
25
34
|
type: Input
|
|
35
|
+
}], size: [{
|
|
36
|
+
type: Input
|
|
26
37
|
}], openChange: [{
|
|
27
38
|
type: Output
|
|
28
39
|
}], triggerTemplate: [{
|
|
29
40
|
type: ContentChild,
|
|
30
41
|
args: ['trigger']
|
|
42
|
+
}], dataTemplate: [{
|
|
43
|
+
type: ContentChild,
|
|
44
|
+
args: ['data']
|
|
31
45
|
}] } });
|
|
32
|
-
|
|
46
|
+
(function (ToggleComponent) {
|
|
47
|
+
ToggleComponent.Sizes = ['medium', 'small'];
|
|
48
|
+
})(ToggleComponent || (ToggleComponent = {}));
|
|
49
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL2NvbnRlbnQtdG9nZ2xlL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvY29udGVudC10b2dnbGUvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBRVAsTUFBTSxlQUFlLENBQUM7Ozs7QUFTdkIsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFRRSxTQUFJLEdBQVksS0FBSyxDQUFDO1FBR3RCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFHMUIsU0FBSSxHQUF5QixRQUFRLENBQUM7UUFHdEMsZUFBVSxHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO0tBc0JqRTtJQWRDLFVBQVU7UUFDUixNQUFNLFlBQVksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDaEMsSUFBSSxDQUFDLElBQUksR0FBRyxZQUFZLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFdBQVc7UUFDVCxRQUFRLElBQUksQ0FBQyxJQUFJLEVBQUU7WUFDakIsS0FBSyxRQUFRO2dCQUNYLE9BQU8sRUFBRSxDQUFDO1lBQ1osS0FBSyxPQUFPO2dCQUNWLE9BQU8sRUFBRSxDQUFDO1NBQ2I7SUFDSCxDQUFDOzs0R0FoQ1UsZUFBZTtnR0FBZixlQUFlLHNWQ2pCNUIsc3JCQTBCQTsyRkRUYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLFlBQVksbUJBR0wsdUJBQXVCLENBQUMsTUFBTTs4QkFJL0MsSUFBSTtzQkFESCxLQUFLO2dCQUlOLFFBQVE7c0JBRFAsS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxNQUFNO2dCQUlQLGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxTQUFTO2dCQUl2QixZQUFZO3NCQURYLFlBQVk7dUJBQUMsTUFBTTs7QUFtQnRCLFdBQWlCLGVBQWU7SUFDakIscUJBQUssR0FBRyxDQUFDLFFBQVEsRUFBRSxPQUFPLENBQVUsQ0FBQztBQUVwRCxDQUFDLEVBSGdCLGVBQWUsS0FBZixlQUFlLFFBRy9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFRlbXBsYXRlUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9pY29uL2ljb24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LXRvZ2dsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90b2dnbGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90b2dnbGUuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVG9nZ2xlQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgb3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgc2l6ZTogVG9nZ2xlQ29tcG9uZW50LlNpemUgPSAnbWVkaXVtJztcblxuICBAT3V0cHV0KClcbiAgb3BlbkNoYW5nZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIEBDb250ZW50Q2hpbGQoJ3RyaWdnZXInKVxuICB0cmlnZ2VyVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx7IG9wZW46IGJvb2xlYW4gfT47XG5cbiAgQENvbnRlbnRDaGlsZCgnZGF0YScpXG4gIGRhdGFUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPHsgb3BlbjogYm9vbGVhbiB9PjtcblxuICB0b2dnbGVPcGVuKCk6IHZvaWQge1xuICAgIGNvbnN0IG5ld09wZW5TdGF0ZSA9ICF0aGlzLm9wZW47XG4gICAgdGhpcy5vcGVuID0gbmV3T3BlblN0YXRlO1xuICAgIHRoaXMub3BlbkNoYW5nZS5lbWl0KG5ld09wZW5TdGF0ZSk7XG4gIH1cblxuICBnZXRJY29uU2l6ZSgpOiBJY29uQ29tcG9uZW50LlNpemUge1xuICAgIHN3aXRjaCAodGhpcy5zaXplKSB7XG4gICAgICBjYXNlICdtZWRpdW0nOlxuICAgICAgICByZXR1cm4gMjA7XG4gICAgICBjYXNlICdzbWFsbCc6XG4gICAgICAgIHJldHVybiAxNjtcbiAgICB9XG4gIH1cbn1cblxuZXhwb3J0IG5hbWVzcGFjZSBUb2dnbGVDb21wb25lbnQge1xuICBleHBvcnQgY29uc3QgU2l6ZXMgPSBbJ21lZGl1bScsICdzbWFsbCddIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBTaXplID0gKHR5cGVvZiBTaXplcylbbnVtYmVyXTtcbn1cbiIsIjxidXR0b25cbiAgdHlwZT1cImJ1dHRvblwiXG4gIGNsYXNzPVwidG9nZ2xlLWJ1dHRvblwiXG4gIFthdHRyLmRpc2FibGVkXT1cImRpc2FibGVkID8gdHJ1ZSA6IG51bGxcIlxuICAoY2xpY2spPVwidG9nZ2xlT3BlbigpXCJcbj5cbiAgPGRpdiAqbmdJZj1cInRyaWdnZXJUZW1wbGF0ZTsgbGV0IHRwbFwiIFtjbGFzcy5ncm93XT1cIiFkYXRhVGVtcGxhdGVcIj5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICAqbmdUZW1wbGF0ZU91dGxldD1cInRwbDsgY29udGV4dDogeyBvcGVuOiBvcGVuIH1cIlxuICAgID48L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG4gIDxyaXYtaWNvblxuICAgIFtjbGFzcy5vcGVuXT1cIm9wZW5cIlxuICAgIFtuYW1lXT1cIidDaGV2cm9uRG93bidcIlxuICAgIFtzaXplXT1cImdldEljb25TaXplKClcIlxuICA+PC9yaXYtaWNvbj5cbiAgPGRpdiAqbmdJZj1cImRhdGFUZW1wbGF0ZTsgbGV0IHRwbFwiIGNsYXNzPVwiZ3JvdyBkYXRhXCI+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0cGw7IGNvbnRleHQ6IHsgb3Blbjogb3BlbiB9XCJcbiAgICA+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9idXR0b24+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJvcGVuXCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvbmctY29udGFpbmVyPlxuIl19
|
|
@@ -30,7 +30,7 @@ export class AllViewsModalComponent {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
AllViewsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 [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 emptyStateMessage: s.all.privateEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.sharedEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.publicEmptyStateMessage\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 let-emptyStateMessage=\"emptyStateMessage\"\n >\n <riv-toggle\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [disabled]=\"!!s.all.search\"\n >\n <ng-template #trigger>\n <div>\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n </ng-template>\n\n <div class=\"views-list\" *ngIf=\"views.length > 0; else noViews\">\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 });\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 ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n [name]=\"\n view.system ? 'Lock' : view.enabled ? 'Eye' : 'EyeOff'\n \"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n <ng-template #noViews>\n <riv-zero-state [message]=\"emptyStateMessage\"></riv-zero-state>\n </ng-template>\n </riv-toggle>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-large);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)}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding-left:var(--size-small);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}.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:0 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", "active"] }, { kind: "component", type: i3.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name"] }, { kind: "component", type: i6.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset"], outputs: ["close"] }, { kind: "component", type: i7.ToggleComponent, selector: "riv-toggle", inputs: ["open", "disabled"], outputs: ["openChange"] }, { kind: "component", type: i8.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: i9.ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view"] }, { kind: "component", type: i10.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33
|
+
AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 [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 emptyStateMessage: s.all.privateEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.sharedEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.publicEmptyStateMessage\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 let-emptyStateMessage=\"emptyStateMessage\"\n >\n <riv-toggle\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [disabled]=\"!!s.all.search\"\n >\n <ng-template #trigger>\n <div>\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n </ng-template>\n\n <div class=\"views-list\" *ngIf=\"views.length > 0; else noViews\">\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 });\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 ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n [name]=\"\n view.system ? 'Lock' : view.enabled ? 'Eye' : 'EyeOff'\n \"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n <ng-template #noViews>\n <riv-zero-state [message]=\"emptyStateMessage\"></riv-zero-state>\n </ng-template>\n </riv-toggle>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-large);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)}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding-left:var(--size-small);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}.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:0 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", "active"] }, { kind: "component", type: i3.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name"] }, { kind: "component", type: i6.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset"], outputs: ["close"] }, { kind: "component", type: i7.ToggleComponent, selector: "riv-toggle", inputs: ["open", "disabled", "size"], outputs: ["openChange"] }, { kind: "component", type: i8.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: i9.ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view"] }, { kind: "component", type: i10.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
36
|
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 [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 emptyStateMessage: s.all.privateEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.sharedEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.publicEmptyStateMessage\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 let-emptyStateMessage=\"emptyStateMessage\"\n >\n <riv-toggle\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [disabled]=\"!!s.all.search\"\n >\n <ng-template #trigger>\n <div>\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n </ng-template>\n\n <div class=\"views-list\" *ngIf=\"views.length > 0; else noViews\">\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 });\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 ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n [name]=\"\n view.system ? 'Lock' : view.enabled ? 'Eye' : 'EyeOff'\n \"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n <ng-template #noViews>\n <riv-zero-state [message]=\"emptyStateMessage\"></riv-zero-state>\n </ng-template>\n </riv-toggle>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-large);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)}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding-left:var(--size-small);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}.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:0 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"] }]
|
|
@@ -366,6 +366,7 @@ class ToggleComponent {
|
|
|
366
366
|
constructor() {
|
|
367
367
|
this.open = false;
|
|
368
368
|
this.disabled = false;
|
|
369
|
+
this.size = 'medium';
|
|
369
370
|
this.openChange = new EventEmitter();
|
|
370
371
|
}
|
|
371
372
|
toggleOpen() {
|
|
@@ -373,22 +374,38 @@ class ToggleComponent {
|
|
|
373
374
|
this.open = newOpenState;
|
|
374
375
|
this.openChange.emit(newOpenState);
|
|
375
376
|
}
|
|
377
|
+
getIconSize() {
|
|
378
|
+
switch (this.size) {
|
|
379
|
+
case 'medium':
|
|
380
|
+
return 20;
|
|
381
|
+
case 'small':
|
|
382
|
+
return 16;
|
|
383
|
+
}
|
|
384
|
+
}
|
|
376
385
|
}
|
|
377
386
|
ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
378
|
-
ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToggleComponent, selector: "riv-toggle", inputs: { open: "open", disabled: "disabled" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" class=\"
|
|
387
|
+
ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToggleComponent, selector: "riv-toggle", inputs: { open: "open", disabled: "disabled", size: "size" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dataTemplate", first: true, predicate: ["data"], descendants: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" [class.grow]=\"!dataTemplate\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n <riv-icon\n [class.open]=\"open\"\n [name]=\"'ChevronDown'\"\n [size]=\"getIconSize()\"\n ></riv-icon>\n <div *ngIf=\"dataTemplate; let tpl\" class=\"grow data\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n</button>\n\n<ng-container *ngIf=\"open\">\n <ng-content></ng-content>\n</ng-container>\n", styles: [".toggle-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:none;padding:var(--size-xsmall);font:var(--input-medium);text-align:left;border-radius:var(--border-radius-medium);color:inherit;gap:var(--size-small);cursor:pointer;transition:background-color var(--short-transition)}.toggle-button:hover:not(:disabled){background-color:var(--surface-light-1)}.toggle-button:active:not(:disabled){background-color:var(--surface-light-2)}.toggle-button:disabled{cursor:default;color:var(--type-light-disabled)}.toggle-button .grow{flex-grow:1}.toggle-button .data{text-align:right}riv-icon{transition:transform var(--medium-transition)}riv-icon.open{transform:rotate(-180deg)}\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: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
379
388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
380
389
|
type: Component,
|
|
381
|
-
args: [{ selector: 'riv-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" class=\"
|
|
390
|
+
args: [{ selector: 'riv-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"toggle-button\"\n [attr.disabled]=\"disabled ? true : null\"\n (click)=\"toggleOpen()\"\n>\n <div *ngIf=\"triggerTemplate; let tpl\" [class.grow]=\"!dataTemplate\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n <riv-icon\n [class.open]=\"open\"\n [name]=\"'ChevronDown'\"\n [size]=\"getIconSize()\"\n ></riv-icon>\n <div *ngIf=\"dataTemplate; let tpl\" class=\"grow data\">\n <ng-container\n *ngTemplateOutlet=\"tpl; context: { open: open }\"\n ></ng-container>\n </div>\n</button>\n\n<ng-container *ngIf=\"open\">\n <ng-content></ng-content>\n</ng-container>\n", styles: [".toggle-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:none;padding:var(--size-xsmall);font:var(--input-medium);text-align:left;border-radius:var(--border-radius-medium);color:inherit;gap:var(--size-small);cursor:pointer;transition:background-color var(--short-transition)}.toggle-button:hover:not(:disabled){background-color:var(--surface-light-1)}.toggle-button:active:not(:disabled){background-color:var(--surface-light-2)}.toggle-button:disabled{cursor:default;color:var(--type-light-disabled)}.toggle-button .grow{flex-grow:1}.toggle-button .data{text-align:right}riv-icon{transition:transform var(--medium-transition)}riv-icon.open{transform:rotate(-180deg)}\n"] }]
|
|
382
391
|
}], propDecorators: { open: [{
|
|
383
392
|
type: Input
|
|
384
393
|
}], disabled: [{
|
|
385
394
|
type: Input
|
|
395
|
+
}], size: [{
|
|
396
|
+
type: Input
|
|
386
397
|
}], openChange: [{
|
|
387
398
|
type: Output
|
|
388
399
|
}], triggerTemplate: [{
|
|
389
400
|
type: ContentChild,
|
|
390
401
|
args: ['trigger']
|
|
402
|
+
}], dataTemplate: [{
|
|
403
|
+
type: ContentChild,
|
|
404
|
+
args: ['data']
|
|
391
405
|
}] } });
|
|
406
|
+
(function (ToggleComponent) {
|
|
407
|
+
ToggleComponent.Sizes = ['medium', 'small'];
|
|
408
|
+
})(ToggleComponent || (ToggleComponent = {}));
|
|
392
409
|
|
|
393
410
|
class DownloadService {
|
|
394
411
|
constructor(documentRef) {
|
|
@@ -4130,7 +4147,7 @@ class AllViewsModalComponent {
|
|
|
4130
4147
|
}
|
|
4131
4148
|
}
|
|
4132
4149
|
AllViewsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4133
|
-
AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 [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 emptyStateMessage: s.all.privateEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.sharedEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.publicEmptyStateMessage\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 let-emptyStateMessage=\"emptyStateMessage\"\n >\n <riv-toggle\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [disabled]=\"!!s.all.search\"\n >\n <ng-template #trigger>\n <div>\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n </ng-template>\n\n <div class=\"views-list\" *ngIf=\"views.length > 0; else noViews\">\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 });\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 ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n [name]=\"\n view.system ? 'Lock' : view.enabled ? 'Eye' : 'EyeOff'\n \"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n <ng-template #noViews>\n <riv-zero-state [message]=\"emptyStateMessage\"></riv-zero-state>\n </ng-template>\n </riv-toggle>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-large);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)}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding-left:var(--size-small);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}.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:0 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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset"], outputs: ["close"] }, { kind: "component", type: ToggleComponent, selector: "riv-toggle", inputs: ["open", "disabled"], outputs: ["openChange"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4150
|
+
AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 [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 emptyStateMessage: s.all.privateEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.sharedEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.publicEmptyStateMessage\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 let-emptyStateMessage=\"emptyStateMessage\"\n >\n <riv-toggle\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [disabled]=\"!!s.all.search\"\n >\n <ng-template #trigger>\n <div>\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n </ng-template>\n\n <div class=\"views-list\" *ngIf=\"views.length > 0; else noViews\">\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 });\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 ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n [name]=\"\n view.system ? 'Lock' : view.enabled ? 'Eye' : 'EyeOff'\n \"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n <ng-template #noViews>\n <riv-zero-state [message]=\"emptyStateMessage\"></riv-zero-state>\n </ng-template>\n </riv-toggle>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-large);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)}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding-left:var(--size-small);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}.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:0 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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset"], outputs: ["close"] }, { kind: "component", type: ToggleComponent, selector: "riv-toggle", inputs: ["open", "disabled", "size"], outputs: ["openChange"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4134
4151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, decorators: [{
|
|
4135
4152
|
type: Component,
|
|
4136
4153
|
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 [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 emptyStateMessage: s.all.privateEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.sharedEmptyStateMessage\n }\"\n ></ng-container>\n <ng-container\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 emptyStateMessage: s.all.publicEmptyStateMessage\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 let-emptyStateMessage=\"emptyStateMessage\"\n >\n <riv-toggle\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [disabled]=\"!!s.all.search\"\n >\n <ng-template #trigger>\n <div>\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n </ng-template>\n\n <div class=\"views-list\" *ngIf=\"views.length > 0; else noViews\">\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 });\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 ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n [name]=\"\n view.system ? 'Lock' : view.enabled ? 'Eye' : 'EyeOff'\n \"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n <ng-template #noViews>\n <riv-zero-state [message]=\"emptyStateMessage\"></riv-zero-state>\n </ng-template>\n </riv-toggle>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-large);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)}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding-left:var(--size-small);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}.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:0 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"] }]
|