@rivet-health/design-system 28.7.2 → 28.7.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/esm2020/lib/input/search/search.component.mjs +2 -2
- package/esm2020/lib/navigation/views/all-views-modal/all-views-modal.component.mjs +2 -2
- package/fesm2015/rivet-health-design-system.mjs +4 -4
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +4 -4
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -12,10 +12,10 @@ export class SearchComponent extends TextFieldComponent {
|
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
-
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-
|
|
15
|
+
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\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: "directive", type: i2.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
|
-
args: [{ selector: 'riv-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-
|
|
18
|
+
args: [{ selector: 'riv-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"] }]
|
|
19
19
|
}], propDecorators: { placeholder: [{
|
|
20
20
|
type: Input
|
|
21
21
|
}], name: [{
|
|
@@ -29,10 +29,10 @@ export class AllViewsModalComponent {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
AllViewsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
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 *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-
|
|
32
|
+
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 *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "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", "labelTemplate"] }, { kind: "component", type: i6.SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "component", type: i8.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: i9.ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, decorators: [{
|
|
34
34
|
type: Component,
|
|
35
|
-
args: [{ selector: 'riv-all-views-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n\n <riv-search\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setAllViewsSearchQuery',\n query: $event\n })\n \"\n [value]=\"s.all.search\"\n placeholder=\"Search\"\n ></riv-search>\n\n <div class=\"views\">\n <!-- View sections by permission type -->\n <ng-container\n *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-
|
|
35
|
+
args: [{ selector: 'riv-all-views-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n\n <riv-search\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setAllViewsSearchQuery',\n query: $event\n })\n \"\n [value]=\"s.all.search\"\n placeholder=\"Search\"\n ></riv-search>\n\n <div class=\"views\">\n <!-- View sections by permission type -->\n <ng-container\n *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"] }]
|
|
36
36
|
}], propDecorators: { manager: [{
|
|
37
37
|
type: Input
|
|
38
38
|
}], topOffset: [{
|
|
@@ -2341,10 +2341,10 @@ class SearchComponent extends TextFieldComponent {
|
|
|
2341
2341
|
}
|
|
2342
2342
|
}
|
|
2343
2343
|
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2344
|
-
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-
|
|
2344
|
+
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\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: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2345
2345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
|
|
2346
2346
|
type: Component,
|
|
2347
|
-
args: [{ selector: 'riv-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-
|
|
2347
|
+
args: [{ selector: 'riv-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n #input\n [id]=\"name\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [class.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n [riv-auto-focus]=\"autoFocus\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n <riv-icon\n *ngIf=\"!labelTemplate\"\n [class.clickable]=\"!!text\"\n [name]=\"!!text ? 'X' : 'Search'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"labelTemplate && !!text\"\n class=\"clickable\"\n [name]=\"'X'\"\n [size]=\"20\"\n ></riv-icon>\n </label>\n <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium)}input.large{font:var(--input-large);padding:var(--size-medium)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"] }]
|
|
2348
2348
|
}], propDecorators: { placeholder: [{
|
|
2349
2349
|
type: Input
|
|
2350
2350
|
}], name: [{
|
|
@@ -4227,10 +4227,10 @@ class AllViewsModalComponent {
|
|
|
4227
4227
|
}
|
|
4228
4228
|
}
|
|
4229
4229
|
AllViewsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4230
|
-
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 *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-
|
|
4230
|
+
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 *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4231
4231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, decorators: [{
|
|
4232
4232
|
type: Component,
|
|
4233
|
-
args: [{ selector: 'riv-all-views-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n\n <riv-search\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setAllViewsSearchQuery',\n query: $event\n })\n \"\n [value]=\"s.all.search\"\n placeholder=\"Search\"\n ></riv-search>\n\n <div class=\"views\">\n <!-- View sections by permission type -->\n <ng-container\n *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-
|
|
4233
|
+
args: [{ selector: 'riv-all-views-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n <div class=\"content\">\n <header>\n <span class=\"title\">All views</span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n\n <riv-search\n (valueChange)=\"\n manager?.actions?.next({\n type: 'setAllViewsSearchQuery',\n query: $event\n })\n \"\n [value]=\"s.all.search\"\n placeholder=\"Search\"\n ></riv-search>\n\n <div class=\"views\">\n <!-- View sections by permission type -->\n <ng-container\n *ngIf=\"s.all.privateViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'private',\n open: s.all.privateOpen,\n openChange: getOpenChange('private'),\n views: s.all.privateViews,\n title: getPermissionTitle('private'),\n description: getPermissionDescription('private')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.sharedViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'shared',\n open: s.all.sharedOpen,\n openChange: getOpenChange('shared'),\n views: s.all.sharedViews,\n title: getPermissionTitle('shared'),\n description: getPermissionDescription('shared')\n }\"\n ></ng-container>\n <ng-container\n *ngIf=\"s.all.publicViews.length > 0\"\n [ngTemplateOutlet]=\"permissionSection\"\n [ngTemplateOutletContext]=\"{\n permission: 'public',\n open: s.all.publicOpen,\n openChange: getOpenChange('public'),\n views: s.all.publicViews,\n title: getPermissionTitle('public'),\n description: getPermissionDescription('public')\n }\"\n ></ng-container>\n\n <!-- Permission section -->\n <ng-template\n #permissionSection\n let-permission=\"permission\"\n let-open=\"open\"\n let-openChange=\"openChange\"\n let-views=\"views\"\n let-title=\"title\"\n let-description=\"description\"\n >\n <div class=\"permission-section\">\n <button\n class=\"permission-header\"\n (click)=\"openChange(!open)\"\n [disabled]=\"!!s.all.search\"\n >\n <div class=\"permission-header-content\">\n <h3 class=\"permission-title\">{{ title }}</h3>\n <span class=\"permission-description\">{{ description }}</span>\n </div>\n <riv-icon\n [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n\n <div class=\"permission-content\" *ngIf=\"open\">\n <div class=\"views-list\" *ngIf=\"views.length > 0\">\n <button\n *ngFor=\"let view of views; trackBy: trackById\"\n class=\"view-item\"\n (click)=\"\n manager?.actions?.next({\n type: 'setActiveView',\n id: view.id,\n source: 'menu'\n });\n close.emit()\n \"\n >\n <div class=\"view-title\" rivTruncate>\n <riv-highlight\n [text]=\"view.title\"\n [indices]=\"view.titleHighlightIndices ?? []\"\n >\n </riv-highlight>\n </div>\n <riv-view-menu\n [manager]=\"manager\"\n [view]=\"view\"\n [menuContext]=\"'all-views'\"\n ></riv-view-menu>\n <button\n class=\"enable-view\"\n [class.enabled]=\"view.enabled && !view.system\"\n (click)=\"\n $event.stopPropagation();\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'eyeIcon'\n })\n \"\n [disabled]=\"view.system\"\n >\n <riv-icon\n *ngIf=\"view.enabled\"\n [name]=\"view.system ? 'Lock' : 'Eye'\"\n [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n [size]=\"20\"\n ></riv-icon>\n <riv-icon\n *ngIf=\"!view.enabled\"\n [name]=\"'EyeOff'\"\n [rivTooltip]=\"'Show tab'\"\n [size]=\"20\"\n ></riv-icon>\n </button>\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </div>\n </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"] }]
|
|
4234
4234
|
}], propDecorators: { manager: [{
|
|
4235
4235
|
type: Input
|
|
4236
4236
|
}], topOffset: [{
|