@rt-tools/ui-kit 0.7.1 → 0.9.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/README.md +1 -1
- package/fesm2022/rt-tools-ui-kit.mjs +1030 -356
- package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/rt-tools-ui-kit-0.9.0.tgz +0 -0
- package/src/lib/ui-kit/side-menu/favorites/rtui-side-menu-favorites.component.scss +123 -0
- package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss +5 -0
- package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss +97 -0
- package/types/rt-tools-ui-kit.d.ts +154 -28
- package/rt-tools-ui-kit-0.7.1.tgz +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgStyle, NgComponentOutlet, NgTemplateOutlet, DOCUMENT, TitleCasePipe, NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, HostBinding, ChangeDetectionStrategy, Component, Injectable, Directive, viewChild, signal, contentChild, TemplateRef, input, DestroyRef, afterRenderEffect, InjectionToken, computed, booleanAttribute, ViewEncapsulation, numberAttribute, output, effect, Pipe,
|
|
3
|
+
import { inject, HostBinding, ChangeDetectionStrategy, Component, Injectable, Directive, viewChild, signal, contentChild, TemplateRef, input, DestroyRef, afterRenderEffect, InjectionToken, computed, booleanAttribute, ViewEncapsulation, numberAttribute, output, effect, makeEnvironmentProviders, Pipe, Injector, ElementRef, viewChildren, afterNextRender, Renderer2, model, HostListener, forwardRef, ChangeDetectorRef, untracked, ViewContainerRef } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormControl, Validators, ReactiveFormsModule, FormsModule, FormBuilder, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
6
6
|
import * as i5 from '@angular/material/button';
|
|
@@ -12,7 +12,7 @@ import * as i3 from '@angular/material/input';
|
|
|
12
12
|
import { MatInputModule, MatInput, MatFormField as MatFormField$1, MatLabel } from '@angular/material/input';
|
|
13
13
|
import * as i4 from '@angular/material/select';
|
|
14
14
|
import { MatSelectModule, MatSelect } from '@angular/material/select';
|
|
15
|
-
import { checkIsMatchingValues, BlockDirective, ElemDirective, SanitizePipe, ConcatClassesPipe, RtIconOutlinedDirective, ModDirective, BreakpointService, RtScrollToElementDirective, RtNavigationDirective, IDBStorageService, EmptyToDashPipe,
|
|
15
|
+
import { checkIsMatchingValues, BlockDirective, ElemDirective, SanitizePipe, ConcatClassesPipe, RtIconOutlinedDirective, ModDirective, BreakpointService, LOCAL_STORAGE, PlatformService, WINDOW, RtScrollToElementDirective, RtNavigationDirective, IDBStorageService, EmptyToDashPipe, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, RtEscapeKeyDirective, EPosition } from '@rt-tools/core';
|
|
16
16
|
import { ReplaySubject, share, Subject, of, merge, EMPTY, noop } from 'rxjs';
|
|
17
17
|
import { filter, mergeAll, delay, take, tap, switchMap, map, concatMap, debounceTime, distinctUntilChanged, exhaustMap } from 'rxjs/operators';
|
|
18
18
|
import * as i1$1 from '@angular/material/tooltip';
|
|
@@ -21,12 +21,13 @@ import { MatFormField, MatPrefix, MatSuffix } from '@angular/material/form-field
|
|
|
21
21
|
import { MatListItem, MatNavList, MatListItemIcon, MatListItemTitle } from '@angular/material/list';
|
|
22
22
|
import * as i1$4 from '@angular/material/sidenav';
|
|
23
23
|
import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
|
|
24
|
-
import { transformStringInput, isString, transformArrayInput, areArraysEqual, isEmpty, isNumber, EListSortOrder, EFilterOperatorType, FILTER_OPERATORS, isDate, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet } from '@rt-tools/utils';
|
|
24
|
+
import { transformStringInput, isString, isRecord, transformArrayInput, areArraysEqual, isEmpty, isNumber, EListSortOrder, EFilterOperatorType, FILTER_OPERATORS, isDate, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet } from '@rt-tools/utils';
|
|
25
25
|
import { MatRipple, MatOption, provideNativeDateAdapter } from '@angular/material/core';
|
|
26
26
|
import * as i1$2 from '@angular/material/progress-spinner';
|
|
27
27
|
import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
28
28
|
import * as i1$3 from '@angular/material/expansion';
|
|
29
29
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
30
|
+
import { CdkDropList, CdkDrag, CdkDragHandle, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
30
31
|
import { Overlay, OverlayConfig, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
31
32
|
import * as i1$5 from '@angular/cdk/portal';
|
|
32
33
|
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
@@ -41,17 +42,16 @@ import { MatRadioButton } from '@angular/material/radio';
|
|
|
41
42
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
42
43
|
import * as i2$1 from '@angular/material/datepicker';
|
|
43
44
|
import { MatDatepickerModule, MatDatepickerToggle, MatDatepicker, MatDatepickerInput } from '@angular/material/datepicker';
|
|
44
|
-
import { CdkDropList, CdkDrag, CdkDragHandle, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
45
45
|
import { computePosition, offset, flip, shift } from '@floating-ui/dom';
|
|
46
46
|
import { MAT_SNACK_BAR_DATA, MatSnackBarRef, MatSnackBar } from '@angular/material/snack-bar';
|
|
47
47
|
import { ImageCropperComponent } from 'ngx-image-cropper';
|
|
48
48
|
|
|
49
|
-
const BEM_BLOCK$
|
|
49
|
+
const BEM_BLOCK$A = 'rtui-modal';
|
|
50
50
|
class RtuiModalComponent {
|
|
51
51
|
constructor() {
|
|
52
52
|
this.data = inject(MAT_DIALOG_DATA);
|
|
53
53
|
this.#dialogRef = inject((MatDialogRef));
|
|
54
|
-
this.bemBlock = BEM_BLOCK$
|
|
54
|
+
this.bemBlock = BEM_BLOCK$A;
|
|
55
55
|
}
|
|
56
56
|
#dialogRef;
|
|
57
57
|
get hostClasses() {
|
|
@@ -79,16 +79,16 @@ class RtuiModalComponent {
|
|
|
79
79
|
message: Boolean(this.control) ? this.control?.value : null,
|
|
80
80
|
});
|
|
81
81
|
}
|
|
82
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
83
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
82
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
83
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiModalComponent, isStandalone: true, selector: "rtui-modal", host: { properties: { "class": "this.hostClasses" }, classAttribute: "rtui-modal" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-modal\">\n @if (data.title) {\n <div rtElem=\"title\" mat-dialog-title>\n @if (data.icon) {\n <h2>\n <mat-icon [ngStyle]=\"data.icon.style\">\n {{ data.icon.value }}\n </mat-icon>\n </h2>\n }\n\n <h1>{{ data.title }}</h1>\n </div>\n }\n\n <mat-dialog-content>\n @if (data.text) {\n <div rtElem=\"text\" [innerHTML]=\"data.text | sanitize\"></div>\n }\n\n @if (data.confirmation) {\n <div [innerHTML]=\"data.confirmation | sanitize\"></div>\n }\n\n @if (data.input) {\n <div rtElem=\"input\">{{ data.input.label }}</div>\n\n <mat-form-field [appearance]=\"'outline'\">\n <input matInput type=\"text\" autocomplete=\"off\" [formControl]=\"control!\" />\n </mat-form-field>\n }\n\n @if (data.textArea) {\n <mat-form-field rtElem=\"textarea\">\n <textarea matInput [formControl]=\"control!\" [placeholder]=\"data.textArea.placeholder\"></textarea>\n </mat-form-field>\n }\n\n @if (data.select) {\n <mat-form-field rtElem=\"select\">\n @if (data.select.label) {\n <mat-label>{{ data.select.label }}</mat-label>\n }\n\n <mat-select required [formControl]=\"selectControl!\">\n <mat-option>--</mat-option>\n @for (option of data.select.value; track option?.name ?? option) {\n <mat-option [value]=\"option?.value\">\n {{ option?.name }}\n </mat-option>\n }\n </mat-select>\n\n @if (data.select.hint && selectControl?.hasError('required')) {\n <mat-error>{{ data.select.hint }}</mat-error>\n }\n </mat-form-field>\n }\n\n @if (data?.component) {\n <ng-container *ngComponentOutlet=\"data!.component!\" />\n }\n </mat-dialog-content>\n\n <mat-dialog-actions [attr.align]=\"data.buttonsAlign\">\n @for (button of data.buttons; track button.text) {\n @switch (button.appearance) {\n @case ('raised') {\n <button\n mat-flat-button\n type=\"button\"\n [class]=\"[button.className] | concatClasses\"\n [color]=\"button.color\"\n [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n [ngStyle]=\"button.style\"\n (click)=\"onClose(button)\">\n {{ button.text }}\n </button>\n }\n\n @case ('flat') {\n <button\n mat-flat-button\n type=\"button\"\n [color]=\"button.color\"\n [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n [ngStyle]=\"button.style\"\n (click)=\"onClose(button)\">\n {{ button.text }}\n </button>\n }\n\n @case ('stroked') {\n <button\n mat-stroked-button\n type=\"button\"\n [color]=\"button.color\"\n [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n [ngStyle]=\"button.style\"\n (click)=\"onClose(button)\">\n {{ button.text }}\n </button>\n }\n\n @case ('fab') {\n <button\n mat-fab\n type=\"button\"\n [color]=\"button.color\"\n [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n [ngStyle]=\"button.style\"\n (click)=\"onClose(button)\">\n {{ button.text }}\n </button>\n }\n\n @case ('mini-fab') {\n <button\n mat-mini-fab\n type=\"button\"\n [color]=\"button.color\"\n [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n [ngStyle]=\"button.style\"\n (click)=\"onClose(button)\">\n {{ button.text }}\n </button>\n }\n\n @default {\n <button\n mat-button\n type=\"button\"\n [color]=\"button.color\"\n [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n [ngStyle]=\"button.style\"\n (click)=\"onClose(button)\">\n {{ button.text }}\n </button>\n }\n }\n }\n </mat-dialog-actions>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--rt-text-base-primary);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--rt-text-base-soft);--rt-modal-content-font-size: .8rem;--rt-modal-content-text-align: center;--rt-modal-content-word-wrap: break-word;--rt-modal-input-margin-top: 1.5rem;--rt-modal-input-font-weight: 600;--rt-modal-input-text-align: left;--rt-modal-textarea-margin-top: 1.5rem;--rt-modal-select-margin-top: 1.5rem;--rt-modal-text-highlited-font-weight: 600;--rt-modal-text-highlited-color: var(--rt-text-base-strong);--rt-modal-text-warn-display: inline;--rt-modal-text-warn-font-size: 1rem;--rt-modal-text-warn-font-weight: 600;--rt-modal-text-warn-color: var(--rt-text-accent-danger)}:host ::ng-deep .--highlighted{display:inline;color:var(--rt-modal-text-highlited-color);font-weight:var(--rt-modal-text-highlited-font-weight)}:host ::ng-deep .--warn{display:inline;color:var(--rt-modal-text-warn-color);font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight)}:host .rtui-modal__title h1{color:var(--rt-modal-title-color);font-size:var(--rt-modal-title-font-size);font-weight:var(--rt-modal-title-font-weight)}:host .rtui-modal__title h1,:host .rtui-modal__title h2{text-align:center}:host .rtui-modal__input{margin-top:var(--rt-modal-input-margin-top);font-weight:var(--rt-modal-input-font-weight);text-align:var(--rt-modal-input-text-align)}:host .rtui-modal__textarea{margin-top:var(--rt-modal-textarea-margin-top)}:host .rtui-modal__select{margin-top:var(--rt-modal-select-margin-top)}:host .mat-icon{width:auto;height:auto}:host .mdc-dialog__title:before{height:100%}:host mat-dialog-content{padding:var(--rt-modal-content-padding);color:var(--rt-modal-content-color);font-size:var(--rt-modal-content-font-size);overflow-wrap:var(--rt-modal-content-word-wrap);text-align:var(--rt-modal-content-text-align)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type:
|
|
84
84
|
// material
|
|
85
85
|
MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
86
86
|
// BEM
|
|
87
87
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: SanitizePipe, name: "sanitize" }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
88
88
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiModalComponent, decorators: [{
|
|
90
90
|
type: Component,
|
|
91
|
-
args: [{ selector: BEM_BLOCK$
|
|
91
|
+
args: [{ selector: BEM_BLOCK$A, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: BEM_BLOCK$A }, imports: [
|
|
92
92
|
NgStyle,
|
|
93
93
|
NgComponentOutlet,
|
|
94
94
|
ReactiveFormsModule,
|
|
@@ -150,44 +150,44 @@ class RtModalService {
|
|
|
150
150
|
on: (predicate) => result$.pipe(filter((answer) => predicate(answer))),
|
|
151
151
|
};
|
|
152
152
|
}
|
|
153
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
154
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
154
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtModalService }); }
|
|
155
155
|
}
|
|
156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtModalService, decorators: [{
|
|
157
157
|
type: Injectable
|
|
158
158
|
}] });
|
|
159
159
|
|
|
160
160
|
class RtuiScrollableContainerHeaderDirective {
|
|
161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
162
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
162
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiScrollableContainerHeaderDirective, isStandalone: true, selector: "[rtuiScrollableHeader]", ngImport: i0 }); }
|
|
163
163
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, decorators: [{
|
|
165
165
|
type: Directive,
|
|
166
166
|
args: [{
|
|
167
167
|
selector: '[rtuiScrollableHeader]',
|
|
168
168
|
}]
|
|
169
169
|
}] });
|
|
170
170
|
class RtuiScrollableContainerContentDirective {
|
|
171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
172
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
172
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiScrollableContainerContentDirective, isStandalone: true, selector: "[rtuiScrollableContent]", ngImport: i0 }); }
|
|
173
173
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerContentDirective, decorators: [{
|
|
175
175
|
type: Directive,
|
|
176
176
|
args: [{
|
|
177
177
|
selector: '[rtuiScrollableContent]',
|
|
178
178
|
}]
|
|
179
179
|
}] });
|
|
180
180
|
class RtuiScrollableContainerFooterDirective {
|
|
181
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
182
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
181
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
182
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiScrollableContainerFooterDirective, isStandalone: true, selector: "[rtuiScrollableFooter]", ngImport: i0 }); }
|
|
183
183
|
}
|
|
184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerFooterDirective, decorators: [{
|
|
185
185
|
type: Directive,
|
|
186
186
|
args: [{
|
|
187
187
|
selector: '[rtuiScrollableFooter]',
|
|
188
188
|
}]
|
|
189
189
|
}] });
|
|
190
|
-
const BEM_BLOCK$
|
|
190
|
+
const BEM_BLOCK$z = 'rtui-scrollable';
|
|
191
191
|
class RtuiScrollableContainerComponent {
|
|
192
192
|
#destroyRef;
|
|
193
193
|
/**
|
|
@@ -298,12 +298,12 @@ class RtuiScrollableContainerComponent {
|
|
|
298
298
|
const paddingTop = parseFloat(getComputedStyle(node).paddingTop) || 0;
|
|
299
299
|
this.hintBottom.set(Math.max(node.offsetHeight - paddingTop, 0));
|
|
300
300
|
}
|
|
301
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
302
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
301
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
302
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiScrollableContainerComponent, isStandalone: true, selector: "rtui-scrollable", inputs: { isScrollHintShown: { classPropertyName: "isScrollHintShown", publicName: "isScrollHintShown", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-scrollable" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiScrollableContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: RtuiScrollableContainerContentDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiScrollableContainerFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["foot"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-scrollable\">\n @if (headerTpl()) {\n <div rtElem=\"header\">\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </div>\n }\n\n @if (contentTpl()) {\n <div #body rtElem=\"content\" (scroll)=\"onBodyScroll()\">\n <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n </div>\n }\n\n @if (footerTpl()) {\n <div #foot rtElem=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </div>\n }\n\n <!--\n \u041F\u0440\u0438\u0437\u043D\u0430\u043A \u0442\u043E\u0433\u043E, \u0447\u0442\u043E \u0441\u043D\u0438\u0437\u0443 \u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C \u043D\u0435\u043F\u043E\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u0435: \u043A\u0440\u0430\u0439 \u0441\u043F\u0438\u0441\u043A\u0430, \u0440\u043E\u0432\u043D\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u043D\u043D\u044B\u0439 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C,\n \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F \u043A\u0430\u043A \u043A\u043E\u043D\u0435\u0446 \u0441\u043F\u0438\u0441\u043A\u0430, \u0438 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043E \u043F\u0443\u043D\u043A\u0442 \u043F\u0440\u043E\u043F\u0430\u043B. \u041F\u043E\u043B\u043E\u0441\u0430 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435, \u0430\n \u043D\u0435 \u0432\u043D\u0443\u0442\u0440\u0438 \u0442\u0435\u043B\u0430: \u0442\u0435\u043B\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442 \u0432\u0441\u0451 \u043F\u043E \u0441\u0432\u043E\u0435\u043C\u0443 \u043A\u0440\u0430\u044E, \u0438 \u043F\u043E\u043B\u043E\u0441\u0430 \u043E\u0431\u0440\u044B\u0432\u0430\u043B\u0430\u0441\u044C \u043D\u0430 \u0432\u0435\u0440\u0445\u043D\u0435\u043C \u043E\u0442\u0441\u0442\u0443\u043F\u0435\n \u043F\u043E\u0434\u0432\u0430\u043B\u0430 \u2014 \u043C\u0435\u0436\u0434\u0443 \u043D\u0435\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u0435\u043C, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u0435\u0440\u0432\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u043E\u0439 \u043F\u043E\u0434\u0432\u0430\u043B\u0430,\n \u043E\u0441\u0442\u0430\u0432\u0430\u043B\u0430\u0441\u044C \u043F\u043E\u043B\u043E\u0441\u0430 \u0447\u0438\u0441\u0442\u043E\u0433\u043E \u0444\u043E\u043D\u0430. \u041E\u0442\u0441\u0442\u0443\u043F \u044D\u0442\u043E\u0442 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0437\u0430\u043C\u0435\u0440\u043E\u043C: \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u043F\u0438\u0448\u0435\u0442 \u0435\u0433\u043E \u043A\u0430\u043A\n \u0445\u043E\u0447\u0435\u0442 \u2014 \u043E\u0434\u043D\u0438\u043C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435\u043C, \u0434\u0432\u0443\u043C\u044F, \u0447\u0435\u0442\u044B\u0440\u044C\u043C\u044F, \u2014 \u0438 \u0432\u044B\u0447\u0435\u0441\u0442\u044C \u0435\u0433\u043E \u0432 \u0441\u0442\u0438\u043B\u044F\u0445 \u043D\u0435 \u0438\u0437 \u0447\u0435\u0433\u043E.\n -->\n @if (isScrollHintShown() && hasMoreBelow()) {\n <div rtElem=\"scroll-hint\" qa-dataid=\"scrollable-scroll-hint\" [attr.aria-label]=\"scrollHintLabel\" [style.bottom.px]=\"hintBottom()\">\n <mat-icon\n rtElem=\"scroll-hint-icon\"\n role=\"button\"\n tabindex=\"0\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"scrollHintLabel\"\n (click)=\"onScrollHintClick($event)\"\n (keydown.enter)=\"onScrollHintClick($event)\">\n keyboard_arrow_down\n </mat-icon>\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base);--rt-scrollable-scroll-hint-height: 2.5rem;--rt-scrollable-scroll-hint-icon-size: 1.25rem;--rt-scrollable-scroll-hint-color: var(--rt-bg-accent-primary-subtle)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}:host .rtui-scrollable__scroll-hint{position:absolute;z-index:1;right:0;left:0;display:flex;height:var(--rt-scrollable-scroll-hint-height);align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgb(from var(--rt-scrollable-scroll-hint-color) r g b/0%),var(--rt-scrollable-scroll-hint-color));pointer-events:none}:host .rtui-scrollable__scroll-hint-icon{display:flex;width:var(--rt-scrollable-scroll-hint-icon-size);height:var(--rt-scrollable-scroll-hint-icon-size);align-items:center;justify-content:center;border-radius:var(--rt-radius-full);background-color:var(--rt-bg-base-base);color:var(--rt-text-base-secondary);font-size:var(--rt-scrollable-scroll-hint-icon-size);pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
303
303
|
}
|
|
304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiScrollableContainerComponent, decorators: [{
|
|
305
305
|
type: Component,
|
|
306
|
-
args: [{ selector: 'rtui-scrollable', host: { class: BEM_BLOCK$
|
|
306
|
+
args: [{ selector: 'rtui-scrollable', host: { class: BEM_BLOCK$z }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [BlockDirective, ElemDirective, NgTemplateOutlet, MatIcon, MatTooltip], template: "<ng-container rtBlock=\"rtui-scrollable\">\n @if (headerTpl()) {\n <div rtElem=\"header\">\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </div>\n }\n\n @if (contentTpl()) {\n <div #body rtElem=\"content\" (scroll)=\"onBodyScroll()\">\n <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n </div>\n }\n\n @if (footerTpl()) {\n <div #foot rtElem=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </div>\n }\n\n <!--\n \u041F\u0440\u0438\u0437\u043D\u0430\u043A \u0442\u043E\u0433\u043E, \u0447\u0442\u043E \u0441\u043D\u0438\u0437\u0443 \u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C \u043D\u0435\u043F\u043E\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u0435: \u043A\u0440\u0430\u0439 \u0441\u043F\u0438\u0441\u043A\u0430, \u0440\u043E\u0432\u043D\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u043D\u043D\u044B\u0439 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C,\n \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F \u043A\u0430\u043A \u043A\u043E\u043D\u0435\u0446 \u0441\u043F\u0438\u0441\u043A\u0430, \u0438 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043E \u043F\u0443\u043D\u043A\u0442 \u043F\u0440\u043E\u043F\u0430\u043B. \u041F\u043E\u043B\u043E\u0441\u0430 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435, \u0430\n \u043D\u0435 \u0432\u043D\u0443\u0442\u0440\u0438 \u0442\u0435\u043B\u0430: \u0442\u0435\u043B\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442 \u0432\u0441\u0451 \u043F\u043E \u0441\u0432\u043E\u0435\u043C\u0443 \u043A\u0440\u0430\u044E, \u0438 \u043F\u043E\u043B\u043E\u0441\u0430 \u043E\u0431\u0440\u044B\u0432\u0430\u043B\u0430\u0441\u044C \u043D\u0430 \u0432\u0435\u0440\u0445\u043D\u0435\u043C \u043E\u0442\u0441\u0442\u0443\u043F\u0435\n \u043F\u043E\u0434\u0432\u0430\u043B\u0430 \u2014 \u043C\u0435\u0436\u0434\u0443 \u043D\u0435\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u0435\u043C, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u0435\u0440\u0432\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u043E\u0439 \u043F\u043E\u0434\u0432\u0430\u043B\u0430,\n \u043E\u0441\u0442\u0430\u0432\u0430\u043B\u0430\u0441\u044C \u043F\u043E\u043B\u043E\u0441\u0430 \u0447\u0438\u0441\u0442\u043E\u0433\u043E \u0444\u043E\u043D\u0430. \u041E\u0442\u0441\u0442\u0443\u043F \u044D\u0442\u043E\u0442 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0437\u0430\u043C\u0435\u0440\u043E\u043C: \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u043F\u0438\u0448\u0435\u0442 \u0435\u0433\u043E \u043A\u0430\u043A\n \u0445\u043E\u0447\u0435\u0442 \u2014 \u043E\u0434\u043D\u0438\u043C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435\u043C, \u0434\u0432\u0443\u043C\u044F, \u0447\u0435\u0442\u044B\u0440\u044C\u043C\u044F, \u2014 \u0438 \u0432\u044B\u0447\u0435\u0441\u0442\u044C \u0435\u0433\u043E \u0432 \u0441\u0442\u0438\u043B\u044F\u0445 \u043D\u0435 \u0438\u0437 \u0447\u0435\u0433\u043E.\n -->\n @if (isScrollHintShown() && hasMoreBelow()) {\n <div rtElem=\"scroll-hint\" qa-dataid=\"scrollable-scroll-hint\" [attr.aria-label]=\"scrollHintLabel\" [style.bottom.px]=\"hintBottom()\">\n <mat-icon\n rtElem=\"scroll-hint-icon\"\n role=\"button\"\n tabindex=\"0\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"scrollHintLabel\"\n (click)=\"onScrollHintClick($event)\"\n (keydown.enter)=\"onScrollHintClick($event)\">\n keyboard_arrow_down\n </mat-icon>\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base);--rt-scrollable-scroll-hint-height: 2.5rem;--rt-scrollable-scroll-hint-icon-size: 1.25rem;--rt-scrollable-scroll-hint-color: var(--rt-bg-accent-primary-subtle)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}:host .rtui-scrollable__scroll-hint{position:absolute;z-index:1;right:0;left:0;display:flex;height:var(--rt-scrollable-scroll-hint-height);align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgb(from var(--rt-scrollable-scroll-hint-color) r g b/0%),var(--rt-scrollable-scroll-hint-color));pointer-events:none}:host .rtui-scrollable__scroll-hint-icon{display:flex;width:var(--rt-scrollable-scroll-hint-icon-size);height:var(--rt-scrollable-scroll-hint-icon-size);align-items:center;justify-content:center;border-radius:var(--rt-radius-full);background-color:var(--rt-bg-base-base);color:var(--rt-text-base-secondary);font-size:var(--rt-scrollable-scroll-hint-icon-size);pointer-events:auto}\n"] }]
|
|
307
307
|
}], ctorParameters: () => [], propDecorators: { bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], footerRef: [{ type: i0.ViewChild, args: ['foot', { isSignal: true }] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerHeaderDirective), { ...{
|
|
308
308
|
read: TemplateRef,
|
|
309
309
|
}, isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerContentDirective), { ...{
|
|
@@ -565,7 +565,7 @@ const RT_UI_CONFIG = new InjectionToken('RT_UI_CONFIG', {
|
|
|
565
565
|
factory: () => ({}),
|
|
566
566
|
});
|
|
567
567
|
|
|
568
|
-
const BEM_BLOCK$
|
|
568
|
+
const BEM_BLOCK$y = 'rtui-icon';
|
|
569
569
|
const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
|
|
570
570
|
const fontLoaded = signal(false, /* @ts-ignore */
|
|
571
571
|
...(ngDevMode ? [{ debugName: "fontLoaded" }] : /* istanbul ignore next */ []));
|
|
@@ -606,14 +606,14 @@ class RtuiIconComponent {
|
|
|
606
606
|
fontLoaded.set(true);
|
|
607
607
|
});
|
|
608
608
|
}
|
|
609
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
610
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
609
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiIconComponent, isStandalone: true, selector: "rtui-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "rtui-icon" }, hostDirectives: [{ directive: i1$1.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled"] }], ngImport: i0, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n @if (glyph()) {\n {{ glyph() }}\n } @else {\n <ng-content />\n }\n</mat-icon>\n", styles: ["@charset \"UTF-8\";:root{--rt-icon-text-button-size: 1.375rem}.rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:var(--rt-icon-size-xs);height:var(--rt-icon-size-xs);font-size:var(--rt-icon-size-xs)}.rtui-icon--size-sm{width:var(--rt-icon-size-sm);height:var(--rt-icon-size-sm);font-size:var(--rt-icon-size-sm)}.rtui-icon--size-md{width:var(--rt-icon-size-md);height:var(--rt-icon-size-md);font-size:var(--rt-icon-size-md)}.rtui-icon--size-lg{width:var(--rt-icon-size-lg);height:var(--rt-icon-size-lg);font-size:var(--rt-icon-size-lg)}.rtui-icon--size-xl{width:var(--rt-icon-size-xl);height:var(--rt-icon-size-xl);font-size:var(--rt-icon-size-xl)}.rtui-icon--size-xxl{width:var(--rt-icon-size-xxl);height:var(--rt-icon-size-xxl);font-size:var(--rt-icon-size-xxl)}.rtui-icon--size-3xl{width:var(--rt-icon-size-3xl);height:var(--rt-icon-size-3xl);font-size:var(--rt-icon-size-3xl)}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:var(--rt-icon-text-button-size);height:var(--rt-icon-text-button-size);font-size:var(--rt-icon-text-button-size)}\n"], dependencies: [{ kind: "component", type:
|
|
611
611
|
// material
|
|
612
612
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
613
613
|
// directives
|
|
614
614
|
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
615
615
|
}
|
|
616
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiIconComponent, decorators: [{
|
|
617
617
|
type: Component,
|
|
618
618
|
args: [{ selector: 'rtui-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
619
619
|
// material
|
|
@@ -626,12 +626,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
626
626
|
inputs: ['matTooltip: tooltip', 'matTooltipPosition: tooltipPosition', 'matTooltipDisabled: tooltipDisabled'],
|
|
627
627
|
},
|
|
628
628
|
], host: {
|
|
629
|
-
class: BEM_BLOCK$
|
|
629
|
+
class: BEM_BLOCK$y,
|
|
630
630
|
'[class]': 'hostClasses()',
|
|
631
631
|
}, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n @if (glyph()) {\n {{ glyph() }}\n } @else {\n <ng-content />\n }\n</mat-icon>\n", styles: ["@charset \"UTF-8\";:root{--rt-icon-text-button-size: 1.375rem}.rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:var(--rt-icon-size-xs);height:var(--rt-icon-size-xs);font-size:var(--rt-icon-size-xs)}.rtui-icon--size-sm{width:var(--rt-icon-size-sm);height:var(--rt-icon-size-sm);font-size:var(--rt-icon-size-sm)}.rtui-icon--size-md{width:var(--rt-icon-size-md);height:var(--rt-icon-size-md);font-size:var(--rt-icon-size-md)}.rtui-icon--size-lg{width:var(--rt-icon-size-lg);height:var(--rt-icon-size-lg);font-size:var(--rt-icon-size-lg)}.rtui-icon--size-xl{width:var(--rt-icon-size-xl);height:var(--rt-icon-size-xl);font-size:var(--rt-icon-size-xl)}.rtui-icon--size-xxl{width:var(--rt-icon-size-xxl);height:var(--rt-icon-size-xxl);font-size:var(--rt-icon-size-xxl)}.rtui-icon--size-3xl{width:var(--rt-icon-size-3xl);height:var(--rt-icon-size-3xl);font-size:var(--rt-icon-size-3xl)}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:var(--rt-icon-text-button-size);height:var(--rt-icon-text-button-size);font-size:var(--rt-icon-text-button-size)}\n"] }]
|
|
632
632
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }] } });
|
|
633
633
|
|
|
634
|
-
const BEM_BLOCK$
|
|
634
|
+
const BEM_BLOCK$x = 'rtui-spinner';
|
|
635
635
|
class RtuiSpinnerComponent {
|
|
636
636
|
constructor() {
|
|
637
637
|
this.#destroyRef = inject(DestroyRef);
|
|
@@ -667,15 +667,15 @@ class RtuiSpinnerComponent {
|
|
|
667
667
|
// кружок поверх готового экрана.
|
|
668
668
|
this.#destroyRef.onDestroy(() => clearTimeout(timer));
|
|
669
669
|
}
|
|
670
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
670
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
671
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiSpinnerComponent, isStandalone: true, selector: "rtui-spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, showBox: { classPropertyName: "showBox", publicName: "showBox", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-spinner" }, ngImport: i0, template: "@if (visible()) {\n <ng-container rtBlock=\"rtui-spinner\">\n <div rtElem=\"container\" [rtMod]=\"{ 'bgr-color': showBackground() }\">\n <div rtElem=\"wrapper\" [rtMod]=\"{ 'bgr-color': showBox() }\">\n <mat-spinner [diameter]=\"diameter()\" />\n </div>\n </div>\n </ng-container>\n}\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .rtui-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .rtui-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .rtui-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
672
672
|
}
|
|
673
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
673
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSpinnerComponent, decorators: [{
|
|
674
674
|
type: Component,
|
|
675
|
-
args: [{ selector: 'rtui-spinner', imports: [MatProgressSpinnerModule, BlockDirective, ElemDirective, ModDirective], host: { class: BEM_BLOCK$
|
|
675
|
+
args: [{ selector: 'rtui-spinner', imports: [MatProgressSpinnerModule, BlockDirective, ElemDirective, ModDirective], host: { class: BEM_BLOCK$x }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n <ng-container rtBlock=\"rtui-spinner\">\n <div rtElem=\"container\" [rtMod]=\"{ 'bgr-color': showBackground() }\">\n <div rtElem=\"wrapper\" [rtMod]=\"{ 'bgr-color': showBox() }\">\n <mat-spinner [diameter]=\"diameter()\" />\n </div>\n </div>\n </ng-container>\n}\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .rtui-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .rtui-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .rtui-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"] }]
|
|
676
676
|
}], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], showBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBox", required: false }] }], showBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackground", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }] } });
|
|
677
677
|
|
|
678
|
-
const BEM_BLOCK$
|
|
678
|
+
const BEM_BLOCK$w = 'rtui-button';
|
|
679
679
|
class RtuiButtonComponent {
|
|
680
680
|
constructor() {
|
|
681
681
|
/** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
|
|
@@ -742,7 +742,7 @@ class RtuiButtonComponent {
|
|
|
742
742
|
*/
|
|
743
743
|
this.hostModifiers = computed(() => Object.entries(this.modifiers())
|
|
744
744
|
.filter(([, isOn]) => isOn)
|
|
745
|
-
.map(([name]) => `${BEM_BLOCK$
|
|
745
|
+
.map(([name]) => `${BEM_BLOCK$w}--${name}`)
|
|
746
746
|
.join(' '), /* @ts-ignore */
|
|
747
747
|
...(ngDevMode ? [{ debugName: "hostModifiers" }] : /* istanbul ignore next */ []));
|
|
748
748
|
this.type = input('icon', /* @ts-ignore */
|
|
@@ -779,8 +779,8 @@ class RtuiButtonComponent {
|
|
|
779
779
|
this.clicked.emit();
|
|
780
780
|
}
|
|
781
781
|
}
|
|
782
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
783
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "hostModifiers()", "class.rtui-button-full": "fullWidth()" }, classAttribute: "rtui-button" }, hostDirectives: [{ directive: i1$1.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n <ng-content />\n</ng-template>\n\n<!-- \u0411\u043B\u043E\u043A \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u043E\u043C: \u043A\u043B\u0430\u0441\u0441 \u043E\u043D \u043D\u0435 \u0441\u0442\u0430\u0432\u0438\u0442 (\u0443\u0437\u0435\u043B \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F), \u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u0430\u0451\u0442 \u0438\u043C\u044F\n \u043F\u043E\u0442\u043E\u043C\u043A\u0430\u043C. \u0421\u0430\u043C \u043A\u043B\u0430\u0441\u0441 \u0431\u043B\u043E\u043A\u0430 \u0438 \u0435\u0433\u043E \u043C\u043E\u0434\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u044B \u0432\u0438\u0441\u044F\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435 \u2014 \u0441\u043C. `host` \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435. -->\n<ng-container rtBlock=\"rtui-button\">\n @switch (type()) {\n @case ('pill') {\n @if (resolvedDesign() === 'material') {\n <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n <button\n type=\"button\"\n rtElem=\"material\"\n [matButton]=\"materialAppearance()\"\n [rtMod]=\"{ danger: variant() === 'danger' }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n } @else {\n <button\n type=\"button\"\n rtElem=\"control\"\n matRipple\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n }\n @default {\n <button\n type=\"button\"\n rtElem=\"control\"\n matRipple\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button__control,:host(.rtui-button-full) .rtui-button__material{width:100%}.rtui-button__control{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button__control rtui-icon{color:inherit}.rtui-button__control rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__control:disabled{cursor:not-allowed;opacity:.38}.rtui-button__material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}:host(.rtui-button--loading) .rtui-button__control{cursor:wait}:host(.rtui-button--type-icon) .rtui-button__control,:host(.rtui-button--type-fab) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-icon) .rtui-button__control:hover:not(:disabled),:host(.rtui-button--type-fab) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-icon.rtui-button--size-xs) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4)}:host(.rtui-button--type-icon.rtui-button--size-sm) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6)}:host(.rtui-button--type-icon.rtui-button--size-md) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8)}:host(.rtui-button--type-icon.rtui-button--size-lg) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10)}:host(.rtui-button--type-icon.rtui-button--variant-primary) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-primary) .rtui-button__control{color:var(--rt-icon-accent-primary)}:host(.rtui-button--type-icon.rtui-button--variant-danger) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-danger) .rtui-button__control{color:var(--rt-icon-accent-danger)}:host(.rtui-button--type-icon.rtui-button--variant-success) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-success) .rtui-button__control{color:var(--rt-icon-accent-success)}:host(.rtui-button--type-icon.rtui-button--variant-warning) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-warning) .rtui-button__control{color:var(--rt-icon-accent-warning)}:host(.rtui-button--type-icon.rtui-button--variant-accent) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-accent) .rtui-button__control{color:var(--rt-icon-accent-info)}:host(.rtui-button--type-pill) .rtui-button__control{border-radius:var(--rt-radius-xl);background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:var(--rt-font-weight-medium);gap:var(--rt-spacing-6)}:host(.rtui-button--type-pill) .rtui-button__control:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}:host(.rtui-button--type-pill) .rtui-button__control:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}:host(.rtui-button--type-pill.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4) var(--rt-spacing-8);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6) var(--rt-spacing-10);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8) var(--rt-spacing-14);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10) var(--rt-spacing-16);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--radius-none) .rtui-button__control{border-radius:0}:host(.rtui-button--type-pill.rtui-button--radius-sm) .rtui-button__control{border-radius:var(--rt-radius-xs)}:host(.rtui-button--type-pill.rtui-button--radius-md) .rtui-button__control{border-radius:var(--rt-radius-sm)}:host(.rtui-button--type-pill.rtui-button--radius-lg) .rtui-button__control{border-radius:var(--rt-radius-md)}:host(.rtui-button--type-pill.rtui-button--radius-full) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control{min-height:1.875rem;padding:0 var(--rt-spacing-10);background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:var(--rt-font-size-md);font-weight:var(--rt-font-weight-regular)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"], dependencies: [{ kind: "directive", type:
|
|
782
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
783
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "hostModifiers()", "class.rtui-button-full": "fullWidth()" }, classAttribute: "rtui-button" }, hostDirectives: [{ directive: i1$1.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n <ng-content />\n</ng-template>\n\n<!-- \u0411\u043B\u043E\u043A \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u043E\u043C: \u043A\u043B\u0430\u0441\u0441 \u043E\u043D \u043D\u0435 \u0441\u0442\u0430\u0432\u0438\u0442 (\u0443\u0437\u0435\u043B \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F), \u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u0430\u0451\u0442 \u0438\u043C\u044F\n \u043F\u043E\u0442\u043E\u043C\u043A\u0430\u043C. \u0421\u0430\u043C \u043A\u043B\u0430\u0441\u0441 \u0431\u043B\u043E\u043A\u0430 \u0438 \u0435\u0433\u043E \u043C\u043E\u0434\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u044B \u0432\u0438\u0441\u044F\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435 \u2014 \u0441\u043C. `host` \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435. -->\n<ng-container rtBlock=\"rtui-button\">\n @switch (type()) {\n @case ('pill') {\n @if (resolvedDesign() === 'material') {\n <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n <button\n type=\"button\"\n rtElem=\"material\"\n [matButton]=\"materialAppearance()\"\n [rtMod]=\"{ danger: variant() === 'danger' }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n } @else {\n <button\n type=\"button\"\n rtElem=\"control\"\n matRipple\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n }\n @default {\n <button\n type=\"button\"\n rtElem=\"control\"\n matRipple\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button__control,:host(.rtui-button-full) .rtui-button__material{width:100%}.rtui-button__control{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button__control rtui-icon{color:inherit}.rtui-button__control rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__control:disabled{cursor:not-allowed;opacity:.38}.rtui-button__material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}:host(.rtui-button--loading) .rtui-button__control{cursor:wait}:host(.rtui-button--type-icon) .rtui-button__control,:host(.rtui-button--type-fab) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-icon) .rtui-button__control:hover:not(:disabled),:host(.rtui-button--type-fab) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-icon.rtui-button--size-xs) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4)}:host(.rtui-button--type-icon.rtui-button--size-sm) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6)}:host(.rtui-button--type-icon.rtui-button--size-md) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8)}:host(.rtui-button--type-icon.rtui-button--size-lg) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10)}:host(.rtui-button--type-icon.rtui-button--variant-primary) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-primary) .rtui-button__control{color:var(--rt-icon-accent-primary)}:host(.rtui-button--type-icon.rtui-button--variant-danger) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-danger) .rtui-button__control{color:var(--rt-icon-accent-danger)}:host(.rtui-button--type-icon.rtui-button--variant-success) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-success) .rtui-button__control{color:var(--rt-icon-accent-success)}:host(.rtui-button--type-icon.rtui-button--variant-warning) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-warning) .rtui-button__control{color:var(--rt-icon-accent-warning)}:host(.rtui-button--type-icon.rtui-button--variant-accent) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-accent) .rtui-button__control{color:var(--rt-icon-accent-info)}:host(.rtui-button--type-pill) .rtui-button__control{border-radius:var(--rt-radius-xl);background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:var(--rt-font-weight-medium);gap:var(--rt-spacing-6)}:host(.rtui-button--type-pill) .rtui-button__control:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}:host(.rtui-button--type-pill) .rtui-button__control:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}:host(.rtui-button--type-pill.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4) var(--rt-spacing-8);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6) var(--rt-spacing-10);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8) var(--rt-spacing-14);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10) var(--rt-spacing-16);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--radius-none) .rtui-button__control{border-radius:0}:host(.rtui-button--type-pill.rtui-button--radius-sm) .rtui-button__control{border-radius:var(--rt-radius-xs)}:host(.rtui-button--type-pill.rtui-button--radius-md) .rtui-button__control{border-radius:var(--rt-radius-sm)}:host(.rtui-button--type-pill.rtui-button--radius-lg) .rtui-button__control{border-radius:var(--rt-radius-md)}:host(.rtui-button--type-pill.rtui-button--radius-full) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control{min-height:1.875rem;padding:0 var(--rt-spacing-10);background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:var(--rt-font-size-md);font-weight:var(--rt-font-weight-regular)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"], dependencies: [{ kind: "directive", type:
|
|
784
784
|
// angular
|
|
785
785
|
NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type:
|
|
786
786
|
// rt-tools
|
|
@@ -790,7 +790,7 @@ class RtuiButtonComponent {
|
|
|
790
790
|
// material
|
|
791
791
|
MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
792
792
|
}
|
|
793
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
793
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiButtonComponent, decorators: [{
|
|
794
794
|
type: Component,
|
|
795
795
|
args: [{ selector: 'rtui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
796
796
|
// angular
|
|
@@ -816,13 +816,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
816
816
|
],
|
|
817
817
|
},
|
|
818
818
|
], host: {
|
|
819
|
-
class: BEM_BLOCK$
|
|
819
|
+
class: BEM_BLOCK$w,
|
|
820
820
|
'[class]': 'hostModifiers()',
|
|
821
821
|
'[class.rtui-button-full]': 'fullWidth()',
|
|
822
822
|
}, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n <ng-content />\n</ng-template>\n\n<!-- \u0411\u043B\u043E\u043A \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u043E\u043C: \u043A\u043B\u0430\u0441\u0441 \u043E\u043D \u043D\u0435 \u0441\u0442\u0430\u0432\u0438\u0442 (\u0443\u0437\u0435\u043B \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F), \u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u0430\u0451\u0442 \u0438\u043C\u044F\n \u043F\u043E\u0442\u043E\u043C\u043A\u0430\u043C. \u0421\u0430\u043C \u043A\u043B\u0430\u0441\u0441 \u0431\u043B\u043E\u043A\u0430 \u0438 \u0435\u0433\u043E \u043C\u043E\u0434\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u044B \u0432\u0438\u0441\u044F\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435 \u2014 \u0441\u043C. `host` \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435. -->\n<ng-container rtBlock=\"rtui-button\">\n @switch (type()) {\n @case ('pill') {\n @if (resolvedDesign() === 'material') {\n <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n <button\n type=\"button\"\n rtElem=\"material\"\n [matButton]=\"materialAppearance()\"\n [rtMod]=\"{ danger: variant() === 'danger' }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n } @else {\n <button\n type=\"button\"\n rtElem=\"control\"\n matRipple\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n }\n @default {\n <button\n type=\"button\"\n rtElem=\"control\"\n matRipple\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button__control,:host(.rtui-button-full) .rtui-button__material{width:100%}.rtui-button__control{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button__control rtui-icon{color:inherit}.rtui-button__control rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__control:disabled{cursor:not-allowed;opacity:.38}.rtui-button__material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}:host(.rtui-button--loading) .rtui-button__control{cursor:wait}:host(.rtui-button--type-icon) .rtui-button__control,:host(.rtui-button--type-fab) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-icon) .rtui-button__control:hover:not(:disabled),:host(.rtui-button--type-fab) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-icon.rtui-button--size-xs) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4)}:host(.rtui-button--type-icon.rtui-button--size-sm) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6)}:host(.rtui-button--type-icon.rtui-button--size-md) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8)}:host(.rtui-button--type-icon.rtui-button--size-lg) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10)}:host(.rtui-button--type-icon.rtui-button--variant-primary) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-primary) .rtui-button__control{color:var(--rt-icon-accent-primary)}:host(.rtui-button--type-icon.rtui-button--variant-danger) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-danger) .rtui-button__control{color:var(--rt-icon-accent-danger)}:host(.rtui-button--type-icon.rtui-button--variant-success) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-success) .rtui-button__control{color:var(--rt-icon-accent-success)}:host(.rtui-button--type-icon.rtui-button--variant-warning) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-warning) .rtui-button__control{color:var(--rt-icon-accent-warning)}:host(.rtui-button--type-icon.rtui-button--variant-accent) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-accent) .rtui-button__control{color:var(--rt-icon-accent-info)}:host(.rtui-button--type-pill) .rtui-button__control{border-radius:var(--rt-radius-xl);background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:var(--rt-font-weight-medium);gap:var(--rt-spacing-6)}:host(.rtui-button--type-pill) .rtui-button__control:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}:host(.rtui-button--type-pill) .rtui-button__control:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}:host(.rtui-button--type-pill.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4) var(--rt-spacing-8);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6) var(--rt-spacing-10);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8) var(--rt-spacing-14);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10) var(--rt-spacing-16);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--radius-none) .rtui-button__control{border-radius:0}:host(.rtui-button--type-pill.rtui-button--radius-sm) .rtui-button__control{border-radius:var(--rt-radius-xs)}:host(.rtui-button--type-pill.rtui-button--radius-md) .rtui-button__control{border-radius:var(--rt-radius-sm)}:host(.rtui-button--type-pill.rtui-button--radius-lg) .rtui-button__control{border-radius:var(--rt-radius-md)}:host(.rtui-button--type-pill.rtui-button--radius-full) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control{min-height:1.875rem;padding:0 var(--rt-spacing-10);background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:var(--rt-font-size-md);font-weight:var(--rt-font-weight-regular)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"] }]
|
|
823
823
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
824
824
|
|
|
825
|
-
const BEM_BLOCK$
|
|
825
|
+
const BEM_BLOCK$v = 'rtui-clear-button';
|
|
826
826
|
class RtuiClearButtonComponent {
|
|
827
827
|
constructor() {
|
|
828
828
|
this.#breakpoints = inject(BreakpointService);
|
|
@@ -845,16 +845,16 @@ class RtuiClearButtonComponent {
|
|
|
845
845
|
onClick() {
|
|
846
846
|
this.clickAction.emit();
|
|
847
847
|
}
|
|
848
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
849
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
848
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtuiClearButtonComponent, isStandalone: true, selector: "rtui-clear-button", inputs: { isButtonShown: { classPropertyName: "isButtonShown", publicName: "isButtonShown", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keydownAction: "keydownAction", clickAction: "clickAction" }, host: { classAttribute: "rtui-clear-button" }, providers: [BreakpointService], ngImport: i0, template: "<button\n rtBlock=\"rtui-clear-button\"\n [rtMod]=\"{ invisible: !isButtonShown() }\"\n [matTooltip]=\"tooltip() ?? ''\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltipDisabled]=\"narrow()\"\n (keydown)=\"onKeydown()\"\n (click)=\"onClick()\">\n <mat-icon rtElem=\"icon\">close</mat-icon>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--rt-bg-base-strong);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--rt-text-base-secondary);--rt-clear-button-icon-hover-color: var(--rt-text-base-strong)}:host .rtui-clear-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-clear-button-host-padding);border:none;border-radius:var(--rt-radius-full);margin:var(--rt-clear-button-host-margin);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);pointer-events:none;white-space:nowrap}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color);font-size:var(--rt-clear-button-icon-size)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"], dependencies: [{ kind: "component", type:
|
|
850
850
|
// Material
|
|
851
851
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type:
|
|
852
852
|
// BEM
|
|
853
853
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
854
854
|
}
|
|
855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
855
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiClearButtonComponent, decorators: [{
|
|
856
856
|
type: Component,
|
|
857
|
-
args: [{ selector: 'rtui-clear-button', host: { class: BEM_BLOCK$
|
|
857
|
+
args: [{ selector: 'rtui-clear-button', host: { class: BEM_BLOCK$v }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
858
858
|
// Material
|
|
859
859
|
MatIcon,
|
|
860
860
|
MatIconButton,
|
|
@@ -907,16 +907,467 @@ class RtHideTooltipDirective {
|
|
|
907
907
|
#setTooltipState() {
|
|
908
908
|
this.#matTooltip.disabled = this.element()?.offsetWidth === this.element()?.scrollWidth;
|
|
909
909
|
}
|
|
910
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
911
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
910
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtHideTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
911
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtHideTooltipDirective, isStandalone: true, selector: "[rtHideTooltipDirective]", inputs: { element: { classPropertyName: "element", publicName: "rtHideTooltipDirective", isSignal: true, isRequired: true, transformFunction: null }, isTooltipShown: { classPropertyName: "isTooltipShown", publicName: "isTooltipShown", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
912
912
|
}
|
|
913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtHideTooltipDirective, decorators: [{
|
|
914
914
|
type: Directive,
|
|
915
915
|
args: [{
|
|
916
916
|
selector: '[rtHideTooltipDirective]',
|
|
917
917
|
}]
|
|
918
918
|
}], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtHideTooltipDirective", required: true }] }], isTooltipShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTooltipShown", required: true }] }] } });
|
|
919
919
|
|
|
920
|
+
/** Только строки и числа, без повторов, в прежнем порядке. */
|
|
921
|
+
function normalizeFavorites(values) {
|
|
922
|
+
return values.reduce((kept, value) => {
|
|
923
|
+
if ((typeof value === 'string' || typeof value === 'number') && !kept.includes(value)) {
|
|
924
|
+
kept.push(value);
|
|
925
|
+
}
|
|
926
|
+
return kept;
|
|
927
|
+
}, []);
|
|
928
|
+
}
|
|
929
|
+
/**
|
|
930
|
+
* Перенос записи списка с места на место.
|
|
931
|
+
*
|
|
932
|
+
* Номер места вне списка у источника ничего не меняет — переносить нечего; у цели прижимается к
|
|
933
|
+
* краю: рука, бросившая строку ниже последней, хотела поставить её последней.
|
|
934
|
+
*/
|
|
935
|
+
function moveFavorite(ids, from, to) {
|
|
936
|
+
const next = [...ids];
|
|
937
|
+
if (from < 0 || from >= next.length) {
|
|
938
|
+
return next;
|
|
939
|
+
}
|
|
940
|
+
const moved = next.splice(from, 1)[0];
|
|
941
|
+
const target = Math.min(Math.max(to, 0), next.length);
|
|
942
|
+
next.splice(target, 0, moved);
|
|
943
|
+
return next;
|
|
944
|
+
}
|
|
945
|
+
/**
|
|
946
|
+
* Перенос строки блока — места в блоке, а не в списке.
|
|
947
|
+
*
|
|
948
|
+
* Блок показывает только те номера, пункты которых в меню есть, поэтому место в блоке — не место в
|
|
949
|
+
* списке. Видимые номера переставляются между собой и встают в те же ячейки списка, которые
|
|
950
|
+
* занимали; скрытые остаются на своих местах: их пункт вернётся вместе с правом, и человек найдёт
|
|
951
|
+
* его там, куда ставил. Видимый номер, которого в списке нет, пропускается: список могла поменять
|
|
952
|
+
* другая вкладка, а место номера, которого нет, занять нечем.
|
|
953
|
+
*/
|
|
954
|
+
function moveVisibleFavorite(ids, visible, from, to) {
|
|
955
|
+
const listed = new Set(ids);
|
|
956
|
+
const reordered = moveFavorite(normalizeFavorites(visible), from, to).filter((id) => listed.has(id));
|
|
957
|
+
const slots = new Set(reordered);
|
|
958
|
+
let next = 0;
|
|
959
|
+
return ids.map((id) => {
|
|
960
|
+
if (!slots.has(id)) {
|
|
961
|
+
return id;
|
|
962
|
+
}
|
|
963
|
+
const placed = reordered[next];
|
|
964
|
+
next += 1;
|
|
965
|
+
return placed;
|
|
966
|
+
});
|
|
967
|
+
}
|
|
968
|
+
/** Может ли пункт стоять в избранном: ссылка есть — может; папка без ссылки никуда не ведёт. */
|
|
969
|
+
function isFavoriteCandidate(item) {
|
|
970
|
+
return Boolean(item.link?.trim());
|
|
971
|
+
}
|
|
972
|
+
function collectLinkedItems(items, byId) {
|
|
973
|
+
for (const item of items) {
|
|
974
|
+
if (isFavoriteCandidate(item) && !byId.has(item.id)) {
|
|
975
|
+
byId.set(item.id, item);
|
|
976
|
+
}
|
|
977
|
+
collectLinkedItems(item.submenu ?? [], byId);
|
|
978
|
+
}
|
|
979
|
+
}
|
|
980
|
+
/**
|
|
981
|
+
* Пункты меню, стоящие за номерами списка, в порядке списка.
|
|
982
|
+
*
|
|
983
|
+
* Пункт ищется в подменю пунктов полосы, вглубь папок, и берётся первый со ссылкой: избранное,
|
|
984
|
+
* которое никуда не ведёт, — сломанное избранное. Номер без пункта пропускается, но из списка не
|
|
985
|
+
* уходит — это решает сервис, а не меню.
|
|
986
|
+
*/
|
|
987
|
+
function findFavoriteItems(menu, ids) {
|
|
988
|
+
const byId = new Map();
|
|
989
|
+
collectLinkedItems(menu.flatMap((item) => item.submenu ?? []), byId);
|
|
990
|
+
return ids.reduce((found, id) => {
|
|
991
|
+
const item = byId.get(id);
|
|
992
|
+
if (item) {
|
|
993
|
+
found.push(item);
|
|
994
|
+
}
|
|
995
|
+
return found;
|
|
996
|
+
}, []);
|
|
997
|
+
}
|
|
998
|
+
/**
|
|
999
|
+
* Пункт полосы, чьё подменю сейчас показано, если избранное у него включено.
|
|
1000
|
+
*
|
|
1001
|
+
* Избранное у каждого пункта своё и по умолчанию выключено: включает его потребитель флагом
|
|
1002
|
+
* `favorites` пункта полосы. Показанный набор даёт меню — закреплённый или открытый наведением, —
|
|
1003
|
+
* и пустой набор не принадлежит никому: подменю без списка не показывает ничьё избранное.
|
|
1004
|
+
*
|
|
1005
|
+
* Раздел узнаётся сначала по самому набору, затем по номеру его первого пункта: приложение вправе
|
|
1006
|
+
* передать меню заново теми же пунктами в новых объектах — при смене языка или прав, — и набор,
|
|
1007
|
+
* который подменю ещё держит, перестаёт совпадать с пунктами полосы по ссылке. Номера пунктов
|
|
1008
|
+
* подменю единственны на всё меню — это обязанность потребителя.
|
|
1009
|
+
*/
|
|
1010
|
+
function favoritesSection(menu, shown) {
|
|
1011
|
+
const first = shown[0];
|
|
1012
|
+
if (!first) {
|
|
1013
|
+
return null;
|
|
1014
|
+
}
|
|
1015
|
+
const section = menu.find((item) => item.submenu === shown) ??
|
|
1016
|
+
menu.find((item) => !!item.submenu?.some((child) => child.id === first.id));
|
|
1017
|
+
return section?.favorites ? section : null;
|
|
1018
|
+
}
|
|
1019
|
+
/**
|
|
1020
|
+
* Строку отпустили за пределами панели. Пока её тянули, уход указателя с панели не закрывал
|
|
1021
|
+
* подменю, открытое наведением, — после броска он должен сработать так, будто случился сейчас.
|
|
1022
|
+
*/
|
|
1023
|
+
function isDroppedOutside(panel, point) {
|
|
1024
|
+
return point.x < panel.left || point.x > panel.right || point.y < panel.top || point.y > panel.bottom;
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
/**
|
|
1028
|
+
* Ключ настроек бокового меню в хранилище.
|
|
1029
|
+
*
|
|
1030
|
+
* Назван приставкой кита: хранилище браузера общее на весь адрес, и короткое имя столкнулось бы с
|
|
1031
|
+
* ключом потребителя молча. Под ключом — один объект, в нём настройки каждого меню под его номером.
|
|
1032
|
+
*/
|
|
1033
|
+
const SIDE_MENU_SETTINGS_KEY = 'rtui-side-menu';
|
|
1034
|
+
/** Номер меню, которому приложение своего не задало. */
|
|
1035
|
+
const DEFAULT_MENU_ID = 'default';
|
|
1036
|
+
/**
|
|
1037
|
+
* Номер меню, под которым лежат его настройки. Пустой — тот же, что не заданный: атрибут без значения
|
|
1038
|
+
* даёт пустую строку, и настройки легли бы под ключ, которого никто не называл.
|
|
1039
|
+
*/
|
|
1040
|
+
function normalizeMenuId(menuId) {
|
|
1041
|
+
return menuId?.trim() || DEFAULT_MENU_ID;
|
|
1042
|
+
}
|
|
1043
|
+
function isSubMenuMode(value) {
|
|
1044
|
+
return value === 'hover' || value === 'pinned';
|
|
1045
|
+
}
|
|
1046
|
+
/**
|
|
1047
|
+
* Настройки одного меню из того, что лежит под его номером.
|
|
1048
|
+
*
|
|
1049
|
+
* Недопустимое поле читается как отсутствие значения, соседние поля остаются: сломанная ширина не
|
|
1050
|
+
* стирает избранное. Незнакомые поля не удаляются — их положило приложение или следующая версия
|
|
1051
|
+
* кита. Список избранного очищается так же, как при записи: остаются строки и числа, повтор
|
|
1052
|
+
* отбрасывается, `1` и `'1'` — разные номера. Ширина приводится к пределам подменю.
|
|
1053
|
+
*/
|
|
1054
|
+
function normalizeSettings(value) {
|
|
1055
|
+
if (!isRecord(value)) {
|
|
1056
|
+
return {};
|
|
1057
|
+
}
|
|
1058
|
+
const settings = { ...value };
|
|
1059
|
+
const favorites = value['favorites'];
|
|
1060
|
+
const width = value['subMenuWidth'];
|
|
1061
|
+
if (Array.isArray(favorites)) {
|
|
1062
|
+
settings.favorites = normalizeFavorites(favorites);
|
|
1063
|
+
}
|
|
1064
|
+
else {
|
|
1065
|
+
delete settings.favorites;
|
|
1066
|
+
}
|
|
1067
|
+
if (!isSubMenuMode(value['subMenuMode'])) {
|
|
1068
|
+
delete settings.subMenuMode;
|
|
1069
|
+
}
|
|
1070
|
+
if (typeof width === 'number' && Number.isFinite(width)) {
|
|
1071
|
+
settings.subMenuWidth = clampSubMenuWidth(width);
|
|
1072
|
+
}
|
|
1073
|
+
else {
|
|
1074
|
+
delete settings.subMenuWidth;
|
|
1075
|
+
}
|
|
1076
|
+
return settings;
|
|
1077
|
+
}
|
|
1078
|
+
/**
|
|
1079
|
+
* Запись хранилища как объект. Не JSON, не объект, пустое хранилище — одинаково пустая запись.
|
|
1080
|
+
*/
|
|
1081
|
+
function parseSettingsRecord(raw) {
|
|
1082
|
+
if (raw === null) {
|
|
1083
|
+
return {};
|
|
1084
|
+
}
|
|
1085
|
+
try {
|
|
1086
|
+
const value = JSON.parse(raw);
|
|
1087
|
+
return isRecord(value) ? value : {};
|
|
1088
|
+
}
|
|
1089
|
+
catch {
|
|
1090
|
+
return {};
|
|
1091
|
+
}
|
|
1092
|
+
}
|
|
1093
|
+
/**
|
|
1094
|
+
* Настройки всех меню из записи. Меню, чьё значение не объект, пропускается, остальные читаются:
|
|
1095
|
+
* сломанный угол одного меню не стирает соседние.
|
|
1096
|
+
*/
|
|
1097
|
+
function readSettings(record) {
|
|
1098
|
+
return Object.fromEntries(Object.entries(record)
|
|
1099
|
+
.filter(([, settings]) => isRecord(settings))
|
|
1100
|
+
.map(([menuId, settings]) => [menuId, normalizeSettings(settings)]));
|
|
1101
|
+
}
|
|
1102
|
+
/** Настройки всех меню прямо из строки хранилища. */
|
|
1103
|
+
function parseSettings(raw) {
|
|
1104
|
+
return readSettings(parseSettingsRecord(raw));
|
|
1105
|
+
}
|
|
1106
|
+
/**
|
|
1107
|
+
* Запись с правкой полей одного меню.
|
|
1108
|
+
*
|
|
1109
|
+
* Остальные меню и остальные поля того же меню уходят такими, какими лежали, даже сломанные: кит
|
|
1110
|
+
* правит только то, о чём его попросили.
|
|
1111
|
+
*/
|
|
1112
|
+
function patchSettings(record, menuId, patch) {
|
|
1113
|
+
const current = record[menuId];
|
|
1114
|
+
return { ...record, [menuId]: { ...(isRecord(current) ? current : {}), ...patch } };
|
|
1115
|
+
}
|
|
1116
|
+
/** Запись без настроек одного меню. */
|
|
1117
|
+
function omitSettings(record, menuId) {
|
|
1118
|
+
return Object.fromEntries(Object.entries(record).filter(([id]) => id !== menuId));
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
const DEFAULT_LABELS = {
|
|
1122
|
+
title: 'Favourites',
|
|
1123
|
+
add: 'Add to favourites',
|
|
1124
|
+
remove: 'Remove from favourites',
|
|
1125
|
+
drag: 'Hold button to drag',
|
|
1126
|
+
};
|
|
1127
|
+
const DEFAULT_ICONS = {
|
|
1128
|
+
remove: { glyph: 'delete', rotate: 0 },
|
|
1129
|
+
drag: { glyph: 'arrows_outward', rotate: 90 },
|
|
1130
|
+
};
|
|
1131
|
+
const RTUI_SIDE_MENU_SETTINGS_CONFIG = new InjectionToken('RTUI_SIDE_MENU_SETTINGS_CONFIG');
|
|
1132
|
+
/** Один сигнал на номер меню: меню и приложение читают одно и то же, не плодя вычислений. */
|
|
1133
|
+
function cached(cache, menuId, read) {
|
|
1134
|
+
const id = normalizeMenuId(menuId);
|
|
1135
|
+
let value = cache.get(id);
|
|
1136
|
+
if (!value) {
|
|
1137
|
+
value = computed(() => read(id));
|
|
1138
|
+
cache.set(id, value);
|
|
1139
|
+
}
|
|
1140
|
+
return value;
|
|
1141
|
+
}
|
|
1142
|
+
/**
|
|
1143
|
+
* Настройки боковых меню приложения: избранное, мода подменю и его ширина.
|
|
1144
|
+
*
|
|
1145
|
+
* В хранилище под одним ключом лежит объект: у каждого меню — свои настройки под его номером.
|
|
1146
|
+
* Номер задаёт приложение входом `menuId` меню — например, номером пользователя, — меню без номера
|
|
1147
|
+
* или с пустым номером хранится под `default`. Приложение читает и пишет настройки любого меню по
|
|
1148
|
+
* его номеру.
|
|
1149
|
+
*
|
|
1150
|
+
* Запись начинается с чтения хранилища, а не копии в памяти: другая вкладка или другой код могли
|
|
1151
|
+
* записать своё после того, как сервис прочитал ключ, и запись из копии затёрла бы их. Правится одно
|
|
1152
|
+
* поле одного меню, остальное уходит как лежало. Изменения из других вкладок приходят событием
|
|
1153
|
+
* `storage` и обновляют сигналы. Кит сам ничего не удаляет: настройки меню уходят только по вызову
|
|
1154
|
+
* приложения.
|
|
1155
|
+
*
|
|
1156
|
+
* Держатель один: меню и приложение читают и пишут через этот же сервис. Поэтому сервис ставится
|
|
1157
|
+
* провайдером окружения — `provideRtuiSideMenuSettings()`, — а меню берёт его необязательно: не
|
|
1158
|
+
* поставлен — меню ничего не хранит, звёзд нет, мода и ширина приходят входами.
|
|
1159
|
+
*
|
|
1160
|
+
* Хранилище берётся токеном `@rt-tools/core`. Без него, вне браузера, закрытое или полное —
|
|
1161
|
+
* настройки живут в памяти, и ни чтение, ни запись не бросают.
|
|
1162
|
+
*/
|
|
1163
|
+
class RtuiSideMenuSettingsService {
|
|
1164
|
+
#config;
|
|
1165
|
+
#storage;
|
|
1166
|
+
#key;
|
|
1167
|
+
#menus;
|
|
1168
|
+
#favorites;
|
|
1169
|
+
#modes;
|
|
1170
|
+
#widths;
|
|
1171
|
+
/** Последняя известная запись: ею сервис живёт, пока хранилище недоступно. */
|
|
1172
|
+
#record;
|
|
1173
|
+
/** Последняя запись в хранилище не удалась — оно полно, и правда лежит в памяти. */
|
|
1174
|
+
#unsaved;
|
|
1175
|
+
#settings;
|
|
1176
|
+
constructor() {
|
|
1177
|
+
this.#config = inject(RTUI_SIDE_MENU_SETTINGS_CONFIG, { optional: true }) ?? {};
|
|
1178
|
+
this.#storage = inject(LOCAL_STORAGE, { optional: true }) ?? null;
|
|
1179
|
+
this.#key = this.#config.storageKey?.trim() || SIDE_MENU_SETTINGS_KEY;
|
|
1180
|
+
this.#menus = new Map();
|
|
1181
|
+
this.#favorites = new Map();
|
|
1182
|
+
this.#modes = new Map();
|
|
1183
|
+
this.#widths = new Map();
|
|
1184
|
+
/** Последняя известная запись: ею сервис живёт, пока хранилище недоступно. */
|
|
1185
|
+
this.#record = this.#load() ?? {};
|
|
1186
|
+
/** Последняя запись в хранилище не удалась — оно полно, и правда лежит в памяти. */
|
|
1187
|
+
this.#unsaved = false;
|
|
1188
|
+
this.#settings = signal(readSettings(this.#record), /* @ts-ignore */
|
|
1189
|
+
...(ngDevMode ? [{ debugName: "#settings" }] : /* istanbul ignore next */ []));
|
|
1190
|
+
/** Номера меню, чьи настройки лежат в хранилище. */
|
|
1191
|
+
this.menuIds = computed(() => Object.keys(this.#settings()), /* @ts-ignore */
|
|
1192
|
+
...(ngDevMode ? [{ debugName: "menuIds" }] : /* istanbul ignore next */ []));
|
|
1193
|
+
this.labels = { ...DEFAULT_LABELS, ...this.#definedLabels() };
|
|
1194
|
+
/** Заданный приложением значок заменяет свой целиком, незаданный остаётся по умолчанию. */
|
|
1195
|
+
this.icons = {
|
|
1196
|
+
remove: this.#icon(this.#config.icons?.remove, DEFAULT_ICONS.remove),
|
|
1197
|
+
drag: this.#icon(this.#config.icons?.drag, DEFAULT_ICONS.drag),
|
|
1198
|
+
};
|
|
1199
|
+
if (!inject(PlatformService).isPlatformBrowser) {
|
|
1200
|
+
return;
|
|
1201
|
+
}
|
|
1202
|
+
const view = inject(WINDOW);
|
|
1203
|
+
const onStorage = (event) => {
|
|
1204
|
+
if (event.key === this.#key || event.key === null) {
|
|
1205
|
+
this.#unsaved = false;
|
|
1206
|
+
this.#apply(this.#fresh());
|
|
1207
|
+
}
|
|
1208
|
+
};
|
|
1209
|
+
view.addEventListener('storage', onStorage);
|
|
1210
|
+
inject(DestroyRef).onDestroy(() => view.removeEventListener('storage', onStorage));
|
|
1211
|
+
}
|
|
1212
|
+
/** Настройки одного меню целиком, с незнакомыми полями; не сохранены — пустой объект. */
|
|
1213
|
+
settings(menuId) {
|
|
1214
|
+
return cached(this.#menus, menuId, (id) => this.#settings()[id] ?? {});
|
|
1215
|
+
}
|
|
1216
|
+
/** Список избранного одного меню. Сигнал на номер один: повторный вызов отдаёт тот же. */
|
|
1217
|
+
ids(menuId) {
|
|
1218
|
+
return cached(this.#favorites, menuId, (id) => this.#settings()[id]?.favorites ?? []);
|
|
1219
|
+
}
|
|
1220
|
+
/** Мода подменю, которую выбрал человек; ничего не выбрано — открытие наведением. */
|
|
1221
|
+
subMenuMode(menuId) {
|
|
1222
|
+
return cached(this.#modes, menuId, (id) => this.#settings()[id]?.subMenuMode ?? 'hover');
|
|
1223
|
+
}
|
|
1224
|
+
/** Ширина закреплённого подменю; ничего не выбрано — пусто, и ширину ставит оформление. */
|
|
1225
|
+
subMenuWidth(menuId) {
|
|
1226
|
+
return cached(this.#widths, menuId, (id) => this.#settings()[id]?.subMenuWidth ?? null);
|
|
1227
|
+
}
|
|
1228
|
+
setSubMenuMode(menuId, mode) {
|
|
1229
|
+
this.#update(menuId, () => ({ subMenuMode: mode }));
|
|
1230
|
+
}
|
|
1231
|
+
/** Пишется приведённая к пределам: за них уводит и рука, и чужая правка записи. */
|
|
1232
|
+
setSubMenuWidth(menuId, width) {
|
|
1233
|
+
this.#update(menuId, () => ({ subMenuWidth: clampSubMenuWidth(width) }));
|
|
1234
|
+
}
|
|
1235
|
+
has(menuId, id) {
|
|
1236
|
+
return this.ids(menuId)().includes(id);
|
|
1237
|
+
}
|
|
1238
|
+
/** Номер, уже стоящий в списке, остаётся на своём месте. */
|
|
1239
|
+
add(menuId, id) {
|
|
1240
|
+
this.#updateFavorites(menuId, (ids) => (ids.includes(id) ? ids : [...ids, id]));
|
|
1241
|
+
}
|
|
1242
|
+
remove(menuId, id) {
|
|
1243
|
+
this.#updateFavorites(menuId, (ids) => ids.filter((kept) => kept !== id));
|
|
1244
|
+
}
|
|
1245
|
+
/** Решает по записи хранилища, а не по копии: другая вкладка могла уже поменять список. */
|
|
1246
|
+
toggle(menuId, id) {
|
|
1247
|
+
this.#updateFavorites(menuId, (ids) => ids.includes(id) ? ids.filter((kept) => kept !== id) : [...ids, id]);
|
|
1248
|
+
}
|
|
1249
|
+
/** Перенос по местам списка, не блока: место вне списка у источника ничего не меняет. */
|
|
1250
|
+
move(menuId, from, to) {
|
|
1251
|
+
this.#updateFavorites(menuId, (ids) => moveFavorite(ids, from, to));
|
|
1252
|
+
}
|
|
1253
|
+
/**
|
|
1254
|
+
* Перенос по местам видимых номеров, как в блоке меню: видимые меняются местами между собой,
|
|
1255
|
+
* скрытые — пункт которых меню сейчас не показывает — остаются на своих.
|
|
1256
|
+
*/
|
|
1257
|
+
moveVisible(menuId, visibleIds, from, to) {
|
|
1258
|
+
this.#updateFavorites(menuId, (ids) => moveVisibleFavorite(ids, visibleIds, from, to));
|
|
1259
|
+
}
|
|
1260
|
+
/** Замена списка целиком — чужие значения и повторы отбрасываются так же, как при чтении. */
|
|
1261
|
+
set(menuId, ids) {
|
|
1262
|
+
this.#updateFavorites(menuId, () => normalizeFavorites(ids));
|
|
1263
|
+
}
|
|
1264
|
+
clear(menuId) {
|
|
1265
|
+
this.#updateFavorites(menuId, () => []);
|
|
1266
|
+
}
|
|
1267
|
+
/** Удаление всех настроек одного меню. Сам кит его не вызывает: удаляет только приложение. */
|
|
1268
|
+
deleteSettings(menuId) {
|
|
1269
|
+
this.#commit(omitSettings(this.#fresh(), normalizeMenuId(menuId)));
|
|
1270
|
+
}
|
|
1271
|
+
#updateFavorites(menuId, next) {
|
|
1272
|
+
this.#update(menuId, (current) => ({ favorites: next(current.favorites ?? []) }));
|
|
1273
|
+
}
|
|
1274
|
+
/** Прочитать хранилище → поправить поля одного меню → записать. */
|
|
1275
|
+
#update(menuId, patch) {
|
|
1276
|
+
const record = this.#fresh();
|
|
1277
|
+
const id = normalizeMenuId(menuId);
|
|
1278
|
+
this.#commit(patchSettings(record, id, patch(normalizeSettings(record[id]))));
|
|
1279
|
+
}
|
|
1280
|
+
#commit(record) {
|
|
1281
|
+
this.#apply(record);
|
|
1282
|
+
try {
|
|
1283
|
+
this.#storage?.setItem(this.#key, JSON.stringify(record));
|
|
1284
|
+
this.#unsaved = false;
|
|
1285
|
+
}
|
|
1286
|
+
catch {
|
|
1287
|
+
// хранилище закрыто или полно — настройки живут в памяти до перезагрузки
|
|
1288
|
+
this.#unsaved = true;
|
|
1289
|
+
}
|
|
1290
|
+
}
|
|
1291
|
+
#apply(record) {
|
|
1292
|
+
this.#record = record;
|
|
1293
|
+
this.#settings.set(readSettings(record));
|
|
1294
|
+
}
|
|
1295
|
+
/** Запись из хранилища, а если оно недоступно или не приняло прошлую запись — последняя известная. */
|
|
1296
|
+
#fresh() {
|
|
1297
|
+
return this.#unsaved ? this.#record : (this.#load() ?? this.#record);
|
|
1298
|
+
}
|
|
1299
|
+
/** Пусто — хранилища нет или оно не отвечает. Сломанная запись читается пустой, но читается. */
|
|
1300
|
+
#load() {
|
|
1301
|
+
if (!this.#storage) {
|
|
1302
|
+
return null;
|
|
1303
|
+
}
|
|
1304
|
+
try {
|
|
1305
|
+
return parseSettingsRecord(this.#storage.getItem(this.#key));
|
|
1306
|
+
}
|
|
1307
|
+
catch {
|
|
1308
|
+
return null;
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1311
|
+
/** Пустая подпись равна отсутствию: иначе звезда осталась бы без имени. */
|
|
1312
|
+
#definedLabels() {
|
|
1313
|
+
return Object.fromEntries(Object.entries(this.#config.labels ?? {}).filter(([, value]) => Boolean(value?.trim())));
|
|
1314
|
+
}
|
|
1315
|
+
/** Пустой глиф равен отсутствию, как пустая подпись: иначе кнопка осталась бы без значка. */
|
|
1316
|
+
#icon(icon, fallback) {
|
|
1317
|
+
const glyph = icon?.glyph?.trim() ?? '';
|
|
1318
|
+
if (!glyph) {
|
|
1319
|
+
return fallback;
|
|
1320
|
+
}
|
|
1321
|
+
const rotate = icon?.rotate;
|
|
1322
|
+
return { glyph, rotate: rotate !== undefined && Number.isFinite(rotate) ? rotate : 0 };
|
|
1323
|
+
}
|
|
1324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1325
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuSettingsService }); }
|
|
1326
|
+
}
|
|
1327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuSettingsService, decorators: [{
|
|
1328
|
+
type: Injectable
|
|
1329
|
+
}], ctorParameters: () => [] });
|
|
1330
|
+
/**
|
|
1331
|
+
* Включение настроек меню: сервис и его настройки в инжектор окружения приложения.
|
|
1332
|
+
*
|
|
1333
|
+
* ```ts
|
|
1334
|
+
* bootstrapApplication(App, { providers: [provideRtStorage(), provideRtuiSideMenuSettings({ storageKey: 'my-app-side-menu' })] });
|
|
1335
|
+
* ```
|
|
1336
|
+
*/
|
|
1337
|
+
function provideRtuiSideMenuSettings(config = {}) {
|
|
1338
|
+
return makeEnvironmentProviders([{ provide: RTUI_SIDE_MENU_SETTINGS_CONFIG, useValue: config }, RtuiSideMenuSettingsService]);
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
/**
|
|
1342
|
+
* Подменю держится открытым, пока человек работает внутри него не указателем: фокус на звезде,
|
|
1343
|
+
* строка избранного в руке.
|
|
1344
|
+
*
|
|
1345
|
+
* Отдельно от удержания полем поиска: то ещё и расширяет панель под набор запроса, а звезда и
|
|
1346
|
+
* перетаскивание ширины не просят — панель прыгала бы под рукой. Снимается вместе с закрытием
|
|
1347
|
+
* подменю, как и удержание полем: уход фокуса со звезды — переход к пунктам того же подменю.
|
|
1348
|
+
*
|
|
1349
|
+
* Ставится меню в свои провайдеры: у каждого меню своё подменю и своё удержание.
|
|
1350
|
+
*/
|
|
1351
|
+
class RtuiSubMenuHoldService {
|
|
1352
|
+
constructor() {
|
|
1353
|
+
this.#held = signal(false, /* @ts-ignore */
|
|
1354
|
+
...(ngDevMode ? [{ debugName: "#held" }] : /* istanbul ignore next */ []));
|
|
1355
|
+
this.held = this.#held.asReadonly();
|
|
1356
|
+
}
|
|
1357
|
+
#held;
|
|
1358
|
+
hold() {
|
|
1359
|
+
this.#held.set(true);
|
|
1360
|
+
}
|
|
1361
|
+
release() {
|
|
1362
|
+
this.#held.set(false);
|
|
1363
|
+
}
|
|
1364
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSubMenuHoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1365
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSubMenuHoldService }); }
|
|
1366
|
+
}
|
|
1367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSubMenuHoldService, decorators: [{
|
|
1368
|
+
type: Injectable
|
|
1369
|
+
}] });
|
|
1370
|
+
|
|
920
1371
|
/**
|
|
921
1372
|
* Резка подписи подпункта на совпавшие с запросом куски.
|
|
922
1373
|
*
|
|
@@ -927,23 +1378,44 @@ class RtuiSubMenuTitlePartsPipe {
|
|
|
927
1378
|
transform(name, query) {
|
|
928
1379
|
return splitSubMenuTitle(name, query);
|
|
929
1380
|
}
|
|
930
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
931
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
1381
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSubMenuTitlePartsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1382
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: RtuiSubMenuTitlePartsPipe, isStandalone: true, name: "rtuiSubMenuTitleParts" }); }
|
|
932
1383
|
}
|
|
933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSubMenuTitlePartsPipe, decorators: [{
|
|
934
1385
|
type: Pipe,
|
|
935
1386
|
args: [{
|
|
936
1387
|
name: 'rtuiSubMenuTitleParts',
|
|
937
1388
|
}]
|
|
938
1389
|
}] });
|
|
939
1390
|
|
|
940
|
-
const BEM_BLOCK$
|
|
1391
|
+
const BEM_BLOCK$u = 'rtui-side-menu-sub-item';
|
|
1392
|
+
/** Строка блока избранного и кнопка избранного в ней — по ним фокус уходит на соседа после «убрать». */
|
|
1393
|
+
const FAVORITE_ROW = '.rtui-side-menu-favorites__row';
|
|
1394
|
+
const FAVORITE_BUTTON = '.rtui-side-menu-sub-item-title__favorite';
|
|
1395
|
+
/** Фокус пришёл с клавиатуры. Движок без `:focus-visible` отвечает «нет»: удержание — не обязанность. */
|
|
1396
|
+
function isKeyboardFocus(target) {
|
|
1397
|
+
try {
|
|
1398
|
+
return target instanceof Element && target.matches(':focus-visible');
|
|
1399
|
+
}
|
|
1400
|
+
catch {
|
|
1401
|
+
return false;
|
|
1402
|
+
}
|
|
1403
|
+
}
|
|
941
1404
|
class RtuiSideMenuSubItemComponent {
|
|
942
1405
|
constructor() {
|
|
943
1406
|
this.#breakpoints = inject(BreakpointService);
|
|
1407
|
+
/** Избранное включено провайдером приложения; не поставлено — звёзд нет. */
|
|
1408
|
+
this.favorites = inject(RtuiSideMenuSettingsService, { optional: true });
|
|
1409
|
+
this.hold = inject(RtuiSubMenuHoldService, { optional: true });
|
|
944
1410
|
/** Экран узкий: замер кита, и другого источника у этого признака нет. */
|
|
945
1411
|
this.narrow = computed(() => !!this.#breakpoints.isMobile(), /* @ts-ignore */
|
|
946
1412
|
...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
|
|
1413
|
+
/** Раздел открытого подменю включил избранное: только тогда у пунктов есть звёзды. */
|
|
1414
|
+
this.favoritesOn = computed(() => !!this.favorites && favoritesSection(this.menuRef.menuItems(), this.menuRef.shownSubMenu()) !== null, /* @ts-ignore */
|
|
1415
|
+
...(ngDevMode ? [{ debugName: "favoritesOn" }] : /* istanbul ignore next */ []));
|
|
1416
|
+
/** Список избранного своего меню — по номеру, который меню получило от приложения. */
|
|
1417
|
+
this.favoriteIds = computed(() => this.favorites?.ids(this.menuRef.menuId())() ?? [], /* @ts-ignore */
|
|
1418
|
+
...(ngDevMode ? [{ debugName: "favoriteIds" }] : /* istanbul ignore next */ []));
|
|
947
1419
|
this.menuRef = inject(RTUI_SIDE_MENU);
|
|
948
1420
|
this.item = input.required(/* @ts-ignore */
|
|
949
1421
|
...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
@@ -951,6 +1423,12 @@ class RtuiSideMenuSubItemComponent {
|
|
|
951
1423
|
this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
952
1424
|
this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
953
1425
|
this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1426
|
+
/**
|
|
1427
|
+
* Строка стоит в блоке избранного. У неё нет номера пункта на странице и кольца клавиатуры:
|
|
1428
|
+
* доводка активного пункта в видимую часть и подсветка стрелками целятся в строку списка, а
|
|
1429
|
+
* второй узел с тем же номером перехватил бы их.
|
|
1430
|
+
*/
|
|
1431
|
+
this.inFavorites = input(false, { ...(ngDevMode ? { debugName: "inFavorites" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
954
1432
|
this.clickSubMenuAction = output();
|
|
955
1433
|
this.clickSubMenuAdditionalAction = output();
|
|
956
1434
|
}
|
|
@@ -958,11 +1436,38 @@ class RtuiSideMenuSubItemComponent {
|
|
|
958
1436
|
onClickSubMenu(item, event) {
|
|
959
1437
|
this.clickSubMenuAction.emit({ item, event });
|
|
960
1438
|
}
|
|
1439
|
+
/**
|
|
1440
|
+
* Фокус клавиатуры на кнопке избранного держит подменю, открытое наведением: человек идёт по
|
|
1441
|
+
* нему клавишами, и уход указателя за панель его не закрывает. Фокус от нажатия мышью не держит —
|
|
1442
|
+
* иначе после одного нажатия подменю перестало бы закрываться уходом указателя.
|
|
1443
|
+
*/
|
|
1444
|
+
onFavoriteFocus(event) {
|
|
1445
|
+
if (isKeyboardFocus(event.target)) {
|
|
1446
|
+
this.hold?.hold();
|
|
1447
|
+
}
|
|
1448
|
+
}
|
|
1449
|
+
/** Звезда переключает избранное и больше ничего: ни перехода, ни закрытия подменю. */
|
|
1450
|
+
onToggleFavorite(item, event) {
|
|
1451
|
+
event.stopPropagation();
|
|
1452
|
+
this.favorites?.toggle(this.menuRef.menuId(), item.id);
|
|
1453
|
+
}
|
|
1454
|
+
/**
|
|
1455
|
+
* Кнопка строки избранного убирает пункт из списка, не открывая его. Фокус уходит на такую же
|
|
1456
|
+
* кнопку соседней строки до того, как строка исчезнет: иначе он падал бы на страницу, и человек
|
|
1457
|
+
* с клавиатуры терял бы место. Соседняя строка переживает удаление — строки ведутся по номеру.
|
|
1458
|
+
*/
|
|
1459
|
+
onRemoveFavorite(item, event) {
|
|
1460
|
+
event.stopPropagation();
|
|
1461
|
+
const row = event.currentTarget instanceof Element ? event.currentTarget.closest(FAVORITE_ROW) : null;
|
|
1462
|
+
const neighbour = row?.nextElementSibling ?? row?.previousElementSibling;
|
|
1463
|
+
neighbour?.querySelector(FAVORITE_BUTTON)?.focus();
|
|
1464
|
+
this.favorites?.remove(this.menuRef.menuId(), item.id);
|
|
1465
|
+
}
|
|
961
1466
|
onClickSubMenuAdditional(data, event) {
|
|
962
1467
|
this.clickSubMenuAdditionalAction.emit({ data, event });
|
|
963
1468
|
}
|
|
964
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
965
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1469
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1470
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiSideMenuSubItemComponent, isStandalone: true, selector: "rtui-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null }, inFavorites: { classPropertyName: "inFavorites", publicName: "inFavorites", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rtui-side-menu-sub-item" }, providers: [
|
|
966
1471
|
BreakpointService,
|
|
967
1472
|
{
|
|
968
1473
|
provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
|
|
@@ -970,15 +1475,15 @@ class RtuiSideMenuSubItemComponent {
|
|
|
970
1475
|
disableTooltipInteractivity: true,
|
|
971
1476
|
},
|
|
972
1477
|
},
|
|
973
|
-
], ngImport: i0, template: "@if (item()) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n @if (item?.link) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled(), highlighted: menuRef.highlightedMenuId() === item.id }\"\n [id]=\"item.id\"\n [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n (click)=\"onClickSubMenu(item, $event)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-side-menu-sub-item-title\">\n <div\n #titleTpl\n rtElem=\"text\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n <!--\n \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n -->\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <!--\n \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n -->\n <span>{{ part.text }}</span>\n }\n }\n </div>\n\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n <mat-icon\n rtElem=\"icon\"\n [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n {{ item.iconButton.icon }}\n </mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n } @else if (item?.submenu) {\n <!--\n \u041F\u0430\u043F\u043A\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430\n \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C \u043D\u0438\u043A\u043E\u0433\u043E \u2014 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0438\u0441\u043A\u0430\u043B \u0435\u0451 \u043F\u043E \u0438\u043C\u0435\u043D\u0438 \u0438 \u0434\u043E\u043B\u0436\u0435\u043D \u0435\u0451 \u043D\u0430\u0439\u0442\u0438. \u0428\u0435\u0432\u0440\u043E\u043D \u0443 \u0442\u0430\u043A\u043E\u0439\n \u043F\u0430\u043F\u043A\u0438 \u0443\u0431\u0440\u0430\u043D: \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E, \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0430 \u043E\u0431\u0435\u0449\u0430\u043B\u0430 \u0431\u044B \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435.\n -->\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [hideToggle]=\"!item.submenu.length\"\n [expanded]=\"menuRef.expandedMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{\n activated: menuRef.activeMenuIds().includes(item.id),\n highlighted: menuRef.highlightedMenuId() === item.id,\n }\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div\n #headerTitleTpl\n matListItemTitle\n rtElem=\"title\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <span>{{ part.text }}</span>\n }\n }\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded && item?.submenu?.length) {\n <mat-nav-list>\n @for (item of item?.submenu; track i; let i = $index) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n }\n </mat-nav-list>\n }\n </mat-expansion-panel>\n }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type:
|
|
1478
|
+
], ngImport: i0, template: "@if (item()) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n @if (item?.link) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled(), highlighted: !inFavorites() && menuRef.highlightedMenuId() === item.id }\"\n [id]=\"inFavorites() ? null : item.id\"\n [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n (click)=\"onClickSubMenu(item, $event)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-side-menu-sub-item-title\" [rtMod]=\"{ favorites: favoritesOn() || inFavorites() }\">\n <div\n #titleTpl\n rtElem=\"text\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n <!--\n \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n -->\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <!--\n \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n -->\n <span>{{ part.text }}</span>\n }\n }\n </div>\n\n <!--\n \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043D\u0435\u0441\u0451\u0442 \u043A\u043D\u043E\u043F\u043A\u0443 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435\n \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C, \u0438 \u0437\u0432\u0435\u0437\u0434\u0430 \u0442\u0430\u043C \u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u0440\u0430\u0437\u043B\u0438\u0447\u0430\u043B\u0430 \u0431\u044B.\n -->\n @if (inFavorites() && favorites) {\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"favorite\"\n qa-dataid=\"side-menu-favorite-remove\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{ always: narrow(), remove: true }\"\n [matTooltip]=\"favorites.labels.remove\"\n [matTooltipDisabled]=\"narrow()\"\n [attr.aria-label]=\"favorites.labels.remove\"\n (click)=\"onRemoveFavorite(item, $event)\"\n (focusin)=\"onFavoriteFocus($event)\">\n <mat-icon rtElem=\"favorite-icon\" [rtIconOutlined]=\"true\" [style.rotate.deg]=\"favorites.icons.remove.rotate\">\n {{ favorites.icons.remove.glyph }}\n </mat-icon>\n </button>\n } @else if (favoritesOn() && favorites && item.link?.trim()) {\n <!--\n \u0417\u0432\u0435\u0437\u0434\u0430 \u2014 \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435, \u0433\u0434\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0432\u043A\u043B\u044E\u0447\u0438\u043B\u043E\n \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435. \u041F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C, \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C.\n \u0417\u0430\u043B\u0438\u0432\u043A\u0443 \u0434\u0430\u044E\u0442 \u0438 \u0433\u043B\u0438\u0444, \u0438 \u043E\u0441\u044C \u0437\u0430\u043B\u0438\u0432\u043A\u0438: \u0441\u0442\u0430\u0442\u0438\u0447\u043D\u044B\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u043E\u0441\u0438 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442,\n \u0430 \u0443 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E `star` \u0431\u0435\u0437 \u043E\u0441\u0438 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043F\u043E\u043B\u044B\u043C.\n\n \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435, \u0438 `aria-pressed` \u0443 \u043D\u0435\u0451 \u043D\u0435\u0442:\n \u043D\u0430\u0436\u0430\u0442\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0430 \u0441 \u0438\u043C\u0435\u043D\u0435\u043C \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB \u0447\u0438\u0442\u0430\u043B\u0430\u0441\u044C \u0431\u044B \u0432\u0434\u0432\u043E\u0435.\n -->\n @let isFavorite = favoriteIds().includes(item.id);\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"favorite\"\n qa-dataid=\"side-menu-favorite-star\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{ on: isFavorite, always: narrow() }\"\n [matTooltip]=\"isFavorite ? favorites.labels.remove : favorites.labels.add\"\n [matTooltipDisabled]=\"narrow()\"\n [attr.aria-label]=\"isFavorite ? favorites.labels.remove : favorites.labels.add\"\n (click)=\"onToggleFavorite(item, $event)\"\n (focusin)=\"onFavoriteFocus($event)\">\n <mat-icon rtElem=\"favorite-icon\" [rtIconOutlined]=\"!isFavorite\">\n {{ isFavorite ? 'star' : 'star_border' }}\n </mat-icon>\n </button>\n }\n\n <!--\n \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443\n \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F. \u0421\u043B\u043E\u0442 \u043E\u0434\u0438\u043D \u043D\u0430 \u0448\u0430\u0431\u043B\u043E\u043D \u2014 \u043F\u043E\u0434\u043F\u0443\u043D\u043A\u0442 \u0441\u043E \u0441\u0441\u044B\u043B\u043A\u043E\u0439 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043E\u0434\u0438\u043D \u0440\u0430\u0437.\n -->\n <ng-content select=\"[rtuiSideMenuSubItemAction]\" />\n\n <!--\n \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u043F\u043E\u0442\u043E\u043C\u0443 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439, \u0443 \u043F\u0440\u0430\u0432\u043E\u0433\u043E \u043A\u0440\u0430\u044F:\n \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E, \u043F\u043E\u044F\u0432\u043B\u044F\u044E\u0449\u0438\u0435\u0441\u044F \u043F\u043E\u0434 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C, \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439 \u0438 \u043D\u0435\n \u0441\u0434\u0432\u0438\u0433\u0430\u044E\u0442 \u0435\u0451.\n -->\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n <mat-icon\n rtElem=\"icon\"\n [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n {{ item.iconButton.icon }}\n </mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n } @else if (item?.submenu) {\n <!--\n \u041F\u0430\u043F\u043A\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430\n \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C \u043D\u0438\u043A\u043E\u0433\u043E \u2014 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0438\u0441\u043A\u0430\u043B \u0435\u0451 \u043F\u043E \u0438\u043C\u0435\u043D\u0438 \u0438 \u0434\u043E\u043B\u0436\u0435\u043D \u0435\u0451 \u043D\u0430\u0439\u0442\u0438. \u0428\u0435\u0432\u0440\u043E\u043D \u0443 \u0442\u0430\u043A\u043E\u0439\n \u043F\u0430\u043F\u043A\u0438 \u0443\u0431\u0440\u0430\u043D: \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E, \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0430 \u043E\u0431\u0435\u0449\u0430\u043B\u0430 \u0431\u044B \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435.\n -->\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [hideToggle]=\"!item.submenu.length\"\n [expanded]=\"menuRef.expandedMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{\n activated: menuRef.activeMenuIds().includes(item.id),\n highlighted: menuRef.highlightedMenuId() === item.id,\n favorites: favoritesOn(),\n }\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div\n #headerTitleTpl\n matListItemTitle\n rtElem=\"title\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <span>{{ part.text }}</span>\n }\n }\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded && item?.submenu?.length) {\n <mat-nav-list>\n @for (item of item?.submenu; track i; let i = $index) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n }\n </mat-nav-list>\n }\n </mat-expansion-panel>\n }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title--favorites .rtui-side-menu-sub-item-title-button{--rt-side-menu-sub-item-favorite-column: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));margin-right:calc((var(--rt-side-menu-sub-item-favorite-column) - var(--rt-spacing-24) - var(--rt-spacing-2)) / 2)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite{--mat-icon-button-state-layer-size: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));--mat-icon-button-icon-size: var(--rt-side-menu-favorite-action-icon-size, var(--rt-font-size-lg));--mat-icon-button-icon-color: var(--rt-side-menu-favorite-action-color, var(--rt-text-base-secondary));flex:0 0 auto;margin-left:var(--rt-spacing-4);opacity:0}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--on,:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--always{opacity:1}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--on{--mat-icon-button-icon-color: var( --rt-side-menu-favorite-color, var(--mat-sys-primary, var(--mat-button-filled-container-color, var(--rt-icon-accent-primary))) )}@media(hover:hover){:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--remove:hover{--mat-icon-button-icon-color: var(--rt-side-menu-favorite-remove-hover-color, var(--rt-icon-accent-danger))}}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--remove:focus-visible{--mat-icon-button-icon-color: var(--rt-side-menu-favorite-remove-hover-color, var(--rt-icon-accent-danger))}@media(hover:none){:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite{opacity:1}}@media(pointer:fine){:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite{--mat-icon-button-touch-target-display: none}}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite-icon{width:var(--mat-icon-button-icon-size);height:var(--mat-icon-button-icon-size);font-size:var(--mat-icon-button-icon-size);line-height:1}:host .rtui-side-menu-sub-item:hover .rtui-side-menu-sub-item-title__favorite,:host .rtui-side-menu-sub-item:has(:focus-visible) .rtui-side-menu-sub-item-title__favorite{opacity:1}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--favorites ::ng-deep .mat-expansion-indicator{margin-right:calc(var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2)) / 2 - var(--rt-spacing-12))}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type:
|
|
974
1479
|
// directives
|
|
975
1480
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }, { kind: "pipe", type:
|
|
976
1481
|
// pipes
|
|
977
1482
|
RtuiSubMenuTitlePartsPipe, name: "rtuiSubMenuTitleParts" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
978
1483
|
}
|
|
979
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuSubItemComponent, decorators: [{
|
|
980
1485
|
type: Component,
|
|
981
|
-
args: [{ selector: 'rtui-side-menu-sub-item', host: { class: BEM_BLOCK$
|
|
1486
|
+
args: [{ selector: 'rtui-side-menu-sub-item', host: { class: BEM_BLOCK$u }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
982
1487
|
NgTemplateOutlet,
|
|
983
1488
|
MatIcon,
|
|
984
1489
|
MatListItem,
|
|
@@ -987,6 +1492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
987
1492
|
MatListItemTitle,
|
|
988
1493
|
MatExpansionModule,
|
|
989
1494
|
MatTooltip,
|
|
1495
|
+
MatIconButton,
|
|
990
1496
|
// directives
|
|
991
1497
|
BlockDirective,
|
|
992
1498
|
ElemDirective,
|
|
@@ -1003,8 +1509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1003
1509
|
disableTooltipInteractivity: true,
|
|
1004
1510
|
},
|
|
1005
1511
|
},
|
|
1006
|
-
], template: "@if (item()) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n @if (item?.link) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled(), highlighted: menuRef.highlightedMenuId() === item.id }\"\n [id]=\"item.id\"\n [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n (click)=\"onClickSubMenu(item, $event)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-side-menu-sub-item-title\">\n <div\n #titleTpl\n rtElem=\"text\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n <!--\n \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n -->\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <!--\n \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n -->\n <span>{{ part.text }}</span>\n }\n }\n </div>\n\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n <mat-icon\n rtElem=\"icon\"\n [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n {{ item.iconButton.icon }}\n </mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n } @else if (item?.submenu) {\n <!--\n \u041F\u0430\u043F\u043A\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430\n \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C \u043D\u0438\u043A\u043E\u0433\u043E \u2014 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0438\u0441\u043A\u0430\u043B \u0435\u0451 \u043F\u043E \u0438\u043C\u0435\u043D\u0438 \u0438 \u0434\u043E\u043B\u0436\u0435\u043D \u0435\u0451 \u043D\u0430\u0439\u0442\u0438. \u0428\u0435\u0432\u0440\u043E\u043D \u0443 \u0442\u0430\u043A\u043E\u0439\n \u043F\u0430\u043F\u043A\u0438 \u0443\u0431\u0440\u0430\u043D: \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E, \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0430 \u043E\u0431\u0435\u0449\u0430\u043B\u0430 \u0431\u044B \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435.\n -->\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [hideToggle]=\"!item.submenu.length\"\n [expanded]=\"menuRef.expandedMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{\n activated: menuRef.activeMenuIds().includes(item.id),\n highlighted: menuRef.highlightedMenuId() === item.id,\n }\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div\n #headerTitleTpl\n matListItemTitle\n rtElem=\"title\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <span>{{ part.text }}</span>\n }\n }\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded && item?.submenu?.length) {\n <mat-nav-list>\n @for (item of item?.submenu; track i; let i = $index) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n }\n </mat-nav-list>\n }\n </mat-expansion-panel>\n }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"] }]
|
|
1007
|
-
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isSubMenuXScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuXScrollEnabled", required: false }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
|
|
1512
|
+
], template: "@if (item()) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n @if (item?.link) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled(), highlighted: !inFavorites() && menuRef.highlightedMenuId() === item.id }\"\n [id]=\"inFavorites() ? null : item.id\"\n [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n (click)=\"onClickSubMenu(item, $event)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-side-menu-sub-item-title\" [rtMod]=\"{ favorites: favoritesOn() || inFavorites() }\">\n <div\n #titleTpl\n rtElem=\"text\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n <!--\n \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n -->\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <!--\n \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n -->\n <span>{{ part.text }}</span>\n }\n }\n </div>\n\n <!--\n \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043D\u0435\u0441\u0451\u0442 \u043A\u043D\u043E\u043F\u043A\u0443 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435\n \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C, \u0438 \u0437\u0432\u0435\u0437\u0434\u0430 \u0442\u0430\u043C \u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u0440\u0430\u0437\u043B\u0438\u0447\u0430\u043B\u0430 \u0431\u044B.\n -->\n @if (inFavorites() && favorites) {\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"favorite\"\n qa-dataid=\"side-menu-favorite-remove\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{ always: narrow(), remove: true }\"\n [matTooltip]=\"favorites.labels.remove\"\n [matTooltipDisabled]=\"narrow()\"\n [attr.aria-label]=\"favorites.labels.remove\"\n (click)=\"onRemoveFavorite(item, $event)\"\n (focusin)=\"onFavoriteFocus($event)\">\n <mat-icon rtElem=\"favorite-icon\" [rtIconOutlined]=\"true\" [style.rotate.deg]=\"favorites.icons.remove.rotate\">\n {{ favorites.icons.remove.glyph }}\n </mat-icon>\n </button>\n } @else if (favoritesOn() && favorites && item.link?.trim()) {\n <!--\n \u0417\u0432\u0435\u0437\u0434\u0430 \u2014 \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435, \u0433\u0434\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0432\u043A\u043B\u044E\u0447\u0438\u043B\u043E\n \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435. \u041F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C, \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C.\n \u0417\u0430\u043B\u0438\u0432\u043A\u0443 \u0434\u0430\u044E\u0442 \u0438 \u0433\u043B\u0438\u0444, \u0438 \u043E\u0441\u044C \u0437\u0430\u043B\u0438\u0432\u043A\u0438: \u0441\u0442\u0430\u0442\u0438\u0447\u043D\u044B\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u043E\u0441\u0438 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442,\n \u0430 \u0443 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E `star` \u0431\u0435\u0437 \u043E\u0441\u0438 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043F\u043E\u043B\u044B\u043C.\n\n \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435, \u0438 `aria-pressed` \u0443 \u043D\u0435\u0451 \u043D\u0435\u0442:\n \u043D\u0430\u0436\u0430\u0442\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0430 \u0441 \u0438\u043C\u0435\u043D\u0435\u043C \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB \u0447\u0438\u0442\u0430\u043B\u0430\u0441\u044C \u0431\u044B \u0432\u0434\u0432\u043E\u0435.\n -->\n @let isFavorite = favoriteIds().includes(item.id);\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"favorite\"\n qa-dataid=\"side-menu-favorite-star\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{ on: isFavorite, always: narrow() }\"\n [matTooltip]=\"isFavorite ? favorites.labels.remove : favorites.labels.add\"\n [matTooltipDisabled]=\"narrow()\"\n [attr.aria-label]=\"isFavorite ? favorites.labels.remove : favorites.labels.add\"\n (click)=\"onToggleFavorite(item, $event)\"\n (focusin)=\"onFavoriteFocus($event)\">\n <mat-icon rtElem=\"favorite-icon\" [rtIconOutlined]=\"!isFavorite\">\n {{ isFavorite ? 'star' : 'star_border' }}\n </mat-icon>\n </button>\n }\n\n <!--\n \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443\n \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F. \u0421\u043B\u043E\u0442 \u043E\u0434\u0438\u043D \u043D\u0430 \u0448\u0430\u0431\u043B\u043E\u043D \u2014 \u043F\u043E\u0434\u043F\u0443\u043D\u043A\u0442 \u0441\u043E \u0441\u0441\u044B\u043B\u043A\u043E\u0439 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043E\u0434\u0438\u043D \u0440\u0430\u0437.\n -->\n <ng-content select=\"[rtuiSideMenuSubItemAction]\" />\n\n <!--\n \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u043F\u043E\u0442\u043E\u043C\u0443 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439, \u0443 \u043F\u0440\u0430\u0432\u043E\u0433\u043E \u043A\u0440\u0430\u044F:\n \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E, \u043F\u043E\u044F\u0432\u043B\u044F\u044E\u0449\u0438\u0435\u0441\u044F \u043F\u043E\u0434 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C, \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439 \u0438 \u043D\u0435\n \u0441\u0434\u0432\u0438\u0433\u0430\u044E\u0442 \u0435\u0451.\n -->\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n <mat-icon\n rtElem=\"icon\"\n [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n {{ item.iconButton.icon }}\n </mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n } @else if (item?.submenu) {\n <!--\n \u041F\u0430\u043F\u043A\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430\n \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C \u043D\u0438\u043A\u043E\u0433\u043E \u2014 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0438\u0441\u043A\u0430\u043B \u0435\u0451 \u043F\u043E \u0438\u043C\u0435\u043D\u0438 \u0438 \u0434\u043E\u043B\u0436\u0435\u043D \u0435\u0451 \u043D\u0430\u0439\u0442\u0438. \u0428\u0435\u0432\u0440\u043E\u043D \u0443 \u0442\u0430\u043A\u043E\u0439\n \u043F\u0430\u043F\u043A\u0438 \u0443\u0431\u0440\u0430\u043D: \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E, \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0430 \u043E\u0431\u0435\u0449\u0430\u043B\u0430 \u0431\u044B \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435.\n -->\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [hideToggle]=\"!item.submenu.length\"\n [expanded]=\"menuRef.expandedMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{\n activated: menuRef.activeMenuIds().includes(item.id),\n highlighted: menuRef.highlightedMenuId() === item.id,\n favorites: favoritesOn(),\n }\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n }\n\n @if (item?.name) {\n <div\n #headerTitleTpl\n matListItemTitle\n rtElem=\"title\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"item.name\"\n [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n @if (part.matched) {\n <span rtElem=\"match\">{{ part.text }}</span>\n } @else {\n <span>{{ part.text }}</span>\n }\n }\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded && item?.submenu?.length) {\n <mat-nav-list>\n @for (item of item?.submenu; track i; let i = $index) {\n <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n }\n </mat-nav-list>\n }\n </mat-expansion-panel>\n }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title--favorites .rtui-side-menu-sub-item-title-button{--rt-side-menu-sub-item-favorite-column: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));margin-right:calc((var(--rt-side-menu-sub-item-favorite-column) - var(--rt-spacing-24) - var(--rt-spacing-2)) / 2)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite{--mat-icon-button-state-layer-size: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));--mat-icon-button-icon-size: var(--rt-side-menu-favorite-action-icon-size, var(--rt-font-size-lg));--mat-icon-button-icon-color: var(--rt-side-menu-favorite-action-color, var(--rt-text-base-secondary));flex:0 0 auto;margin-left:var(--rt-spacing-4);opacity:0}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--on,:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--always{opacity:1}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--on{--mat-icon-button-icon-color: var( --rt-side-menu-favorite-color, var(--mat-sys-primary, var(--mat-button-filled-container-color, var(--rt-icon-accent-primary))) )}@media(hover:hover){:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--remove:hover{--mat-icon-button-icon-color: var(--rt-side-menu-favorite-remove-hover-color, var(--rt-icon-accent-danger))}}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite--remove:focus-visible{--mat-icon-button-icon-color: var(--rt-side-menu-favorite-remove-hover-color, var(--rt-icon-accent-danger))}@media(hover:none){:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite{opacity:1}}@media(pointer:fine){:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite{--mat-icon-button-touch-target-display: none}}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__favorite-icon{width:var(--mat-icon-button-icon-size);height:var(--mat-icon-button-icon-size);font-size:var(--mat-icon-button-icon-size);line-height:1}:host .rtui-side-menu-sub-item:hover .rtui-side-menu-sub-item-title__favorite,:host .rtui-side-menu-sub-item:has(:focus-visible) .rtui-side-menu-sub-item-title__favorite{opacity:1}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--favorites ::ng-deep .mat-expansion-indicator{margin-right:calc(var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2)) / 2 - var(--rt-spacing-12))}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"] }]
|
|
1513
|
+
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isSubMenuXScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuXScrollEnabled", required: false }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], inFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "inFavorites", required: false }] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
|
|
1008
1514
|
|
|
1009
1515
|
/**
|
|
1010
1516
|
* Ходьба по подменю с клавиатуры.
|
|
@@ -1107,21 +1613,223 @@ function pressSubMenuRow(panel, item) {
|
|
|
1107
1613
|
rows.find((row) => row.id === String(item.id))?.click();
|
|
1108
1614
|
}
|
|
1109
1615
|
|
|
1616
|
+
const BEM_BLOCK$t = 'rtui-side-menu-favorites';
|
|
1617
|
+
/** Панель подменю: уход указателя с неё закрывает подменю, открытое наведением. */
|
|
1618
|
+
const SUB_MENU_PANEL = '.rtui-sub-side-menu-content';
|
|
1619
|
+
/**
|
|
1620
|
+
* Блок избранного вверху подменю: выбранные человеком разделы в порядке его списка.
|
|
1621
|
+
*
|
|
1622
|
+
* Строки собираются из пунктов самого меню, а не из хранилища: подпись следует языку пунктов, адрес
|
|
1623
|
+
* — объявлению. Номер без пункта в меню не показывается, но из списка не уходит. Строку рисует тот
|
|
1624
|
+
* же подпункт, что и в списке, — строка избранного выглядит и открывается так же, как её пункт.
|
|
1625
|
+
*
|
|
1626
|
+
* Избранное у каждого пункта полосы своё и по умолчанию выключено: блок стоит только в подменю пункта
|
|
1627
|
+
* с флагом `favorites` и показывает только его разделы. Список в хранилище один на все пункты.
|
|
1628
|
+
*
|
|
1629
|
+
* Пока в поиске что-то набрано, блока нет: поиск принадлежит разделу. Показать нечего — блок места
|
|
1630
|
+
* не занимает.
|
|
1631
|
+
*/
|
|
1632
|
+
class RtuiSideMenuFavoritesComponent {
|
|
1633
|
+
#menu;
|
|
1634
|
+
#hold;
|
|
1635
|
+
#breakpoints;
|
|
1636
|
+
#injector;
|
|
1637
|
+
#host;
|
|
1638
|
+
/** Номер строки в руке; пусто, пока ничего не тянут. */
|
|
1639
|
+
#dragged;
|
|
1640
|
+
#section;
|
|
1641
|
+
constructor() {
|
|
1642
|
+
this.#menu = inject(RTUI_SIDE_MENU);
|
|
1643
|
+
this.#hold = inject(RtuiSubMenuHoldService, { optional: true });
|
|
1644
|
+
this.#breakpoints = inject(BreakpointService);
|
|
1645
|
+
this.#injector = inject(Injector);
|
|
1646
|
+
this.#host = inject(ElementRef);
|
|
1647
|
+
/** Номер строки в руке; пусто, пока ничего не тянут. */
|
|
1648
|
+
this.#dragged = signal(null, /* @ts-ignore */
|
|
1649
|
+
...(ngDevMode ? [{ debugName: "#dragged" }] : /* istanbul ignore next */ []));
|
|
1650
|
+
this.#section = computed(() => this.favorites && favoritesSection(this.#menu.menuItems(), this.#menu.shownSubMenu()), /* @ts-ignore */
|
|
1651
|
+
...(ngDevMode ? [{ debugName: "#section" }] : /* istanbul ignore next */ []));
|
|
1652
|
+
this.favorites = inject(RtuiSideMenuSettingsService, { optional: true });
|
|
1653
|
+
this.rows = computed(() => {
|
|
1654
|
+
const section = this.#section();
|
|
1655
|
+
if (!this.favorites || !section || this.#menu.subMenuQuery().trim() !== '') {
|
|
1656
|
+
return [];
|
|
1657
|
+
}
|
|
1658
|
+
return findFavoriteItems([section], this.favorites.ids(this.#menu.menuId())());
|
|
1659
|
+
}, /* @ts-ignore */
|
|
1660
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1661
|
+
/** Ручки строк по порядку: стрелка возвращает фокус на ручку переставленной строки. */
|
|
1662
|
+
this.handles = viewChildren('handle', { ...(ngDevMode ? { debugName: "handles" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
1663
|
+
/** Узкий экран: подсказка у ручки не показывается — наводиться там нечем. */
|
|
1664
|
+
this.narrow = computed(() => !!this.#breakpoints.isMobile(), /* @ts-ignore */
|
|
1665
|
+
...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
|
|
1666
|
+
this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1667
|
+
this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1668
|
+
this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1669
|
+
this.clickSubMenuAction = output();
|
|
1670
|
+
this.clickSubMenuAdditionalAction = output();
|
|
1671
|
+
// Строку в руке уничтожили — указатель увёл подменю на другой раздел. CDK закрывает тягу
|
|
1672
|
+
// без события конца, и удержание осталось бы навсегда: подменю перестало бы закрываться.
|
|
1673
|
+
effect(() => {
|
|
1674
|
+
const dragged = this.#dragged();
|
|
1675
|
+
if (dragged !== null && !this.rows().some((item) => item.id === dragged)) {
|
|
1676
|
+
this.#release();
|
|
1677
|
+
}
|
|
1678
|
+
});
|
|
1679
|
+
inject(DestroyRef).onDestroy(() => this.#release());
|
|
1680
|
+
}
|
|
1681
|
+
/** Строка в руке: подменю, открытое наведением, не закрывается, когда рука выходит за панель. */
|
|
1682
|
+
onDragStart(id) {
|
|
1683
|
+
this.#dragged.set(id);
|
|
1684
|
+
this.#hold?.hold();
|
|
1685
|
+
}
|
|
1686
|
+
/**
|
|
1687
|
+
* Строка брошена: удержание снимается. Брошенная за панелью закрывает подменю, открытое
|
|
1688
|
+
* наведением, — уход указателя, пропущенный за время тяги, срабатывает сейчас.
|
|
1689
|
+
*/
|
|
1690
|
+
onDragEnd(event) {
|
|
1691
|
+
this.#release();
|
|
1692
|
+
const panel = this.#host.nativeElement.closest(SUB_MENU_PANEL);
|
|
1693
|
+
if (panel && event.dropPoint && isDroppedOutside(panel.getBoundingClientRect(), event.dropPoint)) {
|
|
1694
|
+
this.#menu.toggleSubMenu();
|
|
1695
|
+
}
|
|
1696
|
+
}
|
|
1697
|
+
/**
|
|
1698
|
+
* Строка брошена. Брошенная вне блока ничего не меняет — убирает из избранного кнопка, а не
|
|
1699
|
+
* перетаскивание.
|
|
1700
|
+
*/
|
|
1701
|
+
onDrop(event) {
|
|
1702
|
+
if (event.isPointerOverContainer) {
|
|
1703
|
+
this.#move(event.previousIndex, event.currentIndex);
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
/** Стрелка на ручке переставляет строку на соседнее место, и фокус едет вместе с ручкой. */
|
|
1707
|
+
onHandleKey(event, index, step) {
|
|
1708
|
+
// Стрелки не уходят в меню: там они ведут подсветку по списку раздела.
|
|
1709
|
+
event.preventDefault();
|
|
1710
|
+
event.stopPropagation();
|
|
1711
|
+
const target = index + step;
|
|
1712
|
+
if (target < 0 || target >= this.rows().length) {
|
|
1713
|
+
return;
|
|
1714
|
+
}
|
|
1715
|
+
this.#move(index, target);
|
|
1716
|
+
afterNextRender(() => this.handles()[target]?.nativeElement.focus(), { injector: this.#injector });
|
|
1717
|
+
}
|
|
1718
|
+
/** Снимает удержание, если строку тянули; без тяги удержание не трогает — его мог поставить фокус. */
|
|
1719
|
+
#release() {
|
|
1720
|
+
if (this.#dragged() === null) {
|
|
1721
|
+
return;
|
|
1722
|
+
}
|
|
1723
|
+
this.#dragged.set(null);
|
|
1724
|
+
this.#hold?.release();
|
|
1725
|
+
}
|
|
1726
|
+
/** Место в блоке переводится в место списка по свежей записи хранилища: скрытые номера остаются на своих. */
|
|
1727
|
+
#move(from, to) {
|
|
1728
|
+
if (!this.favorites || from === to) {
|
|
1729
|
+
return;
|
|
1730
|
+
}
|
|
1731
|
+
const visible = this.rows().map((item) => item.id);
|
|
1732
|
+
this.favorites.moveVisible(this.#menu.menuId(), visible, from, to);
|
|
1733
|
+
}
|
|
1734
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuFavoritesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1735
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiSideMenuFavoritesComponent, isStandalone: true, selector: "rtui-side-menu-favorites", inputs: { isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rtui-side-menu-favorites" }, viewQueries: [{ propertyName: "handles", predicate: ["handle"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-side-menu-favorites\">\n @if (favorites && rows().length) {\n <div rtElem=\"title\" qa-dataid=\"side-menu-favorites-title\">\n <mat-icon rtElem=\"title-icon\" aria-hidden=\"true\" [rtIconOutlined]=\"false\">star</mat-icon>\n <span rtElem=\"title-text\">{{ favorites.labels.title }}</span>\n </div>\n\n <mat-nav-list\n rtElem=\"list\"\n qa-dataid=\"side-menu-favorites\"\n cdkDropList\n cdkDropListLockAxis=\"y\"\n [cdkDropListData]=\"rows()\"\n [attr.aria-label]=\"favorites.labels.title\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (item of rows(); track item.id) {\n <div\n rtElem=\"row\"\n qa-dataid=\"side-menu-favorite-row\"\n cdkDrag\n [attr.data-id]=\"item.id\"\n (cdkDragStarted)=\"onDragStart(item.id)\"\n (cdkDragEnded)=\"onDragEnd($event)\">\n <!--\n \u0420\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u043F\u0443\u043D\u043A\u0442\u0430, \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439 \u043F\u043E\u0441\u043B\u0435 \u043A\u043D\u043E\u043F\u043A\u0438 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB: \u043F\u043E\u0434\u0441\u0432\u0435\u0442\u043A\u0430 \u043F\u0443\u043D\u043A\u0442\u0430\n \u043D\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0438 \u0435\u0451. \u0421\u0442\u0440\u043E\u043A\u0443 \u0442\u044F\u043D\u0443\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u0437\u0430 \u0440\u0443\u0447\u043A\u0443: \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0430, \u0438\n \u0441\u0442\u0440\u043E\u043A\u0443, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0442\u044F\u043D\u0443\u0442 \u0432\u0441\u0435\u043C \u0442\u0435\u043B\u043E\u043C, \u043D\u0435 \u043D\u0430\u0436\u0430\u0442\u044C \u0431\u0435\u0437 \u0434\u0440\u043E\u0436\u0438. \u0417\u043D\u0430\u0447\u043E\u043A \u2014 \u0434\u0432\u0435 \u0441\u0442\u0440\u0435\u043B\u043A\u0438\n \u043D\u0430\u0440\u0443\u0436\u0443, \u043F\u043E\u0432\u0451\u0440\u043D\u0443\u0442\u044B\u0435 \u0441\u0442\u0438\u043B\u044F\u043C\u0438 \u043D\u0430 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044C \u043E\u0431\u043E\u0440\u043E\u0442\u0430. \u0421 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044B \u0441\u0442\u0440\u043E\u043A\u0443\n \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0442 \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043D\u0430 \u0440\u0443\u0447\u043A\u0435: \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043A\u043B\u0430\u0432\u0438\u0448 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442.\n -->\n <rtui-side-menu-sub-item\n rtElem=\"item\"\n [item]=\"item\"\n [inFavorites]=\"true\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"clickSubMenuAction.emit($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditionalAction.emit($event)\">\n <button\n #handle\n rtuiSideMenuSubItemAction\n cdkDragHandle\n mat-icon-button\n type=\"button\"\n rtElem=\"handle\"\n qa-dataid=\"side-menu-favorite-handle\"\n matTooltipPosition=\"above\"\n aria-keyshortcuts=\"ArrowUp ArrowDown\"\n [rtMod]=\"{ always: narrow() }\"\n [matTooltip]=\"favorites.labels.drag\"\n [matTooltipDisabled]=\"narrow()\"\n [attr.aria-label]=\"favorites.labels.drag\"\n (click)=\"$event.stopPropagation()\"\n (keydown.arrowup)=\"onHandleKey($event, $index, -1)\"\n (keydown.arrowdown)=\"onHandleKey($event, $index, 1)\">\n <mat-icon rtElem=\"handle-icon\" [rtIconOutlined]=\"true\" [style.rotate.deg]=\"favorites.icons.drag.rotate\">\n {{ favorites.icons.drag.glyph }}\n </mat-icon>\n </button>\n </rtui-side-menu-sub-item>\n </div>\n }\n </mat-nav-list>\n }\n</ng-container>\n", styles: [":host{display:block}:host:has(.rtui-side-menu-favorites__list){padding-bottom:var(--rt-side-menu-favorites-divider-gap, var(--rt-spacing-8));border-bottom:1px solid var(--rt-side-menu-favorites-divider-color, var(--rt-border-neutral-subtle))}:host .rtui-side-menu-favorites__title{display:flex;align-items:center;padding:var(--rt-spacing-8) var(--rt-spacing-16) var(--rt-spacing-4);color:var(--rt-side-menu-favorites-title-color, var(--rt-text-base-secondary));font-size:var(--rt-side-menu-favorites-title-font-size, var(--rt-font-size-sm));font-weight:var(--rt-font-weight-semibold);gap:var(--rt-spacing-6)}:host .rtui-side-menu-favorites__title-icon{width:var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm));height:var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm));color:var(--rt-side-menu-favorite-color, var(--mat-sys-primary, var(--mat-button-filled-container-color, var(--rt-icon-accent-primary))));font-size:var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm))}:host .rtui-side-menu-favorites__title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-favorites__list{padding:0}.rtui-side-menu-favorites__row{display:flex;align-items:center}.rtui-side-menu-favorites__handle{--mat-icon-button-state-layer-size: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));--mat-icon-button-icon-size: var(--rt-side-menu-favorite-action-icon-size, var(--rt-font-size-lg));--mat-icon-button-icon-color: var(--rt-side-menu-favorite-action-color, var(--rt-text-base-secondary));flex:0 0 auto;cursor:grab;opacity:0}.rtui-side-menu-favorites__handle:active{cursor:grabbing}.rtui-side-menu-favorites__handle--always{opacity:1}@media(hover:none){.rtui-side-menu-favorites__handle{opacity:1}}.rtui-side-menu-favorites__row:hover .rtui-side-menu-favorites__handle,.rtui-side-menu-favorites__row:has(:focus-visible) .rtui-side-menu-favorites__handle,.rtui-side-menu-favorites__row.cdk-drag-preview .rtui-side-menu-favorites__handle{opacity:1}.rtui-side-menu-favorites__handle-icon{width:var(--mat-icon-button-icon-size);height:var(--mat-icon-button-icon-size);font-size:var(--mat-icon-button-icon-size);line-height:1}.rtui-side-menu-favorites__item{min-width:0;flex:1 1 auto}:host-context(.rtui-mobile-side-menu-list__sub):has(.rtui-side-menu-favorites__list){margin-bottom:var(--rt-spacing-8)}.rtui-side-menu-favorites__row.cdk-drag-preview{display:flex;align-items:center;border-radius:var(--rt-radius-xl);background-color:var(--rt-side-menu-favorites-drag-background, var(--rt-bg-base-base));box-shadow:var(--rt-side-menu-favorites-drag-shadow, 0 .5rem 1rem 0 var(--rt-shadow-color))}.rtui-side-menu-favorites__row.cdk-drag-placeholder{opacity:0}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type:
|
|
1736
|
+
// directives
|
|
1737
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type:
|
|
1738
|
+
// components
|
|
1739
|
+
RtuiSideMenuSubItemComponent, selector: "rtui-side-menu-sub-item", inputs: ["item", "isSubMenuXScrollEnabled", "isSubMenuIconsOutlined", "isSubMenuButtonIconsOutlined", "isSubMenuTooltipsShown", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1740
|
+
}
|
|
1741
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuFavoritesComponent, decorators: [{
|
|
1742
|
+
type: Component,
|
|
1743
|
+
args: [{ selector: 'rtui-side-menu-favorites', host: { class: BEM_BLOCK$t }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1744
|
+
CdkDropList,
|
|
1745
|
+
CdkDrag,
|
|
1746
|
+
CdkDragHandle,
|
|
1747
|
+
MatIcon,
|
|
1748
|
+
MatIconButton,
|
|
1749
|
+
MatNavList,
|
|
1750
|
+
MatTooltip,
|
|
1751
|
+
// directives
|
|
1752
|
+
BlockDirective,
|
|
1753
|
+
ElemDirective,
|
|
1754
|
+
ModDirective,
|
|
1755
|
+
RtIconOutlinedDirective,
|
|
1756
|
+
// components
|
|
1757
|
+
RtuiSideMenuSubItemComponent,
|
|
1758
|
+
], template: "<ng-container rtBlock=\"rtui-side-menu-favorites\">\n @if (favorites && rows().length) {\n <div rtElem=\"title\" qa-dataid=\"side-menu-favorites-title\">\n <mat-icon rtElem=\"title-icon\" aria-hidden=\"true\" [rtIconOutlined]=\"false\">star</mat-icon>\n <span rtElem=\"title-text\">{{ favorites.labels.title }}</span>\n </div>\n\n <mat-nav-list\n rtElem=\"list\"\n qa-dataid=\"side-menu-favorites\"\n cdkDropList\n cdkDropListLockAxis=\"y\"\n [cdkDropListData]=\"rows()\"\n [attr.aria-label]=\"favorites.labels.title\"\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (item of rows(); track item.id) {\n <div\n rtElem=\"row\"\n qa-dataid=\"side-menu-favorite-row\"\n cdkDrag\n [attr.data-id]=\"item.id\"\n (cdkDragStarted)=\"onDragStart(item.id)\"\n (cdkDragEnded)=\"onDragEnd($event)\">\n <!--\n \u0420\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u043F\u0443\u043D\u043A\u0442\u0430, \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439 \u043F\u043E\u0441\u043B\u0435 \u043A\u043D\u043E\u043F\u043A\u0438 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB: \u043F\u043E\u0434\u0441\u0432\u0435\u0442\u043A\u0430 \u043F\u0443\u043D\u043A\u0442\u0430\n \u043D\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0438 \u0435\u0451. \u0421\u0442\u0440\u043E\u043A\u0443 \u0442\u044F\u043D\u0443\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u0437\u0430 \u0440\u0443\u0447\u043A\u0443: \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0430, \u0438\n \u0441\u0442\u0440\u043E\u043A\u0443, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0442\u044F\u043D\u0443\u0442 \u0432\u0441\u0435\u043C \u0442\u0435\u043B\u043E\u043C, \u043D\u0435 \u043D\u0430\u0436\u0430\u0442\u044C \u0431\u0435\u0437 \u0434\u0440\u043E\u0436\u0438. \u0417\u043D\u0430\u0447\u043E\u043A \u2014 \u0434\u0432\u0435 \u0441\u0442\u0440\u0435\u043B\u043A\u0438\n \u043D\u0430\u0440\u0443\u0436\u0443, \u043F\u043E\u0432\u0451\u0440\u043D\u0443\u0442\u044B\u0435 \u0441\u0442\u0438\u043B\u044F\u043C\u0438 \u043D\u0430 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044C \u043E\u0431\u043E\u0440\u043E\u0442\u0430. \u0421 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044B \u0441\u0442\u0440\u043E\u043A\u0443\n \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0442 \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043D\u0430 \u0440\u0443\u0447\u043A\u0435: \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043A\u043B\u0430\u0432\u0438\u0448 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442.\n -->\n <rtui-side-menu-sub-item\n rtElem=\"item\"\n [item]=\"item\"\n [inFavorites]=\"true\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"clickSubMenuAction.emit($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditionalAction.emit($event)\">\n <button\n #handle\n rtuiSideMenuSubItemAction\n cdkDragHandle\n mat-icon-button\n type=\"button\"\n rtElem=\"handle\"\n qa-dataid=\"side-menu-favorite-handle\"\n matTooltipPosition=\"above\"\n aria-keyshortcuts=\"ArrowUp ArrowDown\"\n [rtMod]=\"{ always: narrow() }\"\n [matTooltip]=\"favorites.labels.drag\"\n [matTooltipDisabled]=\"narrow()\"\n [attr.aria-label]=\"favorites.labels.drag\"\n (click)=\"$event.stopPropagation()\"\n (keydown.arrowup)=\"onHandleKey($event, $index, -1)\"\n (keydown.arrowdown)=\"onHandleKey($event, $index, 1)\">\n <mat-icon rtElem=\"handle-icon\" [rtIconOutlined]=\"true\" [style.rotate.deg]=\"favorites.icons.drag.rotate\">\n {{ favorites.icons.drag.glyph }}\n </mat-icon>\n </button>\n </rtui-side-menu-sub-item>\n </div>\n }\n </mat-nav-list>\n }\n</ng-container>\n", styles: [":host{display:block}:host:has(.rtui-side-menu-favorites__list){padding-bottom:var(--rt-side-menu-favorites-divider-gap, var(--rt-spacing-8));border-bottom:1px solid var(--rt-side-menu-favorites-divider-color, var(--rt-border-neutral-subtle))}:host .rtui-side-menu-favorites__title{display:flex;align-items:center;padding:var(--rt-spacing-8) var(--rt-spacing-16) var(--rt-spacing-4);color:var(--rt-side-menu-favorites-title-color, var(--rt-text-base-secondary));font-size:var(--rt-side-menu-favorites-title-font-size, var(--rt-font-size-sm));font-weight:var(--rt-font-weight-semibold);gap:var(--rt-spacing-6)}:host .rtui-side-menu-favorites__title-icon{width:var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm));height:var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm));color:var(--rt-side-menu-favorite-color, var(--mat-sys-primary, var(--mat-button-filled-container-color, var(--rt-icon-accent-primary))));font-size:var(--rt-side-menu-favorites-title-icon-size, var(--rt-icon-size-sm))}:host .rtui-side-menu-favorites__title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-favorites__list{padding:0}.rtui-side-menu-favorites__row{display:flex;align-items:center}.rtui-side-menu-favorites__handle{--mat-icon-button-state-layer-size: var(--rt-side-menu-favorite-action-size, calc(var(--rt-spacing-16) * 2));--mat-icon-button-icon-size: var(--rt-side-menu-favorite-action-icon-size, var(--rt-font-size-lg));--mat-icon-button-icon-color: var(--rt-side-menu-favorite-action-color, var(--rt-text-base-secondary));flex:0 0 auto;cursor:grab;opacity:0}.rtui-side-menu-favorites__handle:active{cursor:grabbing}.rtui-side-menu-favorites__handle--always{opacity:1}@media(hover:none){.rtui-side-menu-favorites__handle{opacity:1}}.rtui-side-menu-favorites__row:hover .rtui-side-menu-favorites__handle,.rtui-side-menu-favorites__row:has(:focus-visible) .rtui-side-menu-favorites__handle,.rtui-side-menu-favorites__row.cdk-drag-preview .rtui-side-menu-favorites__handle{opacity:1}.rtui-side-menu-favorites__handle-icon{width:var(--mat-icon-button-icon-size);height:var(--mat-icon-button-icon-size);font-size:var(--mat-icon-button-icon-size);line-height:1}.rtui-side-menu-favorites__item{min-width:0;flex:1 1 auto}:host-context(.rtui-mobile-side-menu-list__sub):has(.rtui-side-menu-favorites__list){margin-bottom:var(--rt-spacing-8)}.rtui-side-menu-favorites__row.cdk-drag-preview{display:flex;align-items:center;border-radius:var(--rt-radius-xl);background-color:var(--rt-side-menu-favorites-drag-background, var(--rt-bg-base-base));box-shadow:var(--rt-side-menu-favorites-drag-shadow, 0 .5rem 1rem 0 var(--rt-shadow-color))}.rtui-side-menu-favorites__row.cdk-drag-placeholder{opacity:0}\n"] }]
|
|
1759
|
+
}], ctorParameters: () => [], propDecorators: { handles: [{ type: i0.ViewChildren, args: ['handle', { ...{
|
|
1760
|
+
read: ElementRef,
|
|
1761
|
+
}, isSignal: true }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
|
|
1762
|
+
|
|
1763
|
+
/**
|
|
1764
|
+
* Тяга правого края закреплённого подменю.
|
|
1765
|
+
*
|
|
1766
|
+
* Лежит отдельно от меню, как и ходьба клавиатурой: файл меню упёрся в предел длины. Слушатели
|
|
1767
|
+
* вешаются на документ — рука уходит с узкой полоски ручки в первое же движение, и слушатель на
|
|
1768
|
+
* ней самой терял бы тягу сразу. Ширина, пока край держат, живёт здесь; наружу она уходит одной
|
|
1769
|
+
* просьбой на отпускании: вход потребителя за каждым движением мыши не угнаться, а хранилище
|
|
1770
|
+
* незачем писать сотней раз.
|
|
1771
|
+
*/
|
|
1772
|
+
class SubMenuResize {
|
|
1773
|
+
#width;
|
|
1774
|
+
#hooks;
|
|
1775
|
+
/** Снятие слушателей документа; пусто, пока край не держат. */
|
|
1776
|
+
#stop;
|
|
1777
|
+
constructor(hooks) {
|
|
1778
|
+
this.#width = signal(null, /* @ts-ignore */
|
|
1779
|
+
...(ngDevMode ? [{ debugName: "#width" }] : /* istanbul ignore next */ []));
|
|
1780
|
+
/** Снятие слушателей документа; пусто, пока край не держат. */
|
|
1781
|
+
this.#stop = null;
|
|
1782
|
+
/** Ширина под рукой; пусто, пока край не держат. */
|
|
1783
|
+
this.width = this.#width.asReadonly();
|
|
1784
|
+
this.#hooks = hooks;
|
|
1785
|
+
}
|
|
1786
|
+
isActive() {
|
|
1787
|
+
return this.#stop !== null;
|
|
1788
|
+
}
|
|
1789
|
+
/** Край взят в точке `startX`, а панель в этот миг шириной `startWidth`. */
|
|
1790
|
+
start(startX, startWidth) {
|
|
1791
|
+
if (this.isActive()) {
|
|
1792
|
+
return;
|
|
1793
|
+
}
|
|
1794
|
+
const stopMove = this.#hooks.listen('mousemove', (event) => {
|
|
1795
|
+
this.#width.set(clampSubMenuWidth(startWidth + event.clientX - startX));
|
|
1796
|
+
});
|
|
1797
|
+
const stopUp = this.#hooks.listen('mouseup', () => this.#finish());
|
|
1798
|
+
this.#stop = () => {
|
|
1799
|
+
stopMove();
|
|
1800
|
+
stopUp();
|
|
1801
|
+
this.#stop = null;
|
|
1802
|
+
};
|
|
1803
|
+
}
|
|
1804
|
+
/**
|
|
1805
|
+
* Конец тяги. Уходит натянутая ширина, а не нарисованная: нижний предел держит оформление, и
|
|
1806
|
+
* замерить применённое можно только после раскладки. Край отпустили, не сдвинув, — уходить нечему.
|
|
1807
|
+
*/
|
|
1808
|
+
#finish() {
|
|
1809
|
+
const width = this.#width();
|
|
1810
|
+
this.#stop?.();
|
|
1811
|
+
this.#width.set(null);
|
|
1812
|
+
if (width !== null) {
|
|
1813
|
+
this.#hooks.finish(width);
|
|
1814
|
+
}
|
|
1815
|
+
}
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1110
1818
|
class RtuiSideMenuHeaderDirective {
|
|
1111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1112
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
1819
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1820
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiSideMenuHeaderDirective, isStandalone: true, selector: "[rtuiSideMenuHeader]", ngImport: i0 }); }
|
|
1113
1821
|
}
|
|
1114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuHeaderDirective, decorators: [{
|
|
1115
1823
|
type: Directive,
|
|
1116
1824
|
args: [{
|
|
1117
1825
|
selector: '[rtuiSideMenuHeader]',
|
|
1118
1826
|
}]
|
|
1119
1827
|
}] });
|
|
1120
1828
|
class RtuiSideMenuFooterDirective {
|
|
1121
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1122
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
1829
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1830
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiSideMenuFooterDirective, isStandalone: true, selector: "[rtuiSideMenuFooter]", ngImport: i0 }); }
|
|
1123
1831
|
}
|
|
1124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuFooterDirective, decorators: [{
|
|
1125
1833
|
type: Directive,
|
|
1126
1834
|
args: [{
|
|
1127
1835
|
selector: '[rtuiSideMenuFooter]',
|
|
@@ -1132,14 +1840,17 @@ class RtuiSideMenuComponent {
|
|
|
1132
1840
|
constructor() {
|
|
1133
1841
|
this.#breakpoints = inject(BreakpointService);
|
|
1134
1842
|
this.#renderer = inject(Renderer2);
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
this.#
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1843
|
+
this.#hold = inject(RtuiSubMenuHoldService, { optional: true });
|
|
1844
|
+
/** Настройки меню, если приложение их включило: мода и ширина хранятся там под `menuId`. */
|
|
1845
|
+
this.#settings = inject(RtuiSideMenuSettingsService, { optional: true });
|
|
1846
|
+
/** Тяга правого края: натянутая ширина уходит в настройки меню и наружу. */
|
|
1847
|
+
this.#resize = new SubMenuResize({
|
|
1848
|
+
listen: (event, handler) => this.#renderer.listen('document', event, handler),
|
|
1849
|
+
finish: (width) => {
|
|
1850
|
+
this.#settings?.setSubMenuWidth(this.menuId(), width);
|
|
1851
|
+
this.subMenuWidthChange.emit(width);
|
|
1852
|
+
},
|
|
1853
|
+
});
|
|
1143
1854
|
/** Подменю открыл указатель. У закреплённой моды открытость считается не так. */
|
|
1144
1855
|
this.#hoverOpened = signal(false, /* @ts-ignore */
|
|
1145
1856
|
...(ngDevMode ? [{ debugName: "#hoverOpened" }] : /* istanbul ignore next */ []));
|
|
@@ -1154,23 +1865,19 @@ class RtuiSideMenuComponent {
|
|
|
1154
1865
|
});
|
|
1155
1866
|
/**
|
|
1156
1867
|
* Человек работает с полем поиска, и подменю держится открытым, пока он не уйдёт нажатием
|
|
1157
|
-
*
|
|
1158
|
-
*
|
|
1159
|
-
* Заведено потому, что незакреплённое подменю живёт наведением: увести указатель к полю и
|
|
1160
|
-
* набрать в нём запрос — движение той же руки, и на полпути список исчезал. Уход фокуса
|
|
1161
|
-
* удержания не снимает: человек переходит от поля к пунктам того же подменю.
|
|
1868
|
+
* наружу: иначе на полпути от полосы к полю подменю, живущее наведением, исчезало.
|
|
1162
1869
|
*/
|
|
1163
1870
|
this.#searchHeld = signal(false, /* @ts-ignore */
|
|
1164
1871
|
...(ngDevMode ? [{ debugName: "#searchHeld" }] : /* istanbul ignore next */ []));
|
|
1872
|
+
/** Мода и ширина в работе: вход приложения, иначе сохранённые под номером меню. */
|
|
1873
|
+
this.#mode = computed(() => this.subMenuMode() ?? this.#settings?.subMenuMode(this.menuId())() ?? 'hover', /* @ts-ignore */
|
|
1874
|
+
...(ngDevMode ? [{ debugName: "#mode" }] : /* istanbul ignore next */ []));
|
|
1875
|
+
this.#width = computed(() => this.subMenuWidth() ?? this.#settings?.subMenuWidth(this.menuId())() ?? null, /* @ts-ignore */
|
|
1876
|
+
...(ngDevMode ? [{ debugName: "#width" }] : /* istanbul ignore next */ []));
|
|
1165
1877
|
/**
|
|
1166
|
-
* Что показывает закреплённое подменю: выбранный человеком раздел, а пока выбора нет —
|
|
1167
|
-
*
|
|
1168
|
-
*
|
|
1169
|
-
*
|
|
1170
|
-
* Выбор стоит впереди активности, а не позади неё, потому что иначе до соседнего раздела не
|
|
1171
|
-
* добраться вовсе: пока активный пункт несёт своё подменю, оно возвращалось на любое нажатие
|
|
1172
|
-
* полосы, и закреплённый человек оставался запертым в том разделе, с которого начал. Ставит и
|
|
1173
|
-
* снимает выбор `#pickPinnedSubMenu`.
|
|
1878
|
+
* Что показывает закреплённое подменю: выбранный человеком раздел, а пока выбора нет — раздел
|
|
1879
|
+
* активного адреса. Выбор впереди активности: иначе до соседнего раздела не добраться вовсе.
|
|
1880
|
+
* Ставит и снимает выбор `#pickPinnedSubMenu`.
|
|
1174
1881
|
*/
|
|
1175
1882
|
this.#pinnedSubMenu = computed(() => {
|
|
1176
1883
|
if (!this.isPinned()) {
|
|
@@ -1193,7 +1900,7 @@ class RtuiSideMenuComponent {
|
|
|
1193
1900
|
* пределом сама по себе. Числом в ките этот предел назвать нечем — ширину знает потребитель.
|
|
1194
1901
|
*/
|
|
1195
1902
|
this.subMenuWidthStyle = computed(() => {
|
|
1196
|
-
const width = this.#
|
|
1903
|
+
const width = this.#resize.width() ?? this.#width();
|
|
1197
1904
|
return width === null ? null : `${clampSubMenuWidth(width)}px`;
|
|
1198
1905
|
}, /* @ts-ignore */
|
|
1199
1906
|
...(ngDevMode ? [{ debugName: "subMenuWidthStyle" }] : /* istanbul ignore next */ []));
|
|
@@ -1210,7 +1917,7 @@ class RtuiSideMenuComponent {
|
|
|
1210
1917
|
* Закрепление действует. На узком экране подменю занимает экран целиком, закреплять там
|
|
1211
1918
|
* нечего — и переключателя в узкой разметке нет.
|
|
1212
1919
|
*/
|
|
1213
|
-
this.isPinned = computed(() => this
|
|
1920
|
+
this.isPinned = computed(() => this.#mode() === 'pinned' && !this.narrow(), /* @ts-ignore */
|
|
1214
1921
|
...(ngDevMode ? [{ debugName: "isPinned" }] : /* istanbul ignore next */ []));
|
|
1215
1922
|
/**
|
|
1216
1923
|
* Подменю держится набором запроса: на это время оно шире и уходом указателя не закрывается.
|
|
@@ -1222,7 +1929,7 @@ class RtuiSideMenuComponent {
|
|
|
1222
1929
|
this.subMenuOpened = computed(() => this.isPinned() ? this.#pinnedSubMenu().length > 0 : this.#hoverOpened(), /* @ts-ignore */
|
|
1223
1930
|
...(ngDevMode ? [{ debugName: "subMenuOpened" }] : /* istanbul ignore next */ []));
|
|
1224
1931
|
/** Что видно в подменю: отобранные пункты того набора, который его сейчас наполняет. */
|
|
1225
|
-
this.visibleSubMenuItems = computed(() => filterSubMenuItems(this.
|
|
1932
|
+
this.visibleSubMenuItems = computed(() => filterSubMenuItems(this.shownSubMenu(), this.subMenuQuery()), /* @ts-ignore */
|
|
1226
1933
|
...(ngDevMode ? [{ debugName: "visibleSubMenuItems" }] : /* istanbul ignore next */ []));
|
|
1227
1934
|
/**
|
|
1228
1935
|
* Какие папки подменю стоят раскрытыми. Публично: подпункт берёт раскрытость отсюда — своей у
|
|
@@ -1256,18 +1963,20 @@ class RtuiSideMenuComponent {
|
|
|
1256
1963
|
...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
1257
1964
|
this.selectedSubMenu = signal(null, /* @ts-ignore */
|
|
1258
1965
|
...(ngDevMode ? [{ debugName: "selectedSubMenu" }] : /* istanbul ignore next */ []));
|
|
1966
|
+
/** Набор, который подменю наполняет сейчас, до отбора поиском; по нему избранное узнаёт свой раздел. */
|
|
1967
|
+
this.shownSubMenu = computed(() => this.isPinned() ? this.#pinnedSubMenu() : (this.selectedSubMenu() ?? []), /* @ts-ignore */
|
|
1968
|
+
...(ngDevMode ? [{ debugName: "shownSubMenu" }] : /* istanbul ignore next */ []));
|
|
1259
1969
|
this.activeMenuIds = input.required(/* @ts-ignore */
|
|
1260
1970
|
...(ngDevMode ? [{ debugName: "activeMenuIds" }] : /* istanbul ignore next */ []));
|
|
1261
1971
|
this.menuItems = input([], { ...(ngDevMode ? { debugName: "menuItems" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
1262
|
-
/** Мода
|
|
1263
|
-
this.subMenuMode = input(
|
|
1972
|
+
/** Мода подменю от приложения. Задана — важнее сохранённой; нет ни той, ни другой — наведение. */
|
|
1973
|
+
this.subMenuMode = input(undefined, /* @ts-ignore */
|
|
1264
1974
|
...(ngDevMode ? [{ debugName: "subMenuMode" }] : /* istanbul ignore next */ []));
|
|
1265
|
-
/**
|
|
1266
|
-
|
|
1267
|
-
* потребитель, как и моду.
|
|
1268
|
-
*/
|
|
1269
|
-
this.subMenuWidth = input(null, /* @ts-ignore */
|
|
1975
|
+
/** Ширина закреплённого подменю в пикселях от приложения. Пусто — берётся сохранённая, её нет — оформление. */
|
|
1976
|
+
this.subMenuWidth = input(undefined, /* @ts-ignore */
|
|
1270
1977
|
...(ngDevMode ? [{ debugName: "subMenuWidth" }] : /* istanbul ignore next */ []));
|
|
1978
|
+
/** Под каким номером меню хранит свои настройки: у двух меню приложения — два номера. */
|
|
1979
|
+
this.menuId = input(DEFAULT_MENU_ID, { ...(ngDevMode ? { debugName: "menuId" } : /* istanbul ignore next */ {}), transform: normalizeMenuId });
|
|
1271
1980
|
this.isSubMenuXScrollEnabled = input(true, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1272
1981
|
this.isMainMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isMainMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1273
1982
|
this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -1275,12 +1984,9 @@ class RtuiSideMenuComponent {
|
|
|
1275
1984
|
this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1276
1985
|
this.activeMenuId = computed(() => this.activeMenuIds()?.length ? this.activeMenuIds()[this.activeMenuIds()?.length - 1] : '', /* @ts-ignore */
|
|
1277
1986
|
...(ngDevMode ? [{ debugName: "activeMenuId" }] : /* istanbul ignore next */ []));
|
|
1278
|
-
/**
|
|
1279
|
-
* Просьба о моде, а не смена моды: предпочтение хранит потребитель кита и возвращает его
|
|
1280
|
-
* входом. Своего состояния о нём меню не заводит.
|
|
1281
|
-
*/
|
|
1987
|
+
/** Выбранная мода: меню пишет её в настройки, если они включены, и сообщает приложению. */
|
|
1282
1988
|
this.subMenuModeChange = output();
|
|
1283
|
-
/**
|
|
1989
|
+
/** Натянутая ширина — так же, как мода. */
|
|
1284
1990
|
this.subMenuWidthChange = output();
|
|
1285
1991
|
this.closeMobileMenuAction = output();
|
|
1286
1992
|
this.clickSubMenuAction = output();
|
|
@@ -1288,13 +1994,11 @@ class RtuiSideMenuComponent {
|
|
|
1288
1994
|
}
|
|
1289
1995
|
#breakpoints;
|
|
1290
1996
|
#renderer;
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
#
|
|
1296
|
-
/** Снятие слушателей документа. Ведут и отпускают за пределами самой ручки. */
|
|
1297
|
-
#stopDrag;
|
|
1997
|
+
#hold;
|
|
1998
|
+
/** Настройки меню, если приложение их включило: мода и ширина хранятся там под `menuId`. */
|
|
1999
|
+
#settings;
|
|
2000
|
+
/** Тяга правого края: натянутая ширина уходит в настройки меню и наружу. */
|
|
2001
|
+
#resize;
|
|
1298
2002
|
/** Подменю открыл указатель. У закреплённой моды открытость считается не так. */
|
|
1299
2003
|
#hoverOpened;
|
|
1300
2004
|
/**
|
|
@@ -1305,22 +2009,16 @@ class RtuiSideMenuComponent {
|
|
|
1305
2009
|
#keyboard;
|
|
1306
2010
|
/**
|
|
1307
2011
|
* Человек работает с полем поиска, и подменю держится открытым, пока он не уйдёт нажатием
|
|
1308
|
-
*
|
|
1309
|
-
*
|
|
1310
|
-
* Заведено потому, что незакреплённое подменю живёт наведением: увести указатель к полю и
|
|
1311
|
-
* набрать в нём запрос — движение той же руки, и на полпути список исчезал. Уход фокуса
|
|
1312
|
-
* удержания не снимает: человек переходит от поля к пунктам того же подменю.
|
|
2012
|
+
* наружу: иначе на полпути от полосы к полю подменю, живущее наведением, исчезало.
|
|
1313
2013
|
*/
|
|
1314
2014
|
#searchHeld;
|
|
2015
|
+
/** Мода и ширина в работе: вход приложения, иначе сохранённые под номером меню. */
|
|
2016
|
+
#mode;
|
|
2017
|
+
#width;
|
|
1315
2018
|
/**
|
|
1316
|
-
* Что показывает закреплённое подменю: выбранный человеком раздел, а пока выбора нет —
|
|
1317
|
-
*
|
|
1318
|
-
*
|
|
1319
|
-
*
|
|
1320
|
-
* Выбор стоит впереди активности, а не позади неё, потому что иначе до соседнего раздела не
|
|
1321
|
-
* добраться вовсе: пока активный пункт несёт своё подменю, оно возвращалось на любое нажатие
|
|
1322
|
-
* полосы, и закреплённый человек оставался запертым в том разделе, с которого начал. Ставит и
|
|
1323
|
-
* снимает выбор `#pickPinnedSubMenu`.
|
|
2019
|
+
* Что показывает закреплённое подменю: выбранный человеком раздел, а пока выбора нет — раздел
|
|
2020
|
+
* активного адреса. Выбор впереди активности: иначе до соседнего раздела не добраться вовсе.
|
|
2021
|
+
* Ставит и снимает выбор `#pickPinnedSubMenu`.
|
|
1324
2022
|
*/
|
|
1325
2023
|
#pinnedSubMenu;
|
|
1326
2024
|
onClickMenu(item) {
|
|
@@ -1363,8 +2061,8 @@ class RtuiSideMenuComponent {
|
|
|
1363
2061
|
// Закреплённое подменю не открывается и не закрывается указателем.
|
|
1364
2062
|
return;
|
|
1365
2063
|
}
|
|
1366
|
-
if (item === undefined && this.#searchHeld()) {
|
|
1367
|
-
// Указатель ушёл с панели, а человек работает с
|
|
2064
|
+
if (item === undefined && (this.#searchHeld() || this.#hold?.held())) {
|
|
2065
|
+
// Указатель ушёл с панели, а человек работает с полем, звездой или строкой избранного.
|
|
1368
2066
|
return;
|
|
1369
2067
|
}
|
|
1370
2068
|
if (item?.submenu) {
|
|
@@ -1384,6 +2082,7 @@ class RtuiSideMenuComponent {
|
|
|
1384
2082
|
this.subMenuQuery.set('');
|
|
1385
2083
|
this.#hoverOpened.set(false);
|
|
1386
2084
|
this.#searchHeld.set(false);
|
|
2085
|
+
this.#hold?.release();
|
|
1387
2086
|
this.#keyboard.reset();
|
|
1388
2087
|
}
|
|
1389
2088
|
/**
|
|
@@ -1395,31 +2094,20 @@ class RtuiSideMenuComponent {
|
|
|
1395
2094
|
this.#searchHeld.set(true);
|
|
1396
2095
|
}
|
|
1397
2096
|
}
|
|
1398
|
-
/** Нажат переключатель моды:
|
|
2097
|
+
/** Нажат переключатель моды: выбор уходит в настройки меню и наружу. */
|
|
1399
2098
|
onSubMenuModeToggle() {
|
|
1400
|
-
this.
|
|
2099
|
+
const mode = this.isPinned() ? 'hover' : 'pinned';
|
|
2100
|
+
this.#settings?.setSubMenuMode(this.menuId(), mode);
|
|
2101
|
+
this.subMenuModeChange.emit(mode);
|
|
1401
2102
|
}
|
|
1402
|
-
/**
|
|
1403
|
-
* Взята ручка правого края. Слушатели вешаются на документ: рука уходит с узкой полоски
|
|
1404
|
-
* ручки в первое же движение, и слушатель на ней самой терял бы тягу сразу.
|
|
1405
|
-
*/
|
|
2103
|
+
/** Взята ручка правого края закреплённого подменю. */
|
|
1406
2104
|
onResizeStart(event) {
|
|
1407
|
-
if (!this.isPinned() || this.#
|
|
2105
|
+
if (!this.isPinned() || this.#resize.isActive()) {
|
|
1408
2106
|
return;
|
|
1409
2107
|
}
|
|
1410
2108
|
// Иначе указатель выделяет подписи пунктов, и тяга выглядит выделением текста.
|
|
1411
2109
|
event.preventDefault();
|
|
1412
|
-
|
|
1413
|
-
const startWidth = this.subMenuWidth() ?? this.#measureSubMenuWidth();
|
|
1414
|
-
const stopMove = this.#renderer.listen('document', 'mousemove', (moveEvent) => {
|
|
1415
|
-
this.#draggedWidth.set(clampSubMenuWidth(startWidth + moveEvent.clientX - startX));
|
|
1416
|
-
});
|
|
1417
|
-
const stopUp = this.#renderer.listen('document', 'mouseup', () => this.#finishResize());
|
|
1418
|
-
this.#stopDrag = () => {
|
|
1419
|
-
stopMove();
|
|
1420
|
-
stopUp();
|
|
1421
|
-
this.#stopDrag = null;
|
|
1422
|
-
};
|
|
2110
|
+
this.#resize.start(event.clientX, this.#width() ?? this.#measureSubMenuWidth());
|
|
1423
2111
|
}
|
|
1424
2112
|
onSubMenuSearch(query) {
|
|
1425
2113
|
this.subMenuQuery.set(query);
|
|
@@ -1474,35 +2162,20 @@ class RtuiSideMenuComponent {
|
|
|
1474
2162
|
// Пункт без разделов и без своего адреса: нажимать в нём нечего, и выбор остаётся прежним.
|
|
1475
2163
|
}
|
|
1476
2164
|
}
|
|
1477
|
-
/** Отпускание: слушатели снимаются, а ширина уходит просьбой наружу. */
|
|
1478
|
-
/**
|
|
1479
|
-
* Конец тяги. Наружу уходит натянутая ширина, а не та, что получилась на экране: нижний
|
|
1480
|
-
* предел держит оформление — панель не бывает уже той ширины, какую задал потребитель, — и
|
|
1481
|
-
* замерить применённое можно только там, где раскладка уже посчитана. Хранит потребитель
|
|
1482
|
-
* выбор человека; вид от этого не меняется, потому что предел стоит в самом оформлении.
|
|
1483
|
-
*/
|
|
1484
|
-
#finishResize() {
|
|
1485
|
-
const width = this.#draggedWidth();
|
|
1486
|
-
this.#stopDrag?.();
|
|
1487
|
-
this.#draggedWidth.set(null);
|
|
1488
|
-
if (width !== null) {
|
|
1489
|
-
this.subMenuWidthChange.emit(width);
|
|
1490
|
-
}
|
|
1491
|
-
}
|
|
1492
2165
|
/** Ширина, от которой отсчитывается тяга, когда своего выбора ещё нет: та, что нарисована. */
|
|
1493
2166
|
#measureSubMenuWidth() {
|
|
1494
2167
|
const panel = this.subMenuPanelRef() ?? null;
|
|
1495
2168
|
const width = panel?.nativeElement.getBoundingClientRect().width ?? 0;
|
|
1496
2169
|
return width > 0 ? width : SUB_MENU_WIDTH_MIN;
|
|
1497
2170
|
}
|
|
1498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list\n rtBlock=\"rtui-mobile-side-menu-list\"\n [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n @if (selectedSubMenu()?.length) {\n <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #mobileSubMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </div>\n } @else {\n <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n @for (item of menuItems(); track i; let i = $index) {\n <mat-list-item\n rtBlock=\"rtui-mobile-side-menu-item\"\n [rtNavigationDirective]=\"item?.link\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n (click)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n {{ item.icon }}\n </mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n <div rtElem=\"text\">{{ item.name }}</div>\n\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n }\n </div>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n} @else {\n <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list rtElem=\"list\">\n @for (item of menuItems(); track i; let i = $index) {\n <a\n rtBlock=\"rtui-side-menu-item\"\n tabindex=\"0\"\n [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"onClickMenu(item)\"\n (keydown.enter)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-item-button\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n <div rtElem=\"icon\">\n <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n </div>\n </mat-list-item>\n }\n\n @if (item?.name) {\n <div rtElem=\"title\">{{ item.name }}</div>\n }\n </a>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n\n <mat-drawer-container\n rtBlock=\"rtui-sub-side-menu\"\n [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n [hasBackdrop]=\"!isPinned()\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer\n #subMenuPanel\n rtBlock=\"rtui-sub-side-menu-content\"\n mode=\"side\"\n position=\"start\"\n [opened]=\"subMenuOpened()\"\n (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable [isScrollHintShown]=\"true\">\n <ng-container *rtuiScrollableHeader>\n @if (subMenuOpened()) {\n <div rtBlock=\"rtui-sub-side-menu-head\">\n <!--\n \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n -->\n <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #subMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(subMenuSearch.value)\"\n (keydown)=\"onSearchKeydown($event)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n <!--\n \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\n [outlined]=\"!isPinned()\"\n [variant]=\"isPinned() ? 'primary' : 'default'\"\n [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n [attr.aria-pressed]=\"isPinned()\"\n (clicked)=\"onSubMenuModeToggle()\" />\n </div>\n }\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n @if (subMenuOpened() && visibleSubMenuItems().length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"visibleSubMenuItems()\">\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </mat-nav-list>\n }\n </ng-container>\n </rtui-scrollable>\n </mat-drawer>\n </mat-drawer-container>\n\n @if (isPinned() && subMenuOpened()) {\n <!--\n \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n -->\n <div\n rtBlock=\"rtui-side-menu-resizer\"\n qa-dataid=\"side-menu-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeLabel\"\n (mousedown)=\"onResizeStart($event)\"></div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type:
|
|
2171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, RtuiSubMenuHoldService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list\n rtBlock=\"rtui-mobile-side-menu-list\"\n [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n @if (selectedSubMenu()?.length) {\n <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #mobileSubMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n <!-- \u0418\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435 \u2014 \u043F\u043E\u0434 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430 \u0438 \u043D\u0430\u0434 \u0441\u043F\u0438\u0441\u043A\u043E\u043C \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0438 \u043D\u0430 \u0448\u0438\u0440\u043E\u043A\u043E\u043C \u044D\u043A\u0440\u0430\u043D\u0435. -->\n <rtui-side-menu-favorites\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n\n @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </div>\n } @else {\n <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n @for (item of menuItems(); track i; let i = $index) {\n <mat-list-item\n rtBlock=\"rtui-mobile-side-menu-item\"\n [rtNavigationDirective]=\"item?.link\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n (click)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n {{ item.icon }}\n </mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n <div rtElem=\"text\">{{ item.name }}</div>\n\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n }\n </div>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n} @else {\n <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list rtElem=\"list\">\n @for (item of menuItems(); track i; let i = $index) {\n <a\n rtBlock=\"rtui-side-menu-item\"\n tabindex=\"0\"\n [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"onClickMenu(item)\"\n (keydown.enter)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-item-button\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n <div rtElem=\"icon\">\n <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n </div>\n </mat-list-item>\n }\n\n @if (item?.name) {\n <div rtElem=\"title\">{{ item.name }}</div>\n }\n </a>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n\n <mat-drawer-container\n rtBlock=\"rtui-sub-side-menu\"\n [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n [hasBackdrop]=\"!isPinned()\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer\n #subMenuPanel\n rtBlock=\"rtui-sub-side-menu-content\"\n mode=\"side\"\n position=\"start\"\n [opened]=\"subMenuOpened()\"\n (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable [isScrollHintShown]=\"true\">\n <ng-container *rtuiScrollableHeader>\n @if (subMenuOpened()) {\n <div rtBlock=\"rtui-sub-side-menu-head\">\n <!--\n \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n -->\n <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #subMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(subMenuSearch.value)\"\n (keydown)=\"onSearchKeydown($event)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n <!--\n \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\n [outlined]=\"!isPinned()\"\n [variant]=\"isPinned() ? 'primary' : 'default'\"\n [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n [attr.aria-pressed]=\"isPinned()\"\n (clicked)=\"onSubMenuModeToggle()\" />\n </div>\n }\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n <!--\n \u0418\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435 \u0441\u0442\u043E\u0438\u0442 \u043D\u0430\u0434 \u0441\u043F\u0438\u0441\u043A\u043E\u043C \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0438 \u043F\u0440\u043E\u043A\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043D\u0438\u043C: \u0432 \u0448\u0430\u043F\u043A\u0435\n \u0434\u043B\u0438\u043D\u043D\u044B\u0439 \u0431\u043B\u043E\u043A \u0441\u044A\u0435\u043B \u0431\u044B \u043C\u0435\u0441\u0442\u043E \u0441\u043F\u0438\u0441\u043A\u0430. \u0411\u043B\u043E\u043A \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C.\n -->\n @if (subMenuOpened()) {\n <rtui-side-menu-favorites\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n\n @if (subMenuOpened() && visibleSubMenuItems().length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"visibleSubMenuItems()\">\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </mat-nav-list>\n }\n </ng-container>\n </rtui-scrollable>\n </mat-drawer>\n </mat-drawer-container>\n\n @if (isPinned() && subMenuOpened()) {\n <!--\n \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n -->\n <div\n rtBlock=\"rtui-side-menu-resizer\"\n qa-dataid=\"side-menu-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeLabel\"\n (mousedown)=\"onResizeStart($event)\"></div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{--rt-side-menu-sub-menu-radius: var(--rt-side-menu-sub-menu-pinned-radius, 0);position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type:
|
|
1500
2173
|
// directives
|
|
1501
2174
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerFooterDirective, selector: "[rtuiScrollableFooter]" }, { kind: "directive", type: RtScrollToElementDirective, selector: "[rtScrollToElement]", inputs: ["rtScrollToElement", "elements"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtNavigationDirective, selector: "[rtNavigationDirective]", inputs: ["rtNavigationDirective"] }, { kind: "component", type:
|
|
1502
2175
|
// components
|
|
1503
|
-
RtuiScrollableContainerComponent, selector: "rtui-scrollable", inputs: ["isScrollHintShown"] }, { kind: "component", type: RtuiButtonComponent, selector: "rtui-button", inputs: ["type", "design", "variant", "appearance", "size", "radius", "icon", "iconPosition", "iconSize", "text", "loading", "disabled", "outlined", "fullWidth", "spinnerDiameter"], outputs: ["clicked"] }, { kind: "component", type: RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isButtonShown", "tooltip", "tooltipPosition"], outputs: ["keydownAction", "clickAction"] }, { kind: "component", type: RtuiSideMenuSubItemComponent, selector: "rtui-side-menu-sub-item", inputs: ["item", "isSubMenuXScrollEnabled", "isSubMenuIconsOutlined", "isSubMenuButtonIconsOutlined", "isSubMenuTooltipsShown"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2176
|
+
RtuiScrollableContainerComponent, selector: "rtui-scrollable", inputs: ["isScrollHintShown"] }, { kind: "component", type: RtuiButtonComponent, selector: "rtui-button", inputs: ["type", "design", "variant", "appearance", "size", "radius", "icon", "iconPosition", "iconSize", "text", "loading", "disabled", "outlined", "fullWidth", "spinnerDiameter"], outputs: ["clicked"] }, { kind: "component", type: RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isButtonShown", "tooltip", "tooltipPosition"], outputs: ["keydownAction", "clickAction"] }, { kind: "component", type: RtuiSideMenuSubItemComponent, selector: "rtui-side-menu-sub-item", inputs: ["item", "isSubMenuXScrollEnabled", "isSubMenuIconsOutlined", "isSubMenuButtonIconsOutlined", "isSubMenuTooltipsShown", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "component", type: RtuiSideMenuFavoritesComponent, selector: "rtui-side-menu-favorites", inputs: ["isSubMenuIconsOutlined", "isSubMenuButtonIconsOutlined", "isSubMenuTooltipsShown"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1504
2177
|
}
|
|
1505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSideMenuComponent, decorators: [{
|
|
1506
2179
|
type: Component,
|
|
1507
2180
|
args: [{ selector: 'rtui-side-menu', host: {
|
|
1508
2181
|
class: BEM_BLOCK$s,
|
|
@@ -1512,7 +2185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1512
2185
|
// Ширина подменю приходит переменной оформления: правило стилей стоит на ней в трёх
|
|
1513
2186
|
// местах разом, и правка одной переменной двигает их все.
|
|
1514
2187
|
'[style.--rt-side-menu-sub-menu-dragged-width]': 'subMenuWidthStyle()',
|
|
1515
|
-
}, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2188
|
+
}, providers: [BreakpointService, RtuiSubMenuHoldService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1516
2189
|
NgTemplateOutlet,
|
|
1517
2190
|
MatSidenavModule,
|
|
1518
2191
|
MatFormField,
|
|
@@ -1538,12 +2211,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1538
2211
|
RtuiButtonComponent,
|
|
1539
2212
|
RtuiClearButtonComponent,
|
|
1540
2213
|
RtuiSideMenuSubItemComponent,
|
|
1541
|
-
], template: "@if (narrow()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list\n rtBlock=\"rtui-mobile-side-menu-list\"\n [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n @if (selectedSubMenu()?.length) {\n <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #mobileSubMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </div>\n } @else {\n <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n @for (item of menuItems(); track i; let i = $index) {\n <mat-list-item\n rtBlock=\"rtui-mobile-side-menu-item\"\n [rtNavigationDirective]=\"item?.link\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n (click)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n {{ item.icon }}\n </mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n <div rtElem=\"text\">{{ item.name }}</div>\n\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n }\n </div>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n} @else {\n <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list rtElem=\"list\">\n @for (item of menuItems(); track i; let i = $index) {\n <a\n rtBlock=\"rtui-side-menu-item\"\n tabindex=\"0\"\n [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"onClickMenu(item)\"\n (keydown.enter)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-item-button\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n <div rtElem=\"icon\">\n <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n </div>\n </mat-list-item>\n }\n\n @if (item?.name) {\n <div rtElem=\"title\">{{ item.name }}</div>\n }\n </a>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n\n <mat-drawer-container\n rtBlock=\"rtui-sub-side-menu\"\n [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n [hasBackdrop]=\"!isPinned()\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer\n #subMenuPanel\n rtBlock=\"rtui-sub-side-menu-content\"\n mode=\"side\"\n position=\"start\"\n [opened]=\"subMenuOpened()\"\n (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable [isScrollHintShown]=\"true\">\n <ng-container *rtuiScrollableHeader>\n @if (subMenuOpened()) {\n <div rtBlock=\"rtui-sub-side-menu-head\">\n <!--\n \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n -->\n <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #subMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(subMenuSearch.value)\"\n (keydown)=\"onSearchKeydown($event)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n <!--\n \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\n [outlined]=\"!isPinned()\"\n [variant]=\"isPinned() ? 'primary' : 'default'\"\n [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n [attr.aria-pressed]=\"isPinned()\"\n (clicked)=\"onSubMenuModeToggle()\" />\n </div>\n }\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n @if (subMenuOpened() && visibleSubMenuItems().length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"visibleSubMenuItems()\">\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </mat-nav-list>\n }\n </ng-container>\n </rtui-scrollable>\n </mat-drawer>\n </mat-drawer-container>\n\n @if (isPinned() && subMenuOpened()) {\n <!--\n \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n -->\n <div\n rtBlock=\"rtui-side-menu-resizer\"\n qa-dataid=\"side-menu-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeLabel\"\n (mousedown)=\"onResizeStart($event)\"></div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
|
|
2214
|
+
RtuiSideMenuFavoritesComponent,
|
|
2215
|
+
], template: "@if (narrow()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list\n rtBlock=\"rtui-mobile-side-menu-list\"\n [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n @if (selectedSubMenu()?.length) {\n <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #mobileSubMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n <!-- \u0418\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435 \u2014 \u043F\u043E\u0434 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430 \u0438 \u043D\u0430\u0434 \u0441\u043F\u0438\u0441\u043A\u043E\u043C \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0438 \u043D\u0430 \u0448\u0438\u0440\u043E\u043A\u043E\u043C \u044D\u043A\u0440\u0430\u043D\u0435. -->\n <rtui-side-menu-favorites\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n\n @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </div>\n } @else {\n <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n @for (item of menuItems(); track i; let i = $index) {\n <mat-list-item\n rtBlock=\"rtui-mobile-side-menu-item\"\n [rtNavigationDirective]=\"item?.link\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n (click)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n {{ item.icon }}\n </mat-icon>\n }\n\n @if (item?.name) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n <div rtElem=\"text\">{{ item.name }}</div>\n\n @if (item?.iconButton?.icon) {\n <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n </div>\n }\n </div>\n }\n </mat-list-item>\n }\n </div>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n} @else {\n <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n @if (headerTpl()) {\n <ng-container *rtuiScrollableHeader>\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n </ng-container>\n }\n\n @if (menuItems().length) {\n <ng-container *rtuiScrollableContent>\n <mat-nav-list rtElem=\"list\">\n @for (item of menuItems(); track i; let i = $index) {\n <a\n rtBlock=\"rtui-side-menu-item\"\n tabindex=\"0\"\n [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"onClickMenu(item)\"\n (keydown.enter)=\"onClickMenu(item)\">\n @if (item?.icon) {\n <mat-list-item\n rtBlock=\"rtui-side-menu-item-button\"\n [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n <div rtElem=\"icon\">\n <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n </div>\n </mat-list-item>\n }\n\n @if (item?.name) {\n <div rtElem=\"title\">{{ item.name }}</div>\n }\n </a>\n }\n </mat-nav-list>\n </ng-container>\n }\n\n @if (footerTpl()) {\n <ng-container *rtuiScrollableFooter>\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </ng-container>\n }\n </rtui-scrollable>\n\n <mat-drawer-container\n rtBlock=\"rtui-sub-side-menu\"\n [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n [hasBackdrop]=\"!isPinned()\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer\n #subMenuPanel\n rtBlock=\"rtui-sub-side-menu-content\"\n mode=\"side\"\n position=\"start\"\n [opened]=\"subMenuOpened()\"\n (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable [isScrollHintShown]=\"true\">\n <ng-container *rtuiScrollableHeader>\n @if (subMenuOpened()) {\n <div rtBlock=\"rtui-sub-side-menu-head\">\n <!--\n \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n -->\n <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n <input\n #subMenuSearch\n matInput\n type=\"search\"\n qa-dataid=\"side-menu-search\"\n [attr.aria-label]=\"searchLabel\"\n [placeholder]=\"searchLabel\"\n [value]=\"subMenuQuery()\"\n (focus)=\"onSearchHold()\"\n (input)=\"onSubMenuSearch(subMenuSearch.value)\"\n (keydown)=\"onSearchKeydown($event)\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n </mat-form-field>\n\n <!--\n \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\n [outlined]=\"!isPinned()\"\n [variant]=\"isPinned() ? 'primary' : 'default'\"\n [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n [attr.aria-pressed]=\"isPinned()\"\n (clicked)=\"onSubMenuModeToggle()\" />\n </div>\n }\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n }\n\n <!--\n \u0418\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435 \u0441\u0442\u043E\u0438\u0442 \u043D\u0430\u0434 \u0441\u043F\u0438\u0441\u043A\u043E\u043C \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0438 \u043F\u0440\u043E\u043A\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043D\u0438\u043C: \u0432 \u0448\u0430\u043F\u043A\u0435\n \u0434\u043B\u0438\u043D\u043D\u044B\u0439 \u0431\u043B\u043E\u043A \u0441\u044A\u0435\u043B \u0431\u044B \u043C\u0435\u0441\u0442\u043E \u0441\u043F\u0438\u0441\u043A\u0430. \u0411\u043B\u043E\u043A \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C.\n -->\n @if (subMenuOpened()) {\n <rtui-side-menu-favorites\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n\n @if (subMenuOpened() && visibleSubMenuItems().length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"visibleSubMenuItems()\">\n @for (item of visibleSubMenuItems(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n (clickSubMenuAction)=\"onClickSubMenu($event)\"\n (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n }\n </mat-nav-list>\n }\n </ng-container>\n </rtui-scrollable>\n </mat-drawer>\n </mat-drawer-container>\n\n @if (isPinned() && subMenuOpened()) {\n <!--\n \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n -->\n <div\n rtBlock=\"rtui-side-menu-resizer\"\n qa-dataid=\"side-menu-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeLabel\"\n (mousedown)=\"onResizeStart($event)\"></div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{--rt-side-menu-sub-menu-radius: var(--rt-side-menu-sub-menu-pinned-radius, 0);position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
|
|
1542
2216
|
}], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
|
|
1543
2217
|
read: TemplateRef,
|
|
1544
2218
|
}, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
|
|
1545
2219
|
read: TemplateRef,
|
|
1546
|
-
}, isSignal: true }] }], subMenuRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatDrawer), { isSignal: true }] }], subMenuPanelRef: [{ type: i0.ViewChild, args: ['subMenuPanel', { ...{ read: ElementRef }, isSignal: true }] }], activeMenuIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuIds", required: true }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], subMenuMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuMode", required: false }] }], subMenuWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuWidth", required: false }] }], isSubMenuXScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuXScrollEnabled", required: false }] }], isMainMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMainMenuIconsOutlined", required: false }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], subMenuModeChange: [{ type: i0.Output, args: ["subMenuModeChange"] }], subMenuWidthChange: [{ type: i0.Output, args: ["subMenuWidthChange"] }], closeMobileMenuAction: [{ type: i0.Output, args: ["closeMobileMenuAction"] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
|
|
2220
|
+
}, isSignal: true }] }], subMenuRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatDrawer), { isSignal: true }] }], subMenuPanelRef: [{ type: i0.ViewChild, args: ['subMenuPanel', { ...{ read: ElementRef }, isSignal: true }] }], activeMenuIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuIds", required: true }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], subMenuMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuMode", required: false }] }], subMenuWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuWidth", required: false }] }], menuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuId", required: false }] }], isSubMenuXScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuXScrollEnabled", required: false }] }], isMainMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMainMenuIconsOutlined", required: false }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], subMenuModeChange: [{ type: i0.Output, args: ["subMenuModeChange"] }], subMenuWidthChange: [{ type: i0.Output, args: ["subMenuWidthChange"] }], closeMobileMenuAction: [{ type: i0.Output, args: ["closeMobileMenuAction"] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
|
|
1547
2221
|
|
|
1548
2222
|
class AsideRef {
|
|
1549
2223
|
constructor(answer, overlayRef, component, position, data) {
|
|
@@ -1615,10 +2289,10 @@ class RtuiAsidePanelComponent {
|
|
|
1615
2289
|
});
|
|
1616
2290
|
return new ComponentPortal(asideRef.component, null, injector);
|
|
1617
2291
|
}
|
|
1618
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1619
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
2292
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiAsidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2293
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RtuiAsidePanelComponent, isStandalone: true, selector: "rtui-aside-panel", host: { properties: { "class.rtui-aside-panel--left": "position === 'left'", "class.rtui-aside-panel--right": "position === 'right'", "class.rtui-aside-panel--open": "opened()" }, classAttribute: "rtui-aside-panel" }, ngImport: i0, template: "<div rtBlock=\"c-aside\">\n <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10);--rt-aside-host-background-color: var(--rt-bg-base-base);--rt-aside-header-padding: 2rem;--rt-aside-header-mobile-padding: 1rem;--rt-aside-header-back-button-margin-right: 1rem;--rt-aside-header-title-font-size: 1.5rem;--rt-aside-header-title-line-height: 1.1;--rt-aside-header-title-font-weight: 600;--rt-aside-header-description-font-size: 1rem;--rt-aside-header-description-margin-bottom: .25rem;--rt-aside-header-description-color: var(--rt-text-base-secondary);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--rt-text-base-secondary);--rt-aside-header-actions-margin-left: 1rem;--rt-aside-header-action-button-margin-left: .75rem;--rt-aside-content-padding: 0 2rem;--rt-aside-content-mobile-padding: 0 1rem;--rt-aside-footer-padding: 2rem;--rt-aside-footer-margin-left-between-buttons: 1rem;--rt-aside-footer-mobile-padding: 1rem;--rt-aside-error-box-height: 2rem;--rt-aside-error-box-padding: .5rem;--rt-aside-error-box-margin: 2rem 0 2rem 0;--rt-aside-error-box-border: 1px solid var(--rt-border-accent-danger-soft);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--rt-text-accent-danger-soft);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--rt-text-base-strong);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--rt-text-accent-danger);--rt-aside-slide-duration: .2s;--rt-aside-slide-timing: ease-in;--rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.rtui-aside-panel{display:block;transition:transform var(--rt-aside-slide-duration) var(--rt-aside-slide-timing)}.rtui-aside-panel--left{transform:translate(-100%)}.rtui-aside-panel--right{transform:translate(100%)}.rtui-aside-panel--open{transform:translate(0)}.icon-badge{position:absolute!important}.title-badge{top:-.5rem;margin-left:var(--rt-spacing-4)}.icon-badge .mat-badge-content,.title-badge .mat-badge-content{background-color:var(--rt-aside-tab-badge-color)}.icon-badge.--incorrect .mat-badge-content,.title-badge.--incorrect .mat-badge-content{background-color:var(--rt-aside-tab-badge-incorrect-color)}.c-aside{position:relative;width:var(--rt-aside-host-width);height:100vh;max-height:100vh;background-color:var(--rt-aside-host-background-color);box-shadow:var(--rt-aside-host-box-shadow)}.c-aside .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{width:var(--rt-aside-tab-indicator-width)}@media screen and (max-width:599px){.c-aside{width:100vw}}.c-aside-header{padding:var(--rt-aside-header-padding)}.c-aside-header .back-button{margin-right:var(--rt-aside-header-back-button-margin-right)}.c-aside-header .c-aside-title{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;justify-content:center}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);color:var(--rt-aside-header-description-color);font-size:var(--rt-aside-header-description-font-size)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);font-weight:var(--rt-aside-header-title-font-weight);line-height:var(--rt-aside-header-title-line-height)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);color:var(--rt-aside-header-addition-color);font-size:var(--rt-aside-header-addition-font-size)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap}.c-aside-header .c-aside-actions{margin-left:var(--rt-aside-header-actions-margin-left)}.c-aside-header .c-aside-actions__action{margin-left:var(--rt-aside-header-action-button-margin-left)}@media screen and (max-width:599px){.c-aside-header{padding:var(--rt-aside-header-mobile-padding)}}.c-aside-content{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{position:sticky;z-index:1000;top:0;background:var(--rt-bg-base-base)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-aside-footer-padding)}.c-aside-footer .c-aside-footer-btn__title{text-transform:uppercase}.c-aside-footer .c-aside-footer-btn+.c-aside-footer-btn{margin-left:var(--rt-aside-footer-margin-left-between-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1620
2294
|
}
|
|
1621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiAsidePanelComponent, decorators: [{
|
|
1622
2296
|
type: Component,
|
|
1623
2297
|
args: [{ selector: 'rtui-aside-panel', host: {
|
|
1624
2298
|
class: BEM_BLOCK$r,
|
|
@@ -1771,38 +2445,38 @@ class RtAsideService {
|
|
|
1771
2445
|
});
|
|
1772
2446
|
return new ComponentPortal(RtuiAsidePanelComponent, null, injector);
|
|
1773
2447
|
}
|
|
1774
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1775
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
2448
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2449
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideService }); }
|
|
1776
2450
|
}
|
|
1777
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideService, decorators: [{
|
|
1778
2452
|
type: Injectable
|
|
1779
2453
|
}], ctorParameters: () => [] });
|
|
1780
2454
|
|
|
1781
2455
|
class RtuiToolbarLeftDirective {
|
|
1782
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1783
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2456
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2457
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiToolbarLeftDirective, isStandalone: true, selector: "[rtuiToolbarLeft]", ngImport: i0 }); }
|
|
1784
2458
|
}
|
|
1785
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarLeftDirective, decorators: [{
|
|
1786
2460
|
type: Directive,
|
|
1787
2461
|
args: [{
|
|
1788
2462
|
selector: '[rtuiToolbarLeft]',
|
|
1789
2463
|
}]
|
|
1790
2464
|
}] });
|
|
1791
2465
|
class RtuiToolbarCenterDirective {
|
|
1792
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1793
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2466
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2467
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiToolbarCenterDirective, isStandalone: true, selector: "[rtuiToolbarCenter]", ngImport: i0 }); }
|
|
1794
2468
|
}
|
|
1795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2469
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarCenterDirective, decorators: [{
|
|
1796
2470
|
type: Directive,
|
|
1797
2471
|
args: [{
|
|
1798
2472
|
selector: '[rtuiToolbarCenter]',
|
|
1799
2473
|
}]
|
|
1800
2474
|
}] });
|
|
1801
2475
|
class RtuiToolbarRightDirective {
|
|
1802
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1803
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2477
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiToolbarRightDirective, isStandalone: true, selector: "[rtuiToolbarRight]", ngImport: i0 }); }
|
|
1804
2478
|
}
|
|
1805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarRightDirective, decorators: [{
|
|
1806
2480
|
type: Directive,
|
|
1807
2481
|
args: [{
|
|
1808
2482
|
selector: '[rtuiToolbarRight]',
|
|
@@ -1818,10 +2492,10 @@ class RtuiToolbarComponent {
|
|
|
1818
2492
|
this.rightToolTpl = contentChild(RtuiToolbarRightDirective, { ...(ngDevMode ? { debugName: "rightToolTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
1819
2493
|
this.sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1820
2494
|
}
|
|
1821
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2495
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2496
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiToolbarComponent, isStandalone: true, selector: "rtui-toolbar", inputs: { isVisibleToolbar: { classPropertyName: "isVisibleToolbar", publicName: "isVisibleToolbar", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-toolbar" }, queries: [{ propertyName: "leftToolTpl", first: true, predicate: RtuiToolbarLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerToolTpl", first: true, predicate: RtuiToolbarCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightToolTpl", first: true, predicate: RtuiToolbarRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n <div rtBlock=\"bars\">\n @if (leftToolTpl()) {\n <div rtElem=\"bar\" rtMod=\"left\">\n <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n </div>\n }\n\n <div rtElem=\"bar\" rtMod=\"center\">\n <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n </div>\n\n @if (rightToolTpl()) {\n <div rtElem=\"bar\" rtMod=\"right\">\n <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n </div>\n }\n </div>\n </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1823
2497
|
}
|
|
1824
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToolbarComponent, decorators: [{
|
|
1825
2499
|
type: Component,
|
|
1826
2500
|
args: [{ selector: 'rtui-toolbar', host: { class: BEM_BLOCK$q }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatToolbar, NgTemplateOutlet, BlockDirective, ElemDirective, ModDirective], template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n <div rtBlock=\"bars\">\n @if (leftToolTpl()) {\n <div rtElem=\"bar\" rtMod=\"left\">\n <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n </div>\n }\n\n <div rtElem=\"bar\" rtMod=\"center\">\n <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n </div>\n\n @if (rightToolTpl()) {\n <div rtElem=\"bar\" rtMod=\"right\">\n <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n </div>\n }\n </div>\n </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"] }]
|
|
1827
2501
|
}], propDecorators: { isVisibleToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisibleToolbar", required: false }] }], leftToolTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiToolbarLeftDirective), { ...{
|
|
@@ -1848,12 +2522,12 @@ class AsideErrorBoxComponent {
|
|
|
1848
2522
|
this.isErrorCopied.set(true);
|
|
1849
2523
|
setTimeout(() => this.isErrorCopied.set(false), 1000);
|
|
1850
2524
|
}
|
|
1851
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1852
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2525
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AsideErrorBoxComponent, isStandalone: true, selector: "rtui-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "rtui-aside-error-box" }, ngImport: i0, template: "<div rtBlock=\"aside-error-box\">\n <div rtElem=\"title\">Request Error</div>\n\n <button\n type=\"button\"\n rtBlock=\"aside-error-box-button\"\n [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n [rtMod]=\"{ complete: isErrorCopied() }\"\n (click)=\"onCopyToClipboard()\">\n @if (isErrorCopied()) {\n <mat-icon rtElem=\"icon\">done</mat-icon>\n }\n\n <div rtElem=\"title\">{{ isErrorCopied() ? 'Copied' : 'Copy error info' }}</div>\n </button>\n</div>\n", styles: [":host{display:flex;width:100%}:host .aside-error-box{display:flex;width:100%;height:var(--rt-aside-error-box-height);align-items:center;justify-content:space-between;padding:var(--rt-aside-error-box-padding);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius);margin:var(--rt-aside-error-box-margin)}:host .aside-error-box__title{color:var(--rt-aside-error-box-title-font-color);font-size:var(--rt-aside-error-box-title-font-size)}:host .aside-error-box .aside-error-box-button__icon{margin-right:var(--rt-spacing-8)}:host .aside-error-box .aside-error-box-button__title{color:var(--rt-aside-error-box-button-font-color);font-size:var(--rt-aside-error-box-button-font-size)}:host .aside-error-box .aside-error-box-button--complete{background-color:transparent;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
1853
2527
|
// bem
|
|
1854
2528
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1855
2529
|
}
|
|
1856
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AsideErrorBoxComponent, decorators: [{
|
|
1857
2531
|
type: Component,
|
|
1858
2532
|
args: [{ selector: 'rtui-aside-error-box', host: { class: BEM_BLOCK$p }, imports: [
|
|
1859
2533
|
ModDirective,
|
|
@@ -1867,10 +2541,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1867
2541
|
}], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }] } });
|
|
1868
2542
|
|
|
1869
2543
|
class RtuiAsideContainerHeaderDirective {
|
|
1870
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1871
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiAsideContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2545
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiAsideContainerHeaderDirective, isStandalone: true, selector: "[rtuiAsideHeader]", ngImport: i0 }); }
|
|
1872
2546
|
}
|
|
1873
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiAsideContainerHeaderDirective, decorators: [{
|
|
1874
2548
|
type: Directive,
|
|
1875
2549
|
args: [{
|
|
1876
2550
|
selector: '[rtuiAsideHeader]',
|
|
@@ -1913,8 +2587,8 @@ class RtuiAsideContainerComponent {
|
|
|
1913
2587
|
onHeaderActionClick(buttonName) {
|
|
1914
2588
|
this.headerAction.emit(buttonName);
|
|
1915
2589
|
}
|
|
1916
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1917
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2590
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiAsideContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2591
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiAsideContainerComponent, isStandalone: true, selector: "rtui-aside-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isSubmitButtonDisabled: { classPropertyName: "isSubmitButtonDisabled", publicName: "isSubmitButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isFooterShown: { classPropertyName: "isFooterShown", publicName: "isFooterShown", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, isRequestErrorShown: { classPropertyName: "isRequestErrorShown", publicName: "isRequestErrorShown", isSignal: true, isRequired: false, transformFunction: null }, headerActionsButtons: { classPropertyName: "headerActionsButtons", publicName: "headerActionsButtons", isSignal: true, isRequired: false, transformFunction: null }, requestError: { classPropertyName: "requestError", publicName: "requestError", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTitle: { classPropertyName: "submitButtonTitle", publicName: "submitButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonTitle: { classPropertyName: "cancelButtonTitle", publicName: "cancelButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTooltip: { classPropertyName: "submitButtonTooltip", publicName: "submitButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", cancelAction: "cancelAction", headerAction: "headerAction" }, host: { classAttribute: "c-aside" }, providers: [BreakpointService], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiAsideContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (pending()) {\n <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <ng-container *rtuiScrollableHeader>\n <div rtBlock=\"c-aside-header\">\n <rtui-toolbar>\n <ng-container *rtuiToolbarLeft>\n <button\n rtBlock=\"back-button\"\n aria-label=\"Icon-button\"\n mat-icon-button\n matTooltip=\"Go back\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"narrow()\"\n [disableRipple]=\"true\"\n (click)=\"onCancel()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n </ng-container>\n\n <ng-container *rtuiToolbarCenter>\n <div rtBlock=\"c-aside-title\">\n @if (headerTpl()) {\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n } @else {\n {{ title() }}\n }\n </div>\n </ng-container>\n\n <ng-container *rtuiToolbarRight>\n <div rtBlock=\"c-aside-actions\">\n @if (headerActionsButtons()?.length) {\n @for (button of headerActionsButtons(); track button) {\n <button\n rtElem=\"action\"\n aria-label=\"Icon-button\"\n mat-icon-button\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"left\"\n [matTooltip]=\"button.tooltip\"\n [matTooltipDisabled]=\"narrow()\"\n [disableRipple]=\"true\"\n [disabled]=\"button?.disabled\"\n (click)=\"onHeaderActionClick(button.name)\">\n <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n </button>\n }\n }\n </div>\n </ng-container>\n </rtui-toolbar>\n\n @if (isRequestErrorShown()) {\n <rtui-aside-error-box [error]=\"requestError()\" />\n }\n </div>\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n <div rtBlock=\"c-aside-content\">\n <ng-content />\n </div>\n </ng-container>\n\n @if (isFooterShown()) {\n <ng-container *rtuiScrollableFooter>\n <div rtBlock=\"c-aside-footer\">\n <div rtBlock=\"c-aside-footer-btn\">\n <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n {{ cancelButtonTitle() }}\n </button>\n </div>\n\n <div rtBlock=\"c-aside-footer-btn\">\n <button\n mat-flat-button\n type=\"button\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"left\"\n [matTooltip]=\"submitButtonTooltip()\"\n [matTooltipDisabled]=\"!isSubmitButtonDisabled() || narrow()\"\n [disabled]=\"isSubmitButtonDisabled()\"\n (click)=\"onSubmit()\">\n <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n </button>\n </div>\n </div>\n </ng-container>\n }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
1918
2592
|
// material
|
|
1919
2593
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type:
|
|
1920
2594
|
// standalone components
|
|
@@ -1924,7 +2598,7 @@ class RtuiAsideContainerComponent {
|
|
|
1924
2598
|
// bem
|
|
1925
2599
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1926
2600
|
}
|
|
1927
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2601
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiAsideContainerComponent, decorators: [{
|
|
1928
2602
|
type: Component,
|
|
1929
2603
|
args: [{ selector: 'rtui-aside-container', providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1930
2604
|
RouterLink,
|
|
@@ -1971,14 +2645,14 @@ class RtuiMultiButtonComponent {
|
|
|
1971
2645
|
this.changeActiveAction.emit(this.activeAction());
|
|
1972
2646
|
}
|
|
1973
2647
|
}
|
|
1974
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1975
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2648
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiMultiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2649
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiMultiButtonComponent, isStandalone: true, selector: "rtui-multi-button", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, activeAction: { classPropertyName: "activeAction", publicName: "activeAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeAction: "activeActionChange", changeActiveAction: "changeActiveAction" }, host: { classAttribute: "rtui-multi-button" }, ngImport: i0, template: "@if (actions()?.length) {\n <div rtBlock=\"rtui-multibutton-actions\">\n @for (action of actions(); track action) {\n <button rtElem=\"action\" type=\"button\" [rtMod]=\"{ active: action === activeAction() }\" (click)=\"onSetActiveAction(action)\">\n {{ action | titlecase }}\n </button>\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-rtui-multibutton-base-display: inline-flex;--rt-rtui-multibutton-base-flex-flow: row wrap;--rt-rtui-multibutton-base-radius: 8px;--rt-rtui-multibutton-base-padding: 4px;--rt-rtui-multibutton-base-background-color: var(--rt-bg-base-hover);--rt-rtui-multibutton-action-base-padding: 4px 8px;--rt-rtui-multibutton-action-base-radius: 8px;--rt-rtui-multibutton-action-base-border: 0;--rt-rtui-multibutton-action-base-font-size: 12px;--rt-rtui-multibutton-action-base-font-weight: 600;--rt-rtui-multibutton-action-base-color: var(--rt-text-base-secondary);--rt-rtui-multibutton-action-base-background-color: transparent;--rt-rtui-multibutton-action-base-transition: background-color .15s, color .15s;--rt-rtui-multibutton-action-base-cursor: pointer;--rt-rtui-multibutton-action-hover-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-background-color: var(--rt-bg-base-strong);--rt-rtui-multibutton-action-active-cursor: default;--rt-rtui-multibutton-action-focus-visible-outline: 2px dashed var(--rt-border-focus);--rt-rtui-multibutton-action-focus-visible-outline-offset: -2px;--rt-rtui-multibutton-action-disabled-pointer-events: none;--rt-rtui-multibutton-action-disabled-cursor: default;--rt-rtui-multibutton-action-disabled-opacity: .75}:host .rtui-multibutton-actions{display:var(--rt-rtui-multibutton-base-display);flex-flow:var(--rt-rtui-multibutton-base-flex-flow);padding:var(--rt-rtui-multibutton-base-padding);border-radius:var(--rt-rtui-multibutton-base-radius);background-color:var(--rt-rtui-multibutton-base-background-color)}:host .rtui-multibutton-actions__action{padding:var(--rt-rtui-multibutton-action-base-padding);border:var(--rt-rtui-multibutton-action-base-border);border-radius:var(--rt-rtui-multibutton-action-base-radius);background-color:var(--rt-rtui-multibutton-action-base-background-color);color:var(--rt-rtui-multibutton-action-base-color);cursor:var(--rt-rtui-multibutton-action-base-cursor);font-size:var(--rt-rtui-multibutton-action-base-font-size);font-weight:var(--rt-rtui-multibutton-action-base-font-weight);transition:var(--rt-rtui-multibutton-action-base-transition)}:host .rtui-multibutton-actions__action--active{background-color:var(--rt-rtui-multibutton-action-active-background-color);color:var(--rt-rtui-multibutton-action-active-color);cursor:var(--rt-rtui-multibutton-action-active-cursor)}:host .rtui-multibutton-actions__action:not(:host .rtui-multibutton-actions__action--active):hover{color:var(--rt-rtui-multibutton-action-hover-color)}:host .rtui-multibutton-actions__action:focus{outline:none}:host .rtui-multibutton-actions__action:focus-visible{outline:var(--rt-rtui-multibutton-action-focus-visible-outline);outline-offset:var(--rt-rtui-multibutton-action-focus-visible-outline-offset)}:host .rtui-multibutton-actions__action:disabled{cursor:var(--rt-rtui-multibutton-action-disabled-cursor);opacity:var(--rt-rtui-multibutton-action-disabled-opacity);pointer-events:var(--rt-rtui-multibutton-action-disabled-pointer-events)}\n"], dependencies: [{ kind: "directive", type:
|
|
1976
2650
|
// rt-tools
|
|
1977
2651
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type:
|
|
1978
2652
|
// pipes
|
|
1979
2653
|
TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1980
2654
|
}
|
|
1981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2655
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiMultiButtonComponent, decorators: [{
|
|
1982
2656
|
type: Component,
|
|
1983
2657
|
args: [{ selector: 'rtui-multi-button', host: { class: BEM_BLOCK$n }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1984
2658
|
// pipes
|
|
@@ -1991,30 +2665,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1991
2665
|
}], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], activeAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeAction", required: false }] }, { type: i0.Output, args: ["activeActionChange"] }], changeActiveAction: [{ type: i0.Output, args: ["changeActiveAction"] }] } });
|
|
1992
2666
|
|
|
1993
2667
|
class RtuiHeaderLeftDirective {
|
|
1994
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1995
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2669
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiHeaderLeftDirective, isStandalone: true, selector: "[rtuiHeaderLeft]", ngImport: i0 }); }
|
|
1996
2670
|
}
|
|
1997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderLeftDirective, decorators: [{
|
|
1998
2672
|
type: Directive,
|
|
1999
2673
|
args: [{
|
|
2000
2674
|
selector: '[rtuiHeaderLeft]',
|
|
2001
2675
|
}]
|
|
2002
2676
|
}] });
|
|
2003
2677
|
class RtuiHeaderCenterDirective {
|
|
2004
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2005
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2678
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2679
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiHeaderCenterDirective, isStandalone: true, selector: "[rtuiHeaderCenter]", ngImport: i0 }); }
|
|
2006
2680
|
}
|
|
2007
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderCenterDirective, decorators: [{
|
|
2008
2682
|
type: Directive,
|
|
2009
2683
|
args: [{
|
|
2010
2684
|
selector: '[rtuiHeaderCenter]',
|
|
2011
2685
|
}]
|
|
2012
2686
|
}] });
|
|
2013
2687
|
class RtuiHeaderRightDirective {
|
|
2014
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2015
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2688
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2689
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiHeaderRightDirective, isStandalone: true, selector: "[rtuiHeaderRight]", ngImport: i0 }); }
|
|
2016
2690
|
}
|
|
2017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderRightDirective, decorators: [{
|
|
2018
2692
|
type: Directive,
|
|
2019
2693
|
args: [{
|
|
2020
2694
|
selector: '[rtuiHeaderRight]',
|
|
@@ -2039,14 +2713,14 @@ class RtuiHeaderComponent {
|
|
|
2039
2713
|
this.openMobileMenuAction.emit();
|
|
2040
2714
|
}
|
|
2041
2715
|
}
|
|
2042
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2043
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2716
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2717
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiHeaderComponent, isStandalone: true, selector: "rtui-header", inputs: { isMobileMenuButtonShown: { classPropertyName: "isMobileMenuButtonShown", publicName: "isMobileMenuButtonShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openMobileMenuAction: "openMobileMenuAction" }, host: { classAttribute: "rtui-header" }, providers: [BreakpointService], queries: [{ propertyName: "leftHeaderTpl", first: true, predicate: RtuiHeaderLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerHeaderTpl", first: true, predicate: RtuiHeaderCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightHeaderTpl", first: true, predicate: RtuiHeaderRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<rtui-toolbar>\n <ng-container *rtuiToolbarLeft>\n @if (narrow() && isMobileMenuButtonShown()) {\n <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n\n @if (leftHeaderTpl()) {\n <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n }\n </ng-container>\n\n @if (centerHeaderTpl()) {\n <ng-container *rtuiToolbarCenter>\n <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n </ng-container>\n }\n\n @if (rightHeaderTpl()) {\n <ng-container *rtuiToolbarRight>\n <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n </ng-container>\n }\n</rtui-toolbar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
2044
2718
|
// BEM
|
|
2045
2719
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type:
|
|
2046
2720
|
// Ui-kit
|
|
2047
2721
|
RtuiToolbarComponent, selector: "rtui-toolbar", inputs: ["isVisibleToolbar", "sticky"] }, { kind: "directive", type: RtuiToolbarLeftDirective, selector: "[rtuiToolbarLeft]" }, { kind: "directive", type: RtuiToolbarCenterDirective, selector: "[rtuiToolbarCenter]" }, { kind: "directive", type: RtuiToolbarRightDirective, selector: "[rtuiToolbarRight]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2048
2722
|
}
|
|
2049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2723
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiHeaderComponent, decorators: [{
|
|
2050
2724
|
type: Component,
|
|
2051
2725
|
args: [{ selector: 'rtui-header', host: { class: BEM_BLOCK$m }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2052
2726
|
NgTemplateOutlet,
|
|
@@ -2214,10 +2888,10 @@ class RtTableConfigService {
|
|
|
2214
2888
|
defaultConfig.length === savedConfig.length &&
|
|
2215
2889
|
areArraysEqual(defaultConfig.map((el) => el.propName).toSorted(comparePropNames), savedConfig.map((el) => el.propName).toSorted(comparePropNames)));
|
|
2216
2890
|
}
|
|
2217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2218
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
2891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2892
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableConfigService }); }
|
|
2219
2893
|
}
|
|
2220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableConfigService, decorators: [{
|
|
2221
2895
|
type: Injectable
|
|
2222
2896
|
}], ctorParameters: () => [] });
|
|
2223
2897
|
|
|
@@ -2300,8 +2974,8 @@ class TableBaseCellComponent {
|
|
|
2300
2974
|
return JSON.stringify(value);
|
|
2301
2975
|
}
|
|
2302
2976
|
}
|
|
2303
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2977
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableBaseCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2978
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableBaseCellComponent, isStandalone: true, selector: "rtui-table-base-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "style": "this.style" }, classAttribute: "rtui-table-base-cell" }, providers: [BreakpointService], ngImport: i0, template: "<ng-container rtBlock=\"base-cell\">\n @if (column()?.icon?.placement === 'left') {\n <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n {{ column().icon?.glyph }}\n </mat-icon>\n }\n\n <div rtElem=\"title\" [rtMod]=\"{ align: column().align }\">\n <div\n #titleTpl\n rtElem=\"title-text\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"above\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"!narrow()\"\n [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n [matTooltipDisabled]=\"narrow()\">\n {{ cellValue() | emptyToDash }}\n </div>\n </div>\n\n @if (column()?.icon?.placement === 'right') {\n <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n {{ column().icon?.glyph }}\n </mat-icon>\n }\n\n @if (column()?.copyable && !isCellEmpty()) {\n <button\n type=\"button\"\n rtBlock=\"base-cell\"\n rtElem=\"copy-button\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{\n position: copyBtnPosition,\n complete: isCopied(),\n visible: isMouseOver(),\n }\"\n [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n [matTooltipDisabled]=\"narrow()\"\n (mousedown)=\"onCopyToClipboard(); $event.stopPropagation()\">\n <mat-icon rtElem=\"copy-icon\" [rtIconOutlined]=\"true\">{{ isCopied() ? 'done' : 'content_copy' }}</mat-icon>\n </button>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-table-base-cell-host-gap);--rt-table-base-cell-host-gap: .5rem;--rt-table-base-cell-prefix-icon-size: 1.5rem;--rt-table-base-cell-suffix-icon-size: 1.5rem;--rt-table-base-cell-title-padding: .5rem .5rem .5rem 0;--rt-table-base-cell-copy-button-position-right: .25rem;--rt-table-base-cell-copy-button-position-left: .25rem;--rt-table-base-cell-copy-button-padding: .25rem;--rt-table-base-cell-copy-button-background-color: var(--mat-fab-small-container-color);--rt-table-base-cell-copy-button-border-radius: 5px;--rt-table-base-cell-copy-button-color: var(--rt-color-neutral-60);--rt-table-base-cell-copy-button-icon-size: 1rem;--rt-table-base-cell-copy-button-hover-color: var(--rt-color-neutral-100);--rt-table-base-cell-copy-button-complete-color: var(--rt-text-base-strong)}:host .base-cell__prefix{width:var(--rt-table-base-cell-prefix-icon-size);height:var(--rt-table-base-cell-prefix-icon-size);font-size:var(--rt-table-base-cell-prefix-icon-size)}:host .base-cell__title{display:table;width:100%;table-layout:fixed}:host .base-cell__title-text{overflow:hidden;width:100%;padding:var(--rt-table-base-cell-title-padding);text-overflow:ellipsis;white-space:nowrap}:host .base-cell__title--align--left{text-align:left}:host .base-cell__title--align--center{text-align:center}:host .base-cell__title--align--right{text-align:right}:host .base-cell__suffix{width:var(--rt-table-base-cell-suffix-icon-size);height:var(--rt-table-base-cell-suffix-icon-size);font-size:var(--rt-table-base-cell-suffix-icon-size)}:host .base-cell__prefix,:host .base-cell__suffix{width:fit-content;min-width:fit-content}:host .base-cell__copy-button{position:absolute;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-table-base-cell-copy-button-padding);border:0;border-radius:var(--rt-table-base-cell-copy-button-border-radius);background-color:var(--rt-table-base-cell-copy-button-background-color);color:var(--rt-table-base-cell-copy-button-color);line-height:1;transition:all .15s linear;visibility:hidden}@media screen and (max-width:599px){:host .base-cell__copy-button{visibility:visible}}:host .base-cell__copy-button--position--left{left:var(--rt-table-base-cell-copy-button-position-left)}:host .base-cell__copy-button--position--right{right:var(--rt-table-base-cell-copy-button-position-right)}:host .base-cell__copy-button:hover,:host .base-cell__copy-button:focus,:host .base-cell__copy-button:active{background-color:var(--rt-table-base-cell-copy-button-background-color);color:var(--rt-table-base-cell-copy-button-hover-color)}:host .base-cell__copy-button--complete{cursor:not-allowed}:host .base-cell__copy-button--complete:hover,:host .base-cell__copy-button--complete:focus,:host .base-cell__copy-button--complete:active{color:var(--rt-table-base-cell-copy-button-complete-color)}:host .base-cell__copy-button--visible{visibility:visible}:host .base-cell__copy-icon{width:var(--rt-table-base-cell-copy-button-icon-size);height:var(--rt-table-base-cell-copy-button-icon-size);font-size:var(--rt-table-base-cell-copy-button-icon-size)}\n"], dependencies: [{ kind: "component", type:
|
|
2305
2979
|
// material
|
|
2306
2980
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type:
|
|
2307
2981
|
// directives
|
|
@@ -2309,7 +2983,7 @@ class TableBaseCellComponent {
|
|
|
2309
2983
|
// pipes
|
|
2310
2984
|
EmptyToDashPipe, name: "emptyToDash" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2311
2985
|
}
|
|
2312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2986
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableBaseCellComponent, decorators: [{
|
|
2313
2987
|
type: Component,
|
|
2314
2988
|
args: [{ selector: 'rtui-table-base-cell', host: { class: BEM_BLOCK$l }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2315
2989
|
// material
|
|
@@ -2376,8 +3050,8 @@ class RtuiTableHeaderCellComponent {
|
|
|
2376
3050
|
}
|
|
2377
3051
|
return EListSortOrder.ASC;
|
|
2378
3052
|
}
|
|
2379
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3053
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiTableHeaderCellComponent, isStandalone: true, selector: "rtui-table-header-cell", inputs: { headerModel: { classPropertyName: "headerModel", publicName: "headerModel", isSignal: true, isRequired: true, transformFunction: null }, sortModel: { classPropertyName: "sortModel", publicName: "sortModel", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, headerDataEllipsisMaxLines: { classPropertyName: "headerDataEllipsisMaxLines", publicName: "headerDataEllipsisMaxLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "style": "this.style" }, classAttribute: "rtui-table-header-cell" }, ngImport: i0, template: "<div rtBlock=\"header-cell-label\" [rtMod]=\"{ align: headerModel().align }\">\n @if (headerModel()?.icon?.placement === 'left') {\n <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n {{ headerModel().icon?.glyph }}\n </mat-icon>\n }\n\n <div rtElem=\"text\" [matTooltip]=\"headerModel()?.tooltip ?? ''\" [class]=\"[headerModel()?.className] | concatClasses\">\n {{ headerModel().label }}\n </div>\n\n @if (headerModel()?.icon?.placement === 'right') {\n <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n {{ headerModel().icon?.glyph }}\n </mat-icon>\n }\n</div>\n\n@if (sortModel()) {\n <div rtBlock=\"header-cell-icons\" [rtMod]=\"{ active: active() }\">\n <div\n rtElem=\"icon\"\n [rtMod]=\"{\n active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.DESC,\n first: true,\n }\"></div>\n\n <div\n rtElem=\"icon\"\n [rtMod]=\"{\n active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.ASC,\n second: true,\n }\"></div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;cursor:pointer;--rt-table-header-cell-label-gap: .5rem;--rt-table-header-cell-prefix-icon-size: 1.5rem;--rt-table-header-cell-suffix-icon-size: 1.5rem;--rt-table-header-cell-icon-margin: 0 0 0 1rem;--rt-table-header-cell-icon-color: var(--rt-text-base-disabled);--rt-table-header-cell-icon-active-color: var(--rt-text-base-strong)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-table-header-cell-label-gap)}:host .header-cell-label--align--left{justify-content:flex-start}:host .header-cell-label--align--center{justify-content:center}:host .header-cell-label--align--right{justify-content:flex-end}:host .header-cell-label__prefix{width:var(--rt-table-header-cell-prefix-icon-size);height:var(--rt-table-header-cell-prefix-icon-size);font-size:var(--rt-table-header-cell-prefix-icon-size)}:host .header-cell-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-cell-label__suffix{width:var(--rt-table-header-cell-suffix-icon-size);height:var(--rt-table-header-cell-suffix-icon-size);font-size:var(--rt-table-header-cell-suffix-icon-size)}:host .header-cell-label__prefix,:host .header-cell-label__suffix{width:fit-content;min-width:fit-content}:host .header-cell-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--rt-table-header-cell-icon-margin);visibility:hidden}:host .header-cell-icons--active{visibility:visible}:host .header-cell-icons__icon{width:0;height:0;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color);border-left:3px solid transparent}:host .header-cell-icons__icon--second{margin-top:var(--rt-spacing-2);transform:scaleY(-1)}:host .header-cell-icons__icon--active{border-bottom-color:var(--rt-table-header-cell-icon-active-color)}\n"], dependencies: [{ kind: "component", type:
|
|
2381
3055
|
// Material
|
|
2382
3056
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type:
|
|
2383
3057
|
// Bem
|
|
@@ -2385,7 +3059,7 @@ class RtuiTableHeaderCellComponent {
|
|
|
2385
3059
|
// Directives
|
|
2386
3060
|
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2387
3061
|
}
|
|
2388
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableHeaderCellComponent, decorators: [{
|
|
2389
3063
|
type: Component,
|
|
2390
3064
|
args: [{ selector: 'rtui-table-header-cell', host: { class: BEM_BLOCK$k }, imports: [
|
|
2391
3065
|
NgClass,
|
|
@@ -2521,8 +3195,8 @@ class RtuiTableHeaderFilterCellComponent {
|
|
|
2521
3195
|
}
|
|
2522
3196
|
this.currentFilter.update((filter) => ({ ...filter, operatorType }));
|
|
2523
3197
|
}
|
|
2524
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2525
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3198
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3199
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiTableHeaderFilterCellComponent, isStandalone: true, selector: "rtui-table-header-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: true, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: true, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "rtui-table-header-filter-cell" }, providers: [BreakpointService, provideNativeDateAdapter()], ngImport: i0, template: "@if (filterOperators()?.length) {\n <button\n aria-label=\"Icon-button for a context menu\"\n mat-icon-button\n matTooltipPosition=\"left\"\n [matTooltip]=\"currentFilter().operatorType | titlecase\"\n [matTooltipDisabled]=\"narrow()\"\n [matMenuTriggerFor]=\"menuTpl\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\">\n <mat-icon [rtIconOutlined]=\"true\">\n @switch (currentFilter().operatorType) {\n @case (filterOperatorTypes.EQUALS) {\n drag_handle\n }\n @case (filterOperatorTypes.NOT_EQUALS) {\n block\n }\n @case (filterOperatorTypes.CONTAINS) {\n more_horiz\n }\n @case (filterOperatorTypes.GREATER_THAN) {\n chevron_right\n }\n @case (filterOperatorTypes.LESS_THAN) {\n chevron_left\n }\n }\n </mat-icon>\n </button>\n\n <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n @if (filterOperators().includes(filterOperatorTypes.EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.EQUALS) {\n <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n <mat-icon rtIconOutlined [class]=\"['material-icons-outlined'] | concatClasses\">drag_handle</mat-icon>\n <span>Equal</span>\n </button>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n ) {\n <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n <span>Not equal</span>\n </button>\n }\n @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n <span>Contains</span>\n </button>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n ) {\n <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n <span>More than</span>\n </button>\n }\n @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n <span>Less than</span>\n </button>\n }\n </mat-menu>\n}\n\n@switch (filterType()) {\n @case (filterTypes.TEXT) {\n <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n <input\n #input\n matInput\n type=\"text\"\n placeholder=\"Type in filter value\"\n [value]=\"currentFilter().value\"\n (keydown.enter)=\"onFilterValueChange(input.value)\"\n (focusout)=\"onFilterValueChange(input.value)\" />\n\n <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n </mat-form-field>\n }\n @case (filterTypes.NUMBER) {\n <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n <input\n #input\n matInput\n type=\"number\"\n placeholder=\"Type in filter value\"\n [value]=\"currentFilter().value\"\n (keydown.enter)=\"onFilterValueChange(input.value)\"\n (focusout)=\"onFilterValueChange(input.value)\" />\n\n <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n </mat-form-field>\n }\n @case (filterTypes.DATE) {\n <button\n aria-label=\"Icon-button for clear filter\"\n mat-icon-button\n matTooltipPosition=\"left\"\n matTooltip=\"Clear filter\"\n [matTooltipDisabled]=\"narrow()\"\n [disabled]=\"!currentFilter().value\"\n (click)=\"onFilterValueChange('')\">\n <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n </button>\n\n <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n <input\n matInput\n placeholder=\"1/1/2025\"\n [matDatepicker]=\"picker\"\n [ngModel]=\"currentFilter().value\"\n (ngModelChange)=\"onFilterValueChange($event)\" />\n <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n <mat-datepicker #picker />\n </mat-form-field>\n }\n @case (filterTypes.SELECT) {\n <button\n aria-label=\"Icon-button for clear filter\"\n mat-icon-button\n matTooltipPosition=\"left\"\n matTooltip=\"Clear filter\"\n [matTooltipDisabled]=\"narrow()\"\n [disabled]=\"!currentFilter().value\"\n (click)=\"onFilterValueChange('')\">\n <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n </button>\n\n <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n <mat-select placeholder=\"Chose filter\" [value]=\"currentFilter().value\" (selectionChange)=\"onFilterValueChange($event.value)\">\n @for (item of filterSelectOptions(); track item) {\n <mat-option [value]=\"item\">{{ item | titlecase }}</mat-option>\n } @empty {\n <mat-option [value]=\"null\">No options available</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n}\n", styles: [":host{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-spacing-8)}:host .table-header-cell-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type:
|
|
2526
3200
|
// Material
|
|
2527
3201
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type:
|
|
2528
3202
|
// Directives
|
|
@@ -2532,7 +3206,7 @@ class RtuiTableHeaderFilterCellComponent {
|
|
|
2532
3206
|
// Pipes
|
|
2533
3207
|
TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2534
3208
|
}
|
|
2535
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, decorators: [{
|
|
2536
3210
|
type: Component,
|
|
2537
3211
|
args: [{ selector: 'rtui-table-header-filter-cell', host: { class: BEM_BLOCK$j }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [BreakpointService, provideNativeDateAdapter()], imports: [
|
|
2538
3212
|
ConcatClassesPipe,
|
|
@@ -2588,10 +3262,10 @@ class RtuiTableRowClickDirective {
|
|
|
2588
3262
|
}
|
|
2589
3263
|
this.#tableComponent.onRowDoubleClick(this.entity());
|
|
2590
3264
|
}
|
|
2591
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2592
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
3265
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3266
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtuiTableRowClickDirective, isStandalone: true, selector: "[rtuiTableRowClickDirective]", inputs: { entity: { classPropertyName: "entity", publicName: "rtuiTableRowClickDirective", isSignal: true, isRequired: true, transformFunction: null }, isTableRowClickable: { classPropertyName: "isTableRowClickable", publicName: "isTableRowClickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMouseDown($event)", "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
|
|
2593
3267
|
}
|
|
2594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableRowClickDirective, decorators: [{
|
|
2595
3269
|
type: Directive,
|
|
2596
3270
|
args: [{
|
|
2597
3271
|
selector: '[rtuiTableRowClickDirective]',
|
|
@@ -2612,10 +3286,10 @@ class RtuiCustomTableCellsDirective {
|
|
|
2612
3286
|
getTemplateByPropName(propName) {
|
|
2613
3287
|
return this.cellsTemplates()[propName];
|
|
2614
3288
|
}
|
|
2615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2616
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
3289
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3290
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtuiCustomTableCellsDirective, isStandalone: true, selector: "[rtuiCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
2617
3291
|
}
|
|
2618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiCustomTableCellsDirective, decorators: [{
|
|
2619
3293
|
type: Directive,
|
|
2620
3294
|
args: [{
|
|
2621
3295
|
selector: '[rtuiCustomTableCellsDirective]',
|
|
@@ -2623,10 +3297,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2623
3297
|
}], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtuiCustomTableCellsDirective", required: true }] }] } });
|
|
2624
3298
|
/** Directive for row actions located inside a row menu button */
|
|
2625
3299
|
class RtuiTableRowActionsDirective {
|
|
2626
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2627
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
3300
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3301
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiTableRowActionsDirective, isStandalone: true, selector: "[rtuiTabletRowActionsDirective]", ngImport: i0 }); }
|
|
2628
3302
|
}
|
|
2629
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableRowActionsDirective, decorators: [{
|
|
2630
3304
|
type: Directive,
|
|
2631
3305
|
args: [{
|
|
2632
3306
|
selector: '[rtuiTabletRowActionsDirective]',
|
|
@@ -2634,10 +3308,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2634
3308
|
}] });
|
|
2635
3309
|
/** Directive for row actions located outside a row menu button */
|
|
2636
3310
|
class RtuiTableAdditionalRowActionsDirective {
|
|
2637
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2638
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
3311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3312
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiTableAdditionalRowActionsDirective, isStandalone: true, selector: "[rtuiTableAdditionalRowActionsDirective]", ngImport: i0 }); }
|
|
2639
3313
|
}
|
|
2640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, decorators: [{
|
|
2641
3315
|
type: Directive,
|
|
2642
3316
|
args: [{
|
|
2643
3317
|
selector: '[rtuiTableAdditionalRowActionsDirective]',
|
|
@@ -2796,8 +3470,8 @@ class RtuiTableComponent {
|
|
|
2796
3470
|
}
|
|
2797
3471
|
}
|
|
2798
3472
|
}
|
|
2799
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2800
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3474
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiTableComponent, isStandalone: true, selector: "rtui-table", inputs: { isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, host: { classAttribute: "rtui-table" }, providers: [
|
|
2801
3475
|
BreakpointService,
|
|
2802
3476
|
{
|
|
2803
3477
|
provide: RTUI_TABLE_COMPONENT_TOKEN,
|
|
@@ -2811,7 +3485,7 @@ class RtuiTableComponent {
|
|
|
2811
3485
|
// components
|
|
2812
3486
|
RtuiTableHeaderCellComponent, selector: "rtui-table-header-cell", inputs: ["headerModel", "sortModel", "currentSortModel", "headerDataEllipsisMaxLines"], outputs: ["sortChange"] }, { kind: "component", type: TableBaseCellComponent, selector: "rtui-table-base-cell", inputs: ["row", "column"] }, { kind: "component", type: RtuiTableHeaderFilterCellComponent, selector: "rtui-table-header-filter-cell", inputs: ["appearance", "filterProperty", "filterType", "filterModel", "defaultFilterOperator", "filterOperators", "filterSelectOptions"], outputs: ["filterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2813
3487
|
}
|
|
2814
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableComponent, decorators: [{
|
|
2815
3489
|
type: Component,
|
|
2816
3490
|
args: [{ selector: 'rtui-table', host: { class: BEM_BLOCK$i }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2817
3491
|
NgTemplateOutlet,
|
|
@@ -2996,10 +3670,10 @@ class RtuiPaginationComponent {
|
|
|
2996
3670
|
this.minContentFitWidth.set(currentContainerWidth);
|
|
2997
3671
|
}
|
|
2998
3672
|
}
|
|
2999
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3000
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "rtui-pagination" }, providers: [BreakpointService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() }\">\n <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() }\">\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"0\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n stroke=\"currentColor\"\n stroke-miterlimit=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n @if (narrow()) {\n <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n </div>\n } @else {\n @for (number of numbers(); track $index) {\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"1\"\n [rtMod]=\"{\n active: currentPageModel().pageNumber === number,\n divider: number === divider(),\n enabled: number !== divider() && currentPageModel().pageNumber !== number,\n }\"\n (click)=\"onChangePageNumber(number)\"\n (keydown)=\"onChangePageNumber(number)\">\n <span rtElem=\"item-label\">{{ number }}</span>\n </div>\n }\n }\n\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"3\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n stroke=\"currentColor\"\n stroke-miterlimit=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() }\">\n @if (!narrow()) {\n <div rtElem=\"title\">Items per page:</div>\n }\n\n <select rtElem=\"selector\" [formControl]=\"control\">\n @for (size of pageSizes(); track $index) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-clipped-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-clipped-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-clipped-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (min-width:600px){:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-clipped-gap)}}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}@media screen and (min-width:600px){:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-clipped-margin)}}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}@media screen and (min-width:600px){:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-clipped-margin)}}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3673
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "rtui-pagination" }, providers: [BreakpointService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() }\">\n <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() }\">\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"0\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n stroke=\"currentColor\"\n stroke-miterlimit=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n @if (narrow()) {\n <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n </div>\n } @else {\n @for (number of numbers(); track $index) {\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"1\"\n [rtMod]=\"{\n active: currentPageModel().pageNumber === number,\n divider: number === divider(),\n enabled: number !== divider() && currentPageModel().pageNumber !== number,\n }\"\n (click)=\"onChangePageNumber(number)\"\n (keydown)=\"onChangePageNumber(number)\">\n <span rtElem=\"item-label\">{{ number }}</span>\n </div>\n }\n }\n\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"3\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n stroke=\"currentColor\"\n stroke-miterlimit=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() }\">\n @if (!narrow()) {\n <div rtElem=\"title\">Items per page:</div>\n }\n\n <select rtElem=\"selector\" [formControl]=\"control\">\n @for (size of pageSizes(); track $index) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-clipped-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-clipped-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-clipped-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (min-width:600px){:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-clipped-gap)}}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}@media screen and (min-width:600px){:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-clipped-margin)}}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}@media screen and (min-width:600px){:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-clipped-margin)}}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3001
3675
|
}
|
|
3002
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiPaginationComponent, decorators: [{
|
|
3003
3677
|
type: Component,
|
|
3004
3678
|
args: [{ selector: 'rtui-pagination', host: { class: BEM_BLOCK$h }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, BlockDirective, ElemDirective, ModDirective], template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() }\">\n <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() }\">\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"0\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n stroke=\"currentColor\"\n stroke-miterlimit=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n @if (narrow()) {\n <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n </div>\n } @else {\n @for (number of numbers(); track $index) {\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"1\"\n [rtMod]=\"{\n active: currentPageModel().pageNumber === number,\n divider: number === divider(),\n enabled: number !== divider() && currentPageModel().pageNumber !== number,\n }\"\n (click)=\"onChangePageNumber(number)\"\n (keydown)=\"onChangePageNumber(number)\">\n <span rtElem=\"item-label\">{{ number }}</span>\n </div>\n }\n }\n\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"3\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n stroke=\"currentColor\"\n stroke-miterlimit=\"10\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() }\">\n @if (!narrow()) {\n <div rtElem=\"title\">Items per page:</div>\n }\n\n <select rtElem=\"selector\" [formControl]=\"control\">\n @for (size of pageSizes(); track $index) {\n <option [value]=\"size\">{{ size }}</option>\n }\n </select>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-clipped-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-clipped-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-clipped-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (min-width:600px){:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-clipped-gap)}}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}@media screen and (min-width:600px){:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-clipped-margin)}}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}@media screen and (min-width:600px){:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-clipped-margin)}}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"] }]
|
|
3005
3679
|
}], propDecorators: { currentPageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageModel", required: true }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], containerRef: [{ type: i0.ViewChild, args: ['containerRef', { isSignal: true }] }], onResize: [{
|
|
@@ -3027,10 +3701,10 @@ class RtuiDynamicSelectorListActionsComponent {
|
|
|
3027
3701
|
onClear() {
|
|
3028
3702
|
this.clearAction.emit();
|
|
3029
3703
|
}
|
|
3030
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3031
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
3704
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtuiDynamicSelectorListActionsComponent, isStandalone: true, selector: "rtui-dynamic-selector-list-actions", inputs: { isResetButtonDisabled: { classPropertyName: "isResetButtonDisabled", publicName: "isResetButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isClearButtonDisabled: { classPropertyName: "isClearButtonDisabled", publicName: "isClearButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetAction: "resetAction", clearAction: "clearAction" }, host: { classAttribute: "rtui-dynamic-selector-list-actions" }, providers: [BreakpointService], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n <div rtElem=\"control\">\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"item\"\n matTooltip=\"Reset to initial list\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"left\"\n [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n [disabled]=\"isResetButtonDisabled() || disabled()\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"onReset()\">\n <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n </button>\n </div>\n\n <div rtElem=\"control\">\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"item\"\n matTooltip=\"Clear list\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n [matTooltipDisabled]=\"narrow()\"\n [disabled]=\"disabled() || isClearButtonDisabled()\"\n (click)=\"onClear()\">\n <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n </button>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3032
3706
|
}
|
|
3033
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, decorators: [{
|
|
3034
3708
|
type: Component,
|
|
3035
3709
|
args: [{ selector: 'rtui-dynamic-selector-list-actions', host: { class: BEM_BLOCK$g }, imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective, MatIconButton, MatTooltip], providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n <div rtElem=\"control\">\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"item\"\n matTooltip=\"Reset to initial list\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"left\"\n [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n [disabled]=\"isResetButtonDisabled() || disabled()\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"onReset()\">\n <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n </button>\n </div>\n\n <div rtElem=\"control\">\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"item\"\n matTooltip=\"Clear list\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n [matTooltipDisabled]=\"narrow()\"\n [disabled]=\"disabled() || isClearButtonDisabled()\"\n (click)=\"onClear()\">\n <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n </button>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"] }]
|
|
3036
3710
|
}], propDecorators: { isResetButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetButtonDisabled", required: true }] }], isClearButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClearButtonDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], clearAction: [{ type: i0.Output, args: ["clearAction"] }] } });
|
|
@@ -3086,10 +3760,10 @@ class RtuiDynamicSelectorsDirective {
|
|
|
3086
3760
|
#breakpoints;
|
|
3087
3761
|
/** App-wide defaults; the resolution order is: instance input → `components.dynamicSelectors` → library default. */
|
|
3088
3762
|
#config;
|
|
3089
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3090
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
3763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3764
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtuiDynamicSelectorsDirective, isStandalone: true, inputs: { buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderIconOutlined: { classPropertyName: "isPlaceholderIconOutlined", publicName: "isPlaceholderIconOutlined", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderDescription: { classPropertyName: "placeholderDescription", publicName: "placeholderDescription", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3091
3765
|
}
|
|
3092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorsDirective, decorators: [{
|
|
3093
3767
|
type: Directive
|
|
3094
3768
|
}], propDecorators: { buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], useTitleCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTitleCase", required: false }] }], isPlaceholderIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderIconOutlined", required: false }] }], isDeleteButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeleteButtonShown", required: false }] }], isListDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isListDraggable", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderDescription", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
|
|
3095
3769
|
|
|
@@ -3163,8 +3837,8 @@ class RtuiToggleComponent {
|
|
|
3163
3837
|
}
|
|
3164
3838
|
this.#cdr.markForCheck();
|
|
3165
3839
|
}
|
|
3166
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3167
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiToggleComponent, isStandalone: true, selector: "rtui-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-toggle" }, providers: [
|
|
3168
3842
|
{
|
|
3169
3843
|
provide: NG_VALUE_ACCESSOR,
|
|
3170
3844
|
useExisting: forwardRef(() => RtuiToggleComponent),
|
|
@@ -3175,7 +3849,7 @@ class RtuiToggleComponent {
|
|
|
3175
3849
|
// directives
|
|
3176
3850
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3177
3851
|
}
|
|
3178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiToggleComponent, decorators: [{
|
|
3179
3853
|
type: Component,
|
|
3180
3854
|
args: [{ selector: 'rtui-toggle', host: { class: BEM_BLOCK$f }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
3181
3855
|
{
|
|
@@ -3423,8 +4097,8 @@ class RtuiMultiSelectorPopupComponent {
|
|
|
3423
4097
|
scroll() {
|
|
3424
4098
|
this.scrollAction.emit();
|
|
3425
4099
|
}
|
|
3426
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3427
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { entitiesToSelect: { classPropertyName: "entitiesToSelect", publicName: "entitiesToSelect", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, host: { classAttribute: "rtui-multi-selector-popup" }, providers: [BreakpointService, DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n rtBlock=\"rtui-multi-selector-header\"\n [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n </mat-form-field>\n\n @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n <div rtElem=\"controls\">\n @if (isMultiToggleShown()) {\n <div rtElem=\"controls-item\" rtMod=\"first\">\n <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n @if (!narrow()) {\n <mat-icon\n rtElem=\"controls-item-icon\"\n matTooltipPosition=\"above\"\n [rtIconOutlined]=\"true\"\n [matTooltip]=\"\n isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n \">\n info\n </mat-icon>\n }\n\n @if (narrow()) {\n <div rtElem=\"controls-item-info\">\n {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n </div>\n }\n </div>\n }\n\n @if (isSelectAllButtonShown()) {\n <div rtElem=\"controls-item\" rtMod=\"last\">\n <mat-checkbox\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n (change)=\"toggleSelectAll($event.checked)\">\n <div>Select all</div>\n </mat-checkbox>\n </div>\n }\n </div>\n }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n @if (searchControl.value && selectedEntities()) {\n @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n @if (isSingleSelection()) {\n <mat-radio-button\n rtElem=\"item\"\n [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-radio-button>\n } @else {\n <mat-checkbox\n rtElem=\"item\"\n [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-checkbox>\n }\n }\n }\n\n @if (filteredEntities()) {\n @for (entity of filteredEntities(); track entity[displayExp()]) {\n @if (isSingleSelection()) {\n <mat-radio-button\n rtElem=\"item\"\n [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-radio-button>\n } @else {\n <mat-checkbox\n rtElem=\"item\"\n [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-checkbox>\n }\n }\n }\n\n @if (fetching()) {\n <div rtElem=\"loader\">\n <mat-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n} @else {\n <div rtBlock=\"rtui-multi-selector-placeholder\">\n @if (loading()) {\n <rtui-spinner />\n } @else {\n <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n <div rtElem=\"title\">No Results</div>\n }\n </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n @if (navigateLink() && navigateButtonTitle()) {\n <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n }\n\n <div rtElem=\"base-actions\">\n <button mat-button type=\"button\" (click)=\"onClose()\">Cancel</button>\n\n <button mat-flat-button type=\"button\" [disabled]=\"!selectionControl.value?.length || loading()\" (click)=\"onSubmit()\">SUBMIT</button>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type:
|
|
4100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiMultiSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { entitiesToSelect: { classPropertyName: "entitiesToSelect", publicName: "entitiesToSelect", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, host: { classAttribute: "rtui-multi-selector-popup" }, providers: [BreakpointService, DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n rtBlock=\"rtui-multi-selector-header\"\n [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n </mat-form-field>\n\n @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n <div rtElem=\"controls\">\n @if (isMultiToggleShown()) {\n <div rtElem=\"controls-item\" rtMod=\"first\">\n <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n @if (!narrow()) {\n <mat-icon\n rtElem=\"controls-item-icon\"\n matTooltipPosition=\"above\"\n [rtIconOutlined]=\"true\"\n [matTooltip]=\"\n isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n \">\n info\n </mat-icon>\n }\n\n @if (narrow()) {\n <div rtElem=\"controls-item-info\">\n {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n </div>\n }\n </div>\n }\n\n @if (isSelectAllButtonShown()) {\n <div rtElem=\"controls-item\" rtMod=\"last\">\n <mat-checkbox\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n (change)=\"toggleSelectAll($event.checked)\">\n <div>Select all</div>\n </mat-checkbox>\n </div>\n }\n </div>\n }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n @if (searchControl.value && selectedEntities()) {\n @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n @if (isSingleSelection()) {\n <mat-radio-button\n rtElem=\"item\"\n [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-radio-button>\n } @else {\n <mat-checkbox\n rtElem=\"item\"\n [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-checkbox>\n }\n }\n }\n\n @if (filteredEntities()) {\n @for (entity of filteredEntities(); track entity[displayExp()]) {\n @if (isSingleSelection()) {\n <mat-radio-button\n rtElem=\"item\"\n [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-radio-button>\n } @else {\n <mat-checkbox\n rtElem=\"item\"\n [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-checkbox>\n }\n }\n }\n\n @if (fetching()) {\n <div rtElem=\"loader\">\n <mat-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n} @else {\n <div rtBlock=\"rtui-multi-selector-placeholder\">\n @if (loading()) {\n <rtui-spinner />\n } @else {\n <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n <div rtElem=\"title\">No Results</div>\n }\n </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n @if (navigateLink() && navigateButtonTitle()) {\n <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n }\n\n <div rtElem=\"base-actions\">\n <button mat-button type=\"button\" (click)=\"onClose()\">Cancel</button>\n\n <button mat-flat-button type=\"button\" [disabled]=\"!selectionControl.value?.length || loading()\" (click)=\"onSubmit()\">SUBMIT</button>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type:
|
|
3428
4102
|
// Material
|
|
3429
4103
|
MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type:
|
|
3430
4104
|
// directives
|
|
@@ -3432,7 +4106,7 @@ class RtuiMultiSelectorPopupComponent {
|
|
|
3432
4106
|
// components
|
|
3433
4107
|
RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isButtonShown", "tooltip", "tooltipPosition"], outputs: ["keydownAction", "clickAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground", "delay"] }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: EntityToStringPipe, name: "entityToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3434
4108
|
}
|
|
3435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiMultiSelectorPopupComponent, decorators: [{
|
|
3436
4110
|
type: Component,
|
|
3437
4111
|
args: [{ selector: 'rtui-multi-selector-popup', host: { class: BEM_BLOCK$e }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3438
4112
|
// Material
|
|
@@ -3478,20 +4152,20 @@ class RtuiDynamicSelectorPlaceholderComponent {
|
|
|
3478
4152
|
onSubmit(trigger) {
|
|
3479
4153
|
this.submitAction.emit(trigger);
|
|
3480
4154
|
}
|
|
3481
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
4155
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4156
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiDynamicSelectorPlaceholderComponent, isStandalone: true, selector: "rtui-dynamic-selector-placeholder", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isButtonShow: { classPropertyName: "isButtonShow", publicName: "isButtonShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction" }, host: { classAttribute: "rtui-dynamic-selector-placeholder" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n @if (icon()) {\n <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n }\n\n @if (description()) {\n <div rtElem=\"description\">{{ description() }}</div>\n }\n\n @if (isButtonShow()) {\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n mat-flat-button\n type=\"button\"\n [disabled]=\"disabled()\"\n (click)=\"onSubmit(trigger)\">\n <mat-icon rtIconOutlined>add</mat-icon>\n\n {{ buttonTitle() }}\n </button>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3483
4157
|
}
|
|
3484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, decorators: [{
|
|
3485
4159
|
type: Component,
|
|
3486
4160
|
args: [{ selector: 'rtui-dynamic-selector-placeholder', host: { class: BEM_BLOCK$d }, imports: [MatIcon, MatButton, CdkOverlayOrigin, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n @if (icon()) {\n <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n }\n\n @if (description()) {\n <div rtElem=\"description\">{{ description() }}</div>\n }\n\n @if (isButtonShow()) {\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n mat-flat-button\n type=\"button\"\n [disabled]=\"disabled()\"\n (click)=\"onSubmit(trigger)\">\n <mat-icon rtIconOutlined>add</mat-icon>\n\n {{ buttonTitle() }}\n </button>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"] }]
|
|
3487
4161
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], isButtonShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "isButtonShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconOutlined", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }] } });
|
|
3488
4162
|
|
|
3489
4163
|
/** Directive for row actions located outside a row menu button */
|
|
3490
4164
|
class RtuiDynamicSelectorItemAdditionalControlDirective {
|
|
3491
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3492
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4166
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicSelectorItemAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]", ngImport: i0 }); }
|
|
3493
4167
|
}
|
|
3494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, decorators: [{
|
|
3495
4169
|
type: Directive,
|
|
3496
4170
|
args: [{
|
|
3497
4171
|
selector: '[rtuiDynamicSelectorItemAdditionalControlDirective]',
|
|
@@ -3499,10 +4173,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3499
4173
|
}] });
|
|
3500
4174
|
/** Directive for custom item title template */
|
|
3501
4175
|
class RtuiDynamicSelectorItemTitleDirective {
|
|
3502
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3503
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4176
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4177
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicSelectorItemTitleDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleDirective]", ngImport: i0 }); }
|
|
3504
4178
|
}
|
|
3505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, decorators: [{
|
|
3506
4180
|
type: Directive,
|
|
3507
4181
|
args: [{
|
|
3508
4182
|
selector: '[rtuiDynamicSelectorItemTitleDirective]',
|
|
@@ -3572,8 +4246,8 @@ class RtuiDynamicSelectorSelectedListComponent {
|
|
|
3572
4246
|
setEditModState(index) {
|
|
3573
4247
|
this.editedItemIndex.set(index);
|
|
3574
4248
|
}
|
|
3575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
4249
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4250
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, selectedEntities: { classPropertyName: "selectedEntities", publicName: "selectedEntities", isSignal: true, isRequired: true, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isItemsEditable: { classPropertyName: "isItemsEditable", publicName: "isItemsEditable", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFromSelectedAction: "deleteFromSelectedAction", dropAction: "dropAction", changeValueAction: "changeValueAction" }, host: { classAttribute: "rtui-dynamic-selector-selected-list" }, providers: [BreakpointService], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorItemAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n @if (isListDraggable()) {\n <div rtElem=\"item-mover\">\n <div rtElem=\"item-control\">\n <button\n cdkDragHandle\n mat-icon-button\n type=\"button\"\n rtElem=\"item-control-button\"\n rtMod=\"draggable\"\n matTooltip=\"Hold button to drag\"\n matTooltipPosition=\"right\"\n [matTooltipDisabled]=\"narrow()\">\n <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n </button>\n </div>\n </div>\n }\n\n @if (editedItemIndex() === i) {\n <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n </mat-form-field>\n } @else if (itemTitleTpl()) {\n <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n } @else {\n <span\n #titleTpl\n rtElem=\"item-title\"\n matTooltipPosition=\"above\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"!narrow()\"\n [matTooltip]=\"\n useNameBreaking()\n ? (entity[displayExp()] | entityToString | breakString)\n : (entity[displayExp()] | entityToString)\n \"\n [matTooltipDisabled]=\"narrow()\">\n @if (useNameBreaking()) {\n {{\n useTitleCase()\n ? (entity[displayExp()] | entityToString | breakString | titlecase)\n : (entity[displayExp()] | entityToString | breakString)\n }}\n } @else {\n {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n }\n </span>\n }\n\n <div rtElem=\"item-controls\">\n @if (additionalControlTpl()) {\n <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n }\n\n @if (isItemsEditable()) {\n @if (editedItemIndex() === i) {\n <div rtElem=\"item-control\">\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"item-control-button\"\n matTooltipPosition=\"left\"\n matTooltip=\"Reset\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"setEditModState(null)\">\n <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n </button>\n </div>\n }\n\n <div rtElem=\"item-control\">\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"item-control-button\"\n matTooltipPosition=\"right\"\n [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n </button>\n </div>\n }\n\n @if (isDeleteButtonShown()) {\n <div rtElem=\"item-control\">\n <button\n mat-icon-button\n type=\"button\"\n rtElem=\"item-control-button\"\n matTooltip=\"Remove the Item from the List\"\n matTooltipPosition=\"left\"\n [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n [matTooltipDisabled]=\"narrow()\"\n [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n (click)=\"onDelete(entity[keyExp()])\">\n <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n </button>\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:var(--rt-dynamic-selector-item-border-radius);background:var(--mat-option-selected-state-layer-color);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type:
|
|
3577
4251
|
// material
|
|
3578
4252
|
MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type:
|
|
3579
4253
|
// drag and drop
|
|
@@ -3583,7 +4257,7 @@ class RtuiDynamicSelectorSelectedListComponent {
|
|
|
3583
4257
|
// pipes
|
|
3584
4258
|
EntityToStringPipe, name: "entityToString" }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3585
4259
|
}
|
|
3586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4260
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, decorators: [{
|
|
3587
4261
|
type: Component,
|
|
3588
4262
|
args: [{ selector: 'rtui-dynamic-selector-selected-list', host: { class: BEM_BLOCK$c }, imports: [
|
|
3589
4263
|
NgTemplateOutlet,
|
|
@@ -3628,10 +4302,10 @@ function compareKeys(a, b) {
|
|
|
3628
4302
|
}
|
|
3629
4303
|
/** Directive for row actions located outside a row menu button */
|
|
3630
4304
|
class RtuiDynamicSelectorAdditionalControlDirective {
|
|
3631
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3632
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4305
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4306
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicSelectorAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorAdditionalControlDirective]", ngImport: i0 }); }
|
|
3633
4307
|
}
|
|
3634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, decorators: [{
|
|
3635
4309
|
type: Directive,
|
|
3636
4310
|
args: [{
|
|
3637
4311
|
selector: '[rtuiDynamicSelectorAdditionalControlDirective]',
|
|
@@ -3639,10 +4313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3639
4313
|
}] });
|
|
3640
4314
|
/** Directive for custom item title template, projected from rtui-dynamic-selector down to selected-list */
|
|
3641
4315
|
class RtuiDynamicSelectorItemTitleProjectionDirective {
|
|
3642
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3643
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4317
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicSelectorItemTitleProjectionDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleProjectionDirective]", ngImport: i0 }); }
|
|
3644
4318
|
}
|
|
3645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, decorators: [{
|
|
3646
4320
|
type: Directive,
|
|
3647
4321
|
args: [{
|
|
3648
4322
|
selector: '[rtuiDynamicSelectorItemTitleProjectionDirective]',
|
|
@@ -3928,8 +4602,8 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3928
4602
|
this.#onChanged(selectedEntityIds);
|
|
3929
4603
|
}
|
|
3930
4604
|
}
|
|
3931
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
4605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, host: { classAttribute: "rtui-dynamic-selector" }, providers: [
|
|
3933
4607
|
BreakpointService,
|
|
3934
4608
|
{
|
|
3935
4609
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3947,7 +4621,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3947
4621
|
// components
|
|
3948
4622
|
RtuiMultiSelectorPopupComponent, selector: "rtui-multi-selector-popup", inputs: ["entitiesToSelect", "appearance", "keyExp", "displayExp", "searchTerm", "navigateButtonTitle", "navigateLink", "isSingleSelection", "isMultiToggleShown", "isSelectAllButtonShown", "loading", "fetching", "useNameBreaking", "isLazyLoad", "isLocalSearch", "pinnedKeys"], outputs: ["submitAction", "closeAction", "searchAction", "scrollAction", "temporarySelectAction"] }, { kind: "component", type: RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3949
4623
|
}
|
|
3950
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4624
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicSelectorComponent, decorators: [{
|
|
3951
4625
|
type: Component,
|
|
3952
4626
|
args: [{ selector: 'rtui-dynamic-selector', host: { class: BEM_BLOCK$b }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3953
4627
|
ConcatClassesPipe,
|
|
@@ -4052,14 +4726,14 @@ class RtTableConfigAsideComponent {
|
|
|
4052
4726
|
visibilityChange(entity) {
|
|
4053
4727
|
this.selectedColumns.update((list) => list.map((el) => (entity.propName === el.propName ? { ...el, hidden: !el.hidden } : el)));
|
|
4054
4728
|
}
|
|
4055
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4056
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
4729
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableConfigAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RtTableConfigAsideComponent, isStandalone: true, selector: "rtui-test-aside", host: { classAttribute: "rtui-test-aside" }, providers: [BreakpointService], ngImport: i0, template: "<rtui-aside-container\n [pending]=\"false\"\n [isSubmitButtonDisabled]=\"!isVisibilityChanged() && !isOrderChanged() && !form.dirty\"\n (submitAction)=\"save()\"\n (cancelAction)=\"cancel()\">\n <ng-container *rtuiAsideHeader rtBlock=\"c-aside-title\">\n <div rtElem=\"txt\">Edit table configuration</div>\n <div rtElem=\"addition\">Change columns visibility and order, show(hide) scrollbar</div>\n </ng-container>\n <form rtBlock=\"c-form\" [formGroup]=\"form\">\n <div rtElem=\"item\">\n <div rtElem=\"controls\">\n <!-- Vertical scrollbar -->\n <div rtElem=\"control-item\">\n <rtui-toggle formControlName=\"isVerticalScrollbarShown\" label=\"Vertical scrollbar shown\" />\n </div>\n </div>\n\n <div rtElem=\"controls\">\n <!-- Horizontal scrollbar -->\n <div rtElem=\"control-item\">\n <rtui-toggle formControlName=\"isHorizontalScrollbarShown\" label=\"Horizontal scrollbar shown\" />\n </div>\n </div>\n\n <div rtElem=\"controls\">\n <!-- Columns config -->\n <div rtElem=\"control-item\">\n <rtui-dynamic-selector\n keyExp=\"propName\"\n displayExp=\"displayName\"\n formControlName=\"columns\"\n [entities]=\"selectedColumns()\"\n [useNameBreaking]=\"true\"\n [useTitleCase]=\"true\"\n [isSelectionAvailable]=\"false\"\n [isDeleteButtonShown]=\"false\"\n [isListDraggable]=\"true\">\n <ng-container *rtuiDynamicSelectorAdditionalControlDirective=\"let entity\" rtBlock=\"rtui-dynamic-selector\">\n <div rtElem=\"item-control\">\n <button\n mat-icon-button\n type=\"button\"\n aria-label=\"Icon-button for visibility indication\"\n rtElem=\"item-control-button\"\n matTooltip=\"{{ entity.hidden ? 'Hidden, click to show' : 'Shown, click to hide' }}\"\n matTooltipPosition=\"left\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"visibilityChange(entity)\">\n <mat-icon [rtIconOutlined]=\"true\">\n {{ entity.hidden ? 'visibility_off' : 'visibility' }}\n </mat-icon>\n </button>\n </div>\n </ng-container>\n </rtui-dynamic-selector>\n </div>\n </div>\n </div>\n </form>\n</rtui-aside-container>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type:
|
|
4057
4731
|
// directives
|
|
4058
4732
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtuiAsideContainerHeaderDirective, selector: "[rtuiAsideHeader]" }, { kind: "directive", type: RtuiDynamicSelectorAdditionalControlDirective, selector: "[rtuiDynamicSelectorAdditionalControlDirective]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type:
|
|
4059
4733
|
// standalone components
|
|
4060
4734
|
RtuiAsideContainerComponent, selector: "rtui-aside-container", inputs: ["title", "isSubmitButtonDisabled", "isFooterShown", "pending", "isRequestErrorShown", "headerActionsButtons", "requestError", "submitButtonTitle", "cancelButtonTitle", "submitButtonTooltip"], outputs: ["submitAction", "cancelAction", "headerAction"] }, { kind: "component", type: RtuiDynamicSelectorComponent, selector: "rtui-dynamic-selector", inputs: ["keyExp", "displayExp", "entities", "navigateButtonTitle", "navigateLink", "readonlyEntitiesKeys", "chosenEntities", "isSelectionAvailable", "isPlaceholderShown", "loading", "pending", "fetching", "isLazyLoad", "isLocalSearch", "isMultiToggleShown", "isSelectAllButtonShown", "isOpenPopupButtonShown", "searchTerm", "additionalControlChanged", "sortFn"], outputs: ["chosenEntitiesChange", "searchAction", "scrollAction", "temporarySelectAction", "resetAction", "selectionChangeAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4061
4735
|
}
|
|
4062
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableConfigAsideComponent, decorators: [{
|
|
4063
4737
|
type: Component,
|
|
4064
4738
|
args: [{ selector: 'rtui-test-aside', host: { class: BEM_BLOCK$a }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4065
4739
|
ReactiveFormsModule,
|
|
@@ -4080,20 +4754,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4080
4754
|
}] });
|
|
4081
4755
|
|
|
4082
4756
|
class RtuiTableToolbarSelectorsDirective {
|
|
4083
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4084
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4758
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiTableToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiTableToolbarSelectorsDirective]", ngImport: i0 }); }
|
|
4085
4759
|
}
|
|
4086
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, decorators: [{
|
|
4087
4761
|
type: Directive,
|
|
4088
4762
|
args: [{
|
|
4089
4763
|
selector: '[rtuiTableToolbarSelectorsDirective]',
|
|
4090
4764
|
}]
|
|
4091
4765
|
}] });
|
|
4092
4766
|
class RtuiTableToolbarActionsDirective {
|
|
4093
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4094
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4767
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4768
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiTableToolbarActionsDirective, isStandalone: true, selector: "[rtuiTableToolbarActionsDirective]", ngImport: i0 }); }
|
|
4095
4769
|
}
|
|
4096
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4770
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableToolbarActionsDirective, decorators: [{
|
|
4097
4771
|
type: Directive,
|
|
4098
4772
|
args: [{
|
|
4099
4773
|
selector: '[rtuiTableToolbarActionsDirective]',
|
|
@@ -4270,8 +4944,8 @@ class RtuiTableContainerComponent {
|
|
|
4270
4944
|
this.#style.setProperty('--rt-table-container-content-scrollbar-horizontal-height', safeHorizontalValue);
|
|
4271
4945
|
}
|
|
4272
4946
|
}
|
|
4273
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableContainerComponent, isStandalone: true, selector: "rtui-table-container", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: true, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: true, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null }, isFiltersEmpty: { classPropertyName: "isFiltersEmpty", publicName: "isFiltersEmpty", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderTitle: { classPropertyName: "placeholderTitle", publicName: "placeholderTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange", searchChange: "searchChange", refreshAction: "refreshAction", clearFiltersAction: "clearFiltersAction" }, host: { classAttribute: "rtui-table-container" }, providers: [BreakpointService, RtAsideService, PlatformService], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiTableToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiTableToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n <rtui-spinner />\n} @else {\n @if (fetching()) {\n <rtui-spinner [showBackground]=\"true\" />\n }\n <ng-container rtBlock=\"table-container\">\n <rtui-scrollable>\n <ng-container *rtuiScrollableHeader>\n <rtui-toolbar>\n @if (isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n <ng-container *rtuiToolbarLeft>\n <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n </ng-container>\n }\n\n <ng-container *rtuiToolbarRight>\n <div rtElem=\"toolbar\">\n <div rtElem=\"toolbar-actions\" [rtMod]=\"{ end: isMultiSelect() ?? toolbarSelectorsTpl() }\">\n @if (!isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n }\n\n @if (toolbarActionsTpl()) {\n <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() ?? null\" />\n\n <div rtElem=\"toolbar-actions-divider\"></div>\n }\n\n @if (isFiltersShown()) {\n <button\n mat-mini-fab\n type=\"button\"\n aria-label=\"Icon-button for clear filters\"\n matTooltip=\"Clear filters\"\n matTooltipPosition=\"below\"\n rtElem=\"toolbar-action\"\n [matTooltipDisabled]=\"narrow()\"\n [disabled]=\"isFiltersEmpty()\"\n (click)=\"onClearFilters()\">\n <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">block</mat-icon>\n </button>\n }\n\n @if (isRefreshButtonShown()) {\n <button\n mat-mini-fab\n type=\"button\"\n aria-label=\"Icon-button for table refresh\"\n matTooltip=\"Refresh\"\n matTooltipPosition=\"below\"\n rtElem=\"toolbar-action\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"onRefresh()\">\n <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">sync</mat-icon>\n </button>\n }\n\n @if (isTableConfigButtonShown()) {\n <button\n mat-mini-fab\n type=\"button\"\n aria-label=\"Icon-button for table config\"\n matTooltip=\"Table configuration\"\n matTooltipPosition=\"below\"\n rtElem=\"toolbar-action\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"onOpenConfigAside()\">\n <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">view_column</mat-icon>\n </button>\n }\n </div>\n\n @if ((isPlaceholderShown() && searchControl.value) || !isPlaceholderShown() || searchControl.dirty) {\n <div rtElem=\"toolbar-search\">\n <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\" [style.width.%]=\"100\">\n <input matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button\n matSuffix\n [isButtonShown]=\"!!searchControl.value\"\n (clickAction)=\"onClearSearch()\" />\n </mat-form-field>\n </div>\n }\n </div>\n </ng-container>\n </rtui-toolbar>\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n @if (!isPlaceholderShown() || pageModel()?.totalCount) {\n <div rtElem=\"content\">\n <ng-content />\n </div>\n\n @if (isPaginationShown()) {\n <div>\n <rtui-pagination [currentPageModel]=\"pageModel()\" (pageModelChange)=\"onPageModelChange($event)\" />\n </div>\n }\n } @else {\n <div rtElem=\"placeholder\">\n <mat-icon rtElem=\"placeholder-icon\" [rtIconOutlined]=\"true\">{{ placeholderIcon() }}</mat-icon>\n\n <div rtElem=\"placeholder-title\">{{ placeholderTitle() }}</div>\n </div>\n }\n </ng-container>\n </rtui-scrollable>\n\n <ng-template #selectorsTpl>\n <div rtElem=\"selectors\">\n @if (isMultiSelect()) {\n @if (isSelectAllSelectorShown()) {\n <mat-checkbox\n [checked]=\"isAllEntitiesSelected()\"\n [indeterminate]=\"!isAllEntitiesSelected() && isAllEntitiesIndeterminate()\"\n [disabled]=\"isSelectAllSelectorDisabled()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onToggleAllEntities($event.checked)\">\n <div rtElem=\"selectors-label\">Select all</div>\n </mat-checkbox>\n } @else {\n <div rtElem=\"selectors-counter\">Selected: {{ selectedEntitiesCount() }}</div>\n }\n }\n\n @if (toolbarSelectorsTpl()) {\n <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() ?? null\" />\n }\n </div>\n </ng-template>\n </ng-container>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-action-color: var(--rt-color-neutral-60);--rt-table-container-toolbar-action-hover-color: var(--rt-color-neutral-100);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-action{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--rt-table-container-toolbar-action-color);line-height:1;transition:all .15s linear}:host .table-container__toolbar-action:hover{color:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-action:hover svg g{fill:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
4947
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4948
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiTableContainerComponent, isStandalone: true, selector: "rtui-table-container", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: true, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: true, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null }, isFiltersEmpty: { classPropertyName: "isFiltersEmpty", publicName: "isFiltersEmpty", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderTitle: { classPropertyName: "placeholderTitle", publicName: "placeholderTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange", searchChange: "searchChange", refreshAction: "refreshAction", clearFiltersAction: "clearFiltersAction" }, host: { classAttribute: "rtui-table-container" }, providers: [BreakpointService, RtAsideService, PlatformService], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiTableToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiTableToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n <rtui-spinner />\n} @else {\n @if (fetching()) {\n <rtui-spinner [showBackground]=\"true\" />\n }\n <ng-container rtBlock=\"table-container\">\n <rtui-scrollable>\n <ng-container *rtuiScrollableHeader>\n <rtui-toolbar>\n @if (isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n <ng-container *rtuiToolbarLeft>\n <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n </ng-container>\n }\n\n <ng-container *rtuiToolbarRight>\n <div rtElem=\"toolbar\">\n <div rtElem=\"toolbar-actions\" [rtMod]=\"{ end: isMultiSelect() ?? toolbarSelectorsTpl() }\">\n @if (!isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n }\n\n @if (toolbarActionsTpl()) {\n <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() ?? null\" />\n\n <div rtElem=\"toolbar-actions-divider\"></div>\n }\n\n @if (isFiltersShown()) {\n <button\n mat-mini-fab\n type=\"button\"\n aria-label=\"Icon-button for clear filters\"\n matTooltip=\"Clear filters\"\n matTooltipPosition=\"below\"\n rtElem=\"toolbar-action\"\n [matTooltipDisabled]=\"narrow()\"\n [disabled]=\"isFiltersEmpty()\"\n (click)=\"onClearFilters()\">\n <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">block</mat-icon>\n </button>\n }\n\n @if (isRefreshButtonShown()) {\n <button\n mat-mini-fab\n type=\"button\"\n aria-label=\"Icon-button for table refresh\"\n matTooltip=\"Refresh\"\n matTooltipPosition=\"below\"\n rtElem=\"toolbar-action\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"onRefresh()\">\n <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">sync</mat-icon>\n </button>\n }\n\n @if (isTableConfigButtonShown()) {\n <button\n mat-mini-fab\n type=\"button\"\n aria-label=\"Icon-button for table config\"\n matTooltip=\"Table configuration\"\n matTooltipPosition=\"below\"\n rtElem=\"toolbar-action\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"onOpenConfigAside()\">\n <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">view_column</mat-icon>\n </button>\n }\n </div>\n\n @if ((isPlaceholderShown() && searchControl.value) || !isPlaceholderShown() || searchControl.dirty) {\n <div rtElem=\"toolbar-search\">\n <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\" [style.width.%]=\"100\">\n <input matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n <rtui-clear-button\n matSuffix\n [isButtonShown]=\"!!searchControl.value\"\n (clickAction)=\"onClearSearch()\" />\n </mat-form-field>\n </div>\n }\n </div>\n </ng-container>\n </rtui-toolbar>\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n @if (!isPlaceholderShown() || pageModel()?.totalCount) {\n <div rtElem=\"content\">\n <ng-content />\n </div>\n\n @if (isPaginationShown()) {\n <div>\n <rtui-pagination [currentPageModel]=\"pageModel()\" (pageModelChange)=\"onPageModelChange($event)\" />\n </div>\n }\n } @else {\n <div rtElem=\"placeholder\">\n <mat-icon rtElem=\"placeholder-icon\" [rtIconOutlined]=\"true\">{{ placeholderIcon() }}</mat-icon>\n\n <div rtElem=\"placeholder-title\">{{ placeholderTitle() }}</div>\n </div>\n }\n </ng-container>\n </rtui-scrollable>\n\n <ng-template #selectorsTpl>\n <div rtElem=\"selectors\">\n @if (isMultiSelect()) {\n @if (isSelectAllSelectorShown()) {\n <mat-checkbox\n [checked]=\"isAllEntitiesSelected()\"\n [indeterminate]=\"!isAllEntitiesSelected() && isAllEntitiesIndeterminate()\"\n [disabled]=\"isSelectAllSelectorDisabled()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onToggleAllEntities($event.checked)\">\n <div rtElem=\"selectors-label\">Select all</div>\n </mat-checkbox>\n } @else {\n <div rtElem=\"selectors-counter\">Selected: {{ selectedEntitiesCount() }}</div>\n }\n }\n\n @if (toolbarSelectorsTpl()) {\n <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() ?? null\" />\n }\n </div>\n </ng-template>\n </ng-container>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-action-color: var(--rt-color-neutral-60);--rt-table-container-toolbar-action-hover-color: var(--rt-color-neutral-100);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-action{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--rt-table-container-toolbar-action-color);line-height:1;transition:all .15s linear}:host .table-container__toolbar-action:hover{color:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-action:hover svg g{fill:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
4275
4949
|
// Material
|
|
4276
4950
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type:
|
|
4277
4951
|
// Standalone components
|
|
@@ -4281,7 +4955,7 @@ class RtuiTableContainerComponent {
|
|
|
4281
4955
|
// Directives
|
|
4282
4956
|
RtuiToolbarRightDirective, selector: "[rtuiToolbarRight]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtuiToolbarLeftDirective, selector: "[rtuiToolbarLeft]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4283
4957
|
}
|
|
4284
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiTableContainerComponent, decorators: [{
|
|
4285
4959
|
type: Component,
|
|
4286
4960
|
args: [{ selector: 'rtui-table-container', host: { class: BEM_BLOCK$9 }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4287
4961
|
ConcatClassesPipe,
|
|
@@ -4322,10 +4996,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4322
4996
|
|
|
4323
4997
|
/** Directive for selectors of the toolbar located on the left side */
|
|
4324
4998
|
class RtuiDynamicListToolbarSelectorsDirective {
|
|
4325
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4326
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
4999
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5000
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicListToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarSelectorsDirective]", ngImport: i0 }); }
|
|
4327
5001
|
}
|
|
4328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, decorators: [{
|
|
4329
5003
|
type: Directive,
|
|
4330
5004
|
args: [{
|
|
4331
5005
|
selector: '[rtuiDynamicListToolbarSelectorsDirective]',
|
|
@@ -4333,10 +5007,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4333
5007
|
}] });
|
|
4334
5008
|
/** Directive for actions of the toolbar located on the right side */
|
|
4335
5009
|
class RtuiDynamicListToolbarActionsDirective {
|
|
4336
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4337
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5011
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicListToolbarActionsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarActionsDirective]", ngImport: i0 }); }
|
|
4338
5012
|
}
|
|
4339
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, decorators: [{
|
|
4340
5014
|
type: Directive,
|
|
4341
5015
|
args: [{
|
|
4342
5016
|
selector: '[rtuiDynamicListToolbarActionsDirective]',
|
|
@@ -4347,10 +5021,10 @@ class RtuiDynamicListCustomTableCellsDirective {
|
|
|
4347
5021
|
constructor() {
|
|
4348
5022
|
this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : /* istanbul ignore next */ {}), alias: 'rtuiDynamicListCustomTableCellsDirective' });
|
|
4349
5023
|
}
|
|
4350
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4351
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
5024
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5025
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtuiDynamicListCustomTableCellsDirective, isStandalone: true, selector: "[rtuiDynamicListCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiDynamicListCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
4352
5026
|
}
|
|
4353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, decorators: [{
|
|
4354
5028
|
type: Directive,
|
|
4355
5029
|
args: [{
|
|
4356
5030
|
selector: '[rtuiDynamicListCustomTableCellsDirective]',
|
|
@@ -4358,10 +5032,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4358
5032
|
}], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtuiDynamicListCustomTableCellsDirective", required: true }] }] } });
|
|
4359
5033
|
/** Directive for row actions located inside a row menu button */
|
|
4360
5034
|
class RtuiDynamicListRowActionsDirective {
|
|
4361
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4362
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5035
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5036
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicListRowActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowActionsDirective]", ngImport: i0 }); }
|
|
4363
5037
|
}
|
|
4364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListRowActionsDirective, decorators: [{
|
|
4365
5039
|
type: Directive,
|
|
4366
5040
|
args: [{
|
|
4367
5041
|
selector: '[rtuiDynamicListRowActionsDirective]',
|
|
@@ -4369,10 +5043,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4369
5043
|
}] });
|
|
4370
5044
|
/** Directive for row actions located outside a row menu button */
|
|
4371
5045
|
class RtuiDynamicListRowAdditionalActionsDirective {
|
|
4372
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4373
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5046
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5047
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicListRowAdditionalActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowAdditionalActionsDirective]", ngImport: i0 }); }
|
|
4374
5048
|
}
|
|
4375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, decorators: [{
|
|
4376
5050
|
type: Directive,
|
|
4377
5051
|
args: [{
|
|
4378
5052
|
selector: '[rtuiDynamicListRowAdditionalActionsDirective]',
|
|
@@ -4491,14 +5165,14 @@ class RtuiDynamicListComponent {
|
|
|
4491
5165
|
onRowDoubleClick(row) {
|
|
4492
5166
|
this.rowDoubleClick.emit(row);
|
|
4493
5167
|
}
|
|
4494
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5169
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiDynamicListComponent, isStandalone: true, selector: "rtui-dynamic-list", inputs: { tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageModelChange: "pageModelChange", searchChange: "searchChange", refresh: "refresh", clearFiltersAction: "clearFiltersAction", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", filterChange: "filterChange" }, host: { classAttribute: "rtui-dynamic-list" }, providers: [BreakpointService], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiDynamicListToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiDynamicListToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "customCellsTpl", first: true, predicate: RtuiDynamicListCustomTableCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtuiDynamicListRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtuiDynamicListRowAdditionalActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "tableContainerTpl", first: true, predicate: RtuiTableContainerComponent, descendants: true, isSignal: true }, { propertyName: "tableTpl", first: true, predicate: RtuiTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<rtui-table-container\n [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [pageModel]=\"pageModel()\"\n [isPlaceholderShown]=\"!entities()?.length && !filterModel()?.length\"\n [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n [isFiltersShown]=\"isFiltersShown()\"\n [isFiltersEmpty]=\"!filterModel()?.length\"\n [appearance]=\"appearance()\"\n [searchTerm]=\"searchTerm()\"\n (refreshAction)=\"onRefresh()\"\n (clearFiltersAction)=\"onClearFilters()\"\n (pageModelChange)=\"onPageModelChange($event)\"\n (searchChange)=\"onSearchChange($event)\">\n @if (toolbarSelectorsTpl()) {\n <ng-container *rtuiTableToolbarSelectorsDirective>\n <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() || null\" />\n </ng-container>\n }\n\n @if (toolbarActionsTpl()) {\n <ng-container *rtuiTableToolbarActionsDirective>\n <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() || null\" />\n </ng-container>\n }\n\n <rtui-table\n [appearance]=\"appearance()\"\n [keyExp]=\"keyExp()\"\n [entities]=\"entities()\"\n [filterModel]=\"filterModel()\"\n [isTableRowsClickable]=\"isTableRowsClickable()\"\n [currentSortModel]=\"currentSortModel()\"\n [isFiltersShown]=\"isFiltersShown()\"\n (filterChange)=\"onFilterChange($event)\"\n (rowClick)=\"onRowClick($event)\"\n (rowDoubleClick)=\"onRowDoubleClick($event)\"\n (sortChange)=\"onSortChange($event)\">\n @if (customCellsTpl() && customCellsTpl()?.cellsTemplates()) {\n <ng-container *rtuiCustomTableCellsDirective=\"customCellsTpl()?.cellsTemplates()!\" />\n }\n\n @if (additionalRowActionsTpl()) {\n <ng-container *rtuiTableAdditionalRowActionsDirective=\"let row\">\n <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n </ng-container>\n }\n\n @if (rowActionsTpl()) {\n <ng-container *rtuiTabletRowActionsDirective=\"let row\">\n <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n </ng-container>\n }\n </rtui-table>\n</rtui-table-container>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type:
|
|
4496
5170
|
// Directives
|
|
4497
5171
|
RtuiTableToolbarActionsDirective, selector: "[rtuiTableToolbarActionsDirective]" }, { kind: "directive", type: RtuiTableRowActionsDirective, selector: "[rtuiTabletRowActionsDirective]" }, { kind: "directive", type: RtuiTableToolbarSelectorsDirective, selector: "[rtuiTableToolbarSelectorsDirective]" }, { kind: "directive", type: RtuiTableAdditionalRowActionsDirective, selector: "[rtuiTableAdditionalRowActionsDirective]" }, { kind: "component", type:
|
|
4498
5172
|
// Ui-kit
|
|
4499
5173
|
RtuiTableContainerComponent, selector: "rtui-table-container", inputs: ["appearance", "tableConfigStorageKey", "pageModel", "loading", "fetching", "isPlaceholderShown", "isPaginationShown", "isRefreshButtonShown", "isTableConfigButtonShown", "isToolbarActionsIconsOutlined", "isFiltersShown", "isFiltersEmpty", "searchTerm", "placeholderIcon", "placeholderTitle"], outputs: ["pageModelChange", "searchChange", "refreshAction", "clearFiltersAction"] }, { kind: "component", type: RtuiTableComponent, selector: "rtui-table", inputs: ["isTableRowsClickable", "keyExp", "entities", "currentSortModel", "appearance", "filterAppearance", "filterModel", "isFiltersShown"], outputs: ["rowClick", "rowDoubleClick", "sortChange", "filterChange"] }, { kind: "directive", type: RtuiCustomTableCellsDirective, selector: "[rtuiCustomTableCellsDirective]", inputs: ["rtuiCustomTableCellsDirective"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4500
5174
|
}
|
|
4501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicListComponent, decorators: [{
|
|
4502
5176
|
type: Component,
|
|
4503
5177
|
args: [{ selector: 'rtui-dynamic-list', host: { class: BEM_BLOCK$8 }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4504
5178
|
NgTemplateOutlet,
|
|
@@ -4556,10 +5230,10 @@ class RtCommonSelectorsDirective {
|
|
|
4556
5230
|
isAllExistOnPage(selectedEntitiesIds) {
|
|
4557
5231
|
return !this.entities().find((el) => !selectedEntitiesIds.includes(el[this.keyExp()]));
|
|
4558
5232
|
}
|
|
4559
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4560
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
5233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtCommonSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5234
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtCommonSelectorsDirective, isStandalone: true, inputs: { isMultiSelect: { classPropertyName: "isMultiSelect", publicName: "isMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, isSelectorColumnShown: { classPropertyName: "isSelectorColumnShown", publicName: "isSelectorColumnShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectorsColumnDisabled: { classPropertyName: "isSelectorsColumnDisabled", publicName: "isSelectorsColumnDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectedEntitiesKeys: { classPropertyName: "selectedEntitiesKeys", publicName: "selectedEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
4561
5235
|
}
|
|
4562
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtCommonSelectorsDirective, decorators: [{
|
|
4563
5237
|
type: Directive
|
|
4564
5238
|
}], propDecorators: { isMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiSelect", required: false }] }], isSelectorColumnShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorColumnShown", required: false }] }], isSelectorsColumnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorsColumnDisabled", required: false }] }], selectedEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntitiesKeys", required: false }] }] } });
|
|
4565
5239
|
|
|
@@ -4823,10 +5497,10 @@ class RtDynamicListSelectorsDirective extends RtCommonSelectorsDirective {
|
|
|
4823
5497
|
this.#isPageEntitiesSelected.set(this.isAllExistOnPage(this.selectedEntitiesIds()));
|
|
4824
5498
|
this.#isPageEntitiesIndeterminate.set(this.isOneExistOnPage(this.selectedEntitiesIds()));
|
|
4825
5499
|
}
|
|
4826
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4827
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
5500
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicListSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5501
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtDynamicListSelectorsDirective, isStandalone: true, selector: "rtui-dynamic-list[rtDynamicListSelectorsDirective]", inputs: { isMultiSelectExtendedMod: { classPropertyName: "isMultiSelectExtendedMod", publicName: "isMultiSelectExtendedMod", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllSelectorShown: { classPropertyName: "isSelectAllSelectorShown", publicName: "isSelectAllSelectorShown", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
4828
5502
|
}
|
|
4829
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5503
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicListSelectorsDirective, decorators: [{
|
|
4830
5504
|
type: Directive,
|
|
4831
5505
|
args: [{
|
|
4832
5506
|
selector: 'rtui-dynamic-list[rtDynamicListSelectorsDirective]',
|
|
@@ -4972,10 +5646,10 @@ class RtTableSelectorsDirective extends RtCommonSelectorsDirective {
|
|
|
4972
5646
|
this.#isPageEntitiesSelected.set(this.isAllExistOnPage(this.selectedEntitiesIds()));
|
|
4973
5647
|
this.#isPageEntitiesIndeterminate.set(this.isOneExistOnPage(this.selectedEntitiesIds()));
|
|
4974
5648
|
}
|
|
4975
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4976
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5649
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5650
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtTableSelectorsDirective, isStandalone: true, selector: "rtui-table[rtTableSelectorsDirective]", usesInheritance: true, ngImport: i0 }); }
|
|
4977
5651
|
}
|
|
4978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtTableSelectorsDirective, decorators: [{
|
|
4979
5653
|
type: Directive,
|
|
4980
5654
|
args: [{
|
|
4981
5655
|
selector: 'rtui-table[rtTableSelectorsDirective]',
|
|
@@ -4992,10 +5666,10 @@ class RtuiStopTableRowClickDirective {
|
|
|
4992
5666
|
this.#elementRef.nativeElement.setAttribute(RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, '');
|
|
4993
5667
|
}
|
|
4994
5668
|
}
|
|
4995
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4996
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5669
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiStopTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5670
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiStopTableRowClickDirective, isStandalone: true, selector: "[rtStopTableRowClick]", ngImport: i0 }); }
|
|
4997
5671
|
}
|
|
4998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiStopTableRowClickDirective, decorators: [{
|
|
4999
5673
|
type: Directive,
|
|
5000
5674
|
args: [{
|
|
5001
5675
|
standalone: true,
|
|
@@ -5014,10 +5688,10 @@ class RtuiPopoverContainerComponent {
|
|
|
5014
5688
|
get className() {
|
|
5015
5689
|
return this.#sanitizer.sanitize(1, this.popoverClass());
|
|
5016
5690
|
}
|
|
5017
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5018
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
5691
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiPopoverContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5692
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtuiPopoverContainerComponent, isStandalone: true, selector: "rtui-popover-container", inputs: { popoverTemplate: { classPropertyName: "popoverTemplate", publicName: "popoverTemplate", isSignal: true, isRequired: false, transformFunction: null }, popoverClass: { classPropertyName: "popoverClass", publicName: "popoverClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" }, classAttribute: "rtui-popover-container" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5019
5693
|
}
|
|
5020
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5694
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiPopoverContainerComponent, decorators: [{
|
|
5021
5695
|
type: Component,
|
|
5022
5696
|
args: [{ selector: 'rtui-popover-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: BEM_BLOCK$7 }, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"] }]
|
|
5023
5697
|
}], propDecorators: { popoverTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTemplate", required: false }] }], popoverClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverClass", required: false }] }], className: [{
|
|
@@ -5145,10 +5819,10 @@ class RtPopoverDirective {
|
|
|
5145
5819
|
this.#popoverContainerRef = null;
|
|
5146
5820
|
}
|
|
5147
5821
|
}
|
|
5148
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5149
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
5822
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5823
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtPopoverDirective, isStandalone: true, selector: "[rtPopover]", inputs: { xOffset: { classPropertyName: "xOffset", publicName: "xOffset", isSignal: true, isRequired: false, transformFunction: null }, yOffset: { classPropertyName: "yOffset", publicName: "yOffset", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isMouseHoverAllowed: { classPropertyName: "isMouseHoverAllowed", publicName: "isMouseHoverAllowed", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onClick($event.target)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, providers: [PlatformService], ngImport: i0 }); }
|
|
5150
5824
|
}
|
|
5151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPopoverDirective, decorators: [{
|
|
5152
5826
|
type: Directive,
|
|
5153
5827
|
args: [{
|
|
5154
5828
|
selector: '[rtPopover]',
|
|
@@ -5185,14 +5859,14 @@ class RtuiActionBarComponent {
|
|
|
5185
5859
|
this.onClose();
|
|
5186
5860
|
}
|
|
5187
5861
|
}
|
|
5188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5862
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5863
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiActionBarComponent, isStandalone: true, selector: "rtui-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeAction: "closeAction" }, host: { classAttribute: "rtui-action-bar" }, providers: [BreakpointService], ngImport: i0, template: "<div rtBlock=\"rtui-action-bar\">\n <div rtElem=\"counter\">\n {{ 'Selected: ' + config().selected + ' out of ' + config().total | emptyToDash }}\n </div>\n\n @if (config().buttons?.length) {\n <div rtElem=\"actions\">\n @for (btn of config().buttons; track i; let i = $index) {\n @if (btn?.menu) {\n @let menu = btn.menu;\n <ng-template #actionMenuWrapperTpl>\n <ng-container *ngTemplateOutlet=\"actionMenuTpl; context: { $implicit: menu }\" />\n </ng-template>\n\n <div rtPopover rtElem=\"action\" [trigger]=\"'click'\" [template]=\"actionMenuWrapperTpl\" [ngStyle]=\"btn?.styles\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\n } @else {\n <button type=\"button\" rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </button>\n }\n }\n </div>\n }\n\n <button type=\"button\" rtElem=\"close-button\" (click)=\"onClose()\">\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.7071 0.293C10.5196 0.105529 10.2652 0.000213623 10.0001 0.000213623C9.73492 0.000213623 9.48061 0.105529 9.29308 0.293L6.00008 3.586L2.70708 0.293C2.51848 0.110842 2.26588 0.0100477 2.00368 0.0123261C1.74148 0.0146045 1.49067 0.119773 1.30526 0.305182C1.11985 0.49059 1.01469 0.741402 1.01241 1.0036C1.01013 1.2658 1.11092 1.5184 1.29308 1.707L4.58608 5L1.29308 8.293C1.19757 8.38525 1.12139 8.49559 1.06898 8.6176C1.01657 8.7396 0.988985 8.87082 0.987831 9.0036C0.986677 9.13638 1.01198 9.26806 1.06226 9.39095C1.11254 9.51385 1.18679 9.6255 1.28069 9.71939C1.37458 9.81329 1.48623 9.88754 1.60913 9.93782C1.73202 9.9881 1.8637 10.0134 1.99648 10.0123C2.12926 10.0111 2.26048 9.98351 2.38249 9.9311C2.50449 9.87869 2.61483 9.80251 2.70708 9.707L6.00008 6.414L9.29308 9.707C9.48168 9.88916 9.73429 9.98995 9.99648 9.98767C10.2587 9.9854 10.5095 9.88023 10.6949 9.69482C10.8803 9.50941 10.9855 9.2586 10.9878 8.9964C10.99 8.7342 10.8892 8.4816 10.7071 8.293L7.41408 5L10.7071 1.707C10.8946 1.51947 10.9999 1.26516 10.9999 1C10.9999 0.734836 10.8946 0.480528 10.7071 0.293Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n</div>\n\n<ng-template #actionMenuTpl let-menu>\n <div rtBlock=\"rtui-action-bar-action-menu\">\n @for (btn of menu; track i; let i = $index) {\n <button type=\"button\" rtElem=\"action\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </button>\n }\n </div>\n</ng-template>\n\n<ng-template #buttonContentTpl let-btn>\n @if (btn?.icon) {\n <mat-icon [rtIconOutlined]=\"true\">{{ btn.icon }}</mat-icon>\n }\n\n @if (!isTablet() || (isTablet() && !btn?.icon)) {\n <div>{{ btn.title }}</div>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.rtui-action-bar{display:flex;width:var(--rt-action-bar-bar-width);align-items:center;padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow);color:var(--rt-action-bar-bar-color);gap:var(--rt-action-bar-bar-gap)}.rtui-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size);font-weight:var(--rt-action-bar-counter-font-weight)}.rtui-action-bar__actions{display:flex;gap:var(--rt-action-bar-actions-gap)}.rtui-action-bar__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-padding);border:0;border-radius:var(--rt-action-bar-action-border-radius);background-color:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);gap:var(--rt-action-bar-action-gap)}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{display:flex;align-items:center;padding:0;border:0;margin-left:auto;background-color:transparent;color:inherit;cursor:pointer}.rtui-action-bar__close-button svg{transition:transform .2s ease}.rtui-action-bar__close-button svg:hover{transform:rotate(90deg)}@media screen and (max-width:959px){.rtui-action-bar{padding:var(--rt-action-bar-bar-mobile-padding);gap:var(--rt-action-bar-bar-mobile-gap)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{padding:var(--rt-action-bar-action-mobile-padding);gap:var(--rt-action-bar-action-mobile-gap)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow);color:var(--rt-action-bar-action-menu-color);gap:var(--rt-action-bar-action-menu-gap)}.rtui-action-bar-action-menu__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-menu-action-padding);border:0;border-radius:var(--rt-action-bar-action-menu-action-border-radius);background-color:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);gap:var(--rt-action-bar-action-menu-action-gap)}.rtui-action-bar-action-menu__action:hover{background-color:var(--rt-action-bar-action-menu-action-hover-background-color)}@media screen and (max-width:959px){.rtui-action-bar-action-menu,.rtui-action-bar-action-menu__action{padding:var(--rt-action-bar-action-menu-action-mobile-padding);gap:var(--rt-action-bar-action-menu-action-mobile-gap)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type:
|
|
5190
5864
|
// material
|
|
5191
5865
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
5192
5866
|
// rt-tools
|
|
5193
5867
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["xOffset", "yOffset", "trigger", "template", "isMouseHoverAllowed"] }, { kind: "pipe", type: EmptyToDashPipe, name: "emptyToDash" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5194
5868
|
}
|
|
5195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiActionBarComponent, decorators: [{
|
|
5196
5870
|
type: Component,
|
|
5197
5871
|
args: [{ selector: 'rtui-action-bar', host: { class: BEM_BLOCK$6 }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5198
5872
|
NgTemplateOutlet,
|
|
@@ -5222,10 +5896,10 @@ class RtActionBarService {
|
|
|
5222
5896
|
closeActionBar() {
|
|
5223
5897
|
this.config.set({ ...this.config(), selected: 0, total: 0 });
|
|
5224
5898
|
}
|
|
5225
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5226
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
5899
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5900
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarService }); }
|
|
5227
5901
|
}
|
|
5228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtActionBarService, decorators: [{
|
|
5229
5903
|
type: Injectable
|
|
5230
5904
|
}] });
|
|
5231
5905
|
|
|
@@ -5290,10 +5964,10 @@ class RtuiActionBarContainerComponent {
|
|
|
5290
5964
|
this.#leaveTimer = null;
|
|
5291
5965
|
}
|
|
5292
5966
|
}
|
|
5293
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5294
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
5967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiActionBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiActionBarContainerComponent, isStandalone: true, selector: "rtui-action-bar-container", host: { classAttribute: "rtui-action-bar-container" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-action-bar-container\">\n @if (shown()) {\n <rtui-action-bar rtElem=\"bar\" [rtMod]=\"{ leaving: leaving() }\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n }\n</ng-container>\n", styles: [":host{position:fixed;z-index:var(--rt-action-bar-container-z-index);display:flex;width:var(--rt-action-bar-container-width);align-items:center;justify-content:center;inset:var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom) var(--rt-action-bar-container-left)}@keyframes rtui-action-bar-enter{0%{opacity:0;transform:translateY(100%)}30%{opacity:1;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}@keyframes rtui-action-bar-leave{0%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(-15px)}to{opacity:0;transform:translateY(100%)}}.rtui-action-bar-container__bar{animation:rtui-action-bar-enter .3s}.rtui-action-bar-container__bar--leaving{animation:rtui-action-bar-leave .3s forwards}\n"], dependencies: [{ kind: "component", type: RtuiActionBarComponent, selector: "rtui-action-bar", inputs: ["config"], outputs: ["closeAction"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5295
5969
|
}
|
|
5296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiActionBarContainerComponent, decorators: [{
|
|
5297
5971
|
type: Component,
|
|
5298
5972
|
args: [{ selector: 'rtui-action-bar-container', host: { class: BEM_BLOCK$5 }, imports: [RtuiActionBarComponent, BlockDirective, ElemDirective, ModDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-action-bar-container\">\n @if (shown()) {\n <rtui-action-bar rtElem=\"bar\" [rtMod]=\"{ leaving: leaving() }\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n }\n</ng-container>\n", styles: [":host{position:fixed;z-index:var(--rt-action-bar-container-z-index);display:flex;width:var(--rt-action-bar-container-width);align-items:center;justify-content:center;inset:var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom) var(--rt-action-bar-container-left)}@keyframes rtui-action-bar-enter{0%{opacity:0;transform:translateY(100%)}30%{opacity:1;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}@keyframes rtui-action-bar-leave{0%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(-15px)}to{opacity:0;transform:translateY(100%)}}.rtui-action-bar-container__bar{animation:rtui-action-bar-enter .3s}.rtui-action-bar-container__bar--leaving{animation:rtui-action-bar-leave .3s forwards}\n"] }]
|
|
5299
5973
|
}], ctorParameters: () => [] });
|
|
@@ -5337,10 +6011,10 @@ class RtuiSnackBarComponent {
|
|
|
5337
6011
|
close() {
|
|
5338
6012
|
this.#snackBarRef.dismiss();
|
|
5339
6013
|
}
|
|
5340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5341
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
6014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiSnackBarComponent, isStandalone: true, selector: "rtui-snack-bar", host: { properties: { "style.--rt-snack-bar-progress-duration": "progressDuration()" }, classAttribute: "rtui-snack-bar" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-snack-bar\">\n <div rtElem=\"content\">\n @if (data.icon) {\n <div rtElem=\"content-icon-wrapper\">\n <mat-icon rtElem=\"content-icon\" rtIconOutlined>{{ data.icon }}</mat-icon>\n </div>\n }\n\n <div rtElem=\"content-message\">{{ data.message }}</div>\n </div>\n\n @if (data.action) {\n <button rtElem=\"action-button\" mat-button (click)=\"dismiss()\">{{ data.action }}</button>\n }\n\n <button rtElem=\"close-button\" color=\"accent\" mat-icon-button type=\"button\" (click)=\"close()\">\n <mat-icon rtElem=\"close-button-icon\">close</mat-icon>\n </button>\n\n @if (data.isProgressBarShown && data.duration) {\n <div rtElem=\"progress\" (animationend)=\"close()\"></div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@keyframes rt-snack-bar-progress{0%{width:100%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{width:0;clip-path:polygon(0 0,0 0,0 100%,0 100%)}}:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);animation:rt-snack-bar-progress var(--rt-snack-bar-progress-duration) linear forwards;background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}:host:hover .rt-snack-bar__progress{animation-play-state:paused}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5342
6016
|
}
|
|
5343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiSnackBarComponent, decorators: [{
|
|
5344
6018
|
type: Component,
|
|
5345
6019
|
args: [{ selector: 'rtui-snack-bar', host: {
|
|
5346
6020
|
class: BEM_BLOCK$4,
|
|
@@ -5394,10 +6068,10 @@ class RtSnackBarService {
|
|
|
5394
6068
|
dismiss() {
|
|
5395
6069
|
this.#snackBar.dismiss();
|
|
5396
6070
|
}
|
|
5397
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5398
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
6071
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6072
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSnackBarService, providedIn: 'root' }); }
|
|
5399
6073
|
}
|
|
5400
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSnackBarService, decorators: [{
|
|
5401
6075
|
type: Injectable,
|
|
5402
6076
|
args: [{
|
|
5403
6077
|
providedIn: 'root',
|
|
@@ -5502,10 +6176,10 @@ class RtuiInfoBadgeComponent {
|
|
|
5502
6176
|
this.isTitleCollapsed.set(true);
|
|
5503
6177
|
}
|
|
5504
6178
|
}
|
|
5505
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
6179
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiInfoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6180
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiInfoBadgeComponent, isStandalone: true, selector: "rtui-info-badge", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, iconSide: { classPropertyName: "iconSide", publicName: "iconSide", isSignal: true, isRequired: false, transformFunction: null }, isFontBold: { classPropertyName: "isFontBold", publicName: "isFontBold", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-info-badge" }, providers: [BreakpointService], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n rtBlock=\"c-info-badge\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"text()\"\n [rtMod]=\"badgeModifiers()\"\n [matTooltipDisabled]=\"!isTitleCollapsed() || narrow()\">\n <div rtElem=\"content\" #content>{{ text() }}</div>\n @if (glyph()) {\n <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .c-info-badge--size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .c-info-badge--size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .c-info-badge--size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .c-info-badge--size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .c-info-badge--size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .c-info-badge--size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .c-info-badge--bold{font-weight:var(--rt-font-weight-bold)}:host .mat-icon{width:unset;height:unset}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5507
6181
|
}
|
|
5508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiInfoBadgeComponent, decorators: [{
|
|
5509
6183
|
type: Component,
|
|
5510
6184
|
args: [{ selector: 'rtui-info-badge', host: { class: BEM_BLOCK$3 }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, MatIcon, NgStyle, BlockDirective, ElemDirective, ModDirective], template: "<div\n rtBlock=\"c-info-badge\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"text()\"\n [rtMod]=\"badgeModifiers()\"\n [matTooltipDisabled]=\"!isTitleCollapsed() || narrow()\">\n <div rtElem=\"content\" #content>{{ text() }}</div>\n @if (glyph()) {\n <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .c-info-badge--size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .c-info-badge--size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .c-info-badge--size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .c-info-badge--size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .c-info-badge--size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .c-info-badge--size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .c-info-badge--bold{font-weight:var(--rt-font-weight-bold)}:host .mat-icon{width:unset;height:unset}\n"] }]
|
|
5511
6185
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], iconSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSide", required: false }] }], isFontBold: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFontBold", required: false }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
|
|
@@ -5549,12 +6223,12 @@ class RtuiFileUploadComponent {
|
|
|
5549
6223
|
this.uploadFile.emit(input.files[0]);
|
|
5550
6224
|
}
|
|
5551
6225
|
}
|
|
5552
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5553
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
6226
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtuiFileUploadComponent, isStandalone: true, selector: "rtui-file-upload", inputs: { isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFile: "uploadFile" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.--dragged": "isDragOver()" }, classAttribute: "rtui-file-upload" }, ngImport: i0, template: "<ng-container rtBlock=\"file-upload\">\n <mat-icon rtElem=\"icon\" [rtIconOutlined]=\"isIconOutlined()\">backup</mat-icon>\n\n <div rtElem=\"title\">Drag and drop your file here or</div>\n\n <input #uploadInput hidden type=\"file\" (change)=\"onFileSelect($event)\" />\n\n <button mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-file-upload-host-width: 100%;--rt-file-upload-host-max-width: 20rem;--rt-file-upload-host-height: 100%;--rt-file-upload-host-max-height: 20rem;--rt-file-upload-host-display: flex;--rt-file-upload-host-flex-direction: column;--rt-file-upload-host-justify-content: center;--rt-file-upload-host-align-items: center;--rt-file-upload-host-gap: 1rem;--rt-file-upload-host-padding: 1rem;--rt-file-upload-host-border: 2px dashed var(--rt-border-neutral-default);--rt-file-upload-host-border-radius: 1rem;--rt-file-upload-host-dragged-border-color: var(--mat-button-text-label-text-color);--rt-file-upload-icon-size: 2rem;--rt-file-upload-icon-color: var(--rt-text-base-strong);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--rt-text-base-primary);display:var(--rt-file-upload-host-display);width:var(--rt-file-upload-host-width);max-width:var(--rt-file-upload-host-max-width);height:var(--rt-file-upload-host-height);max-height:var(--rt-file-upload-host-max-height);flex-direction:var(--rt-file-upload-host-flex-direction);align-items:var(--rt-file-upload-host-align-items);justify-content:var(--rt-file-upload-host-justify-content);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);gap:var(--rt-file-upload-host-gap);transition:border-color .3s ease-in-out}:host.--dragged{border-color:var(--rt-file-upload-host-dragged-border-color)}:host .file-upload__icon{width:var(--rt-file-upload-icon-size);height:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color);font-size:var(--rt-file-upload-icon-size)}:host .file-upload__title{color:var(--rt-file-upload-title-color);font-size:var(--rt-file-upload-title-font-size)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
5554
6228
|
// directives
|
|
5555
6229
|
ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5556
6230
|
}
|
|
5557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiFileUploadComponent, decorators: [{
|
|
5558
6232
|
type: Component,
|
|
5559
6233
|
args: [{ selector: 'rtui-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5560
6234
|
MatButton,
|
|
@@ -5574,10 +6248,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
5574
6248
|
|
|
5575
6249
|
/** Directive for row actions located outside a row menu button */
|
|
5576
6250
|
class RtuiDynamicInputAdditionalControlDirective {
|
|
5577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5578
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
6251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6252
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtuiDynamicInputAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicInputAdditionalControlDirective]", ngImport: i0 }); }
|
|
5579
6253
|
}
|
|
5580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, decorators: [{
|
|
5581
6255
|
type: Directive,
|
|
5582
6256
|
args: [{
|
|
5583
6257
|
selector: '[rtuiDynamicInputAdditionalControlDirective]',
|
|
@@ -5732,8 +6406,8 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
|
|
|
5732
6406
|
#setResetListButtonState(value) {
|
|
5733
6407
|
this.isResetButtonDisabled.set(areArraysEqual(this.#initialEntities(), value));
|
|
5734
6408
|
}
|
|
5735
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5736
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
6409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiDynamicInputComponent, isStandalone: true, selector: "rtui-dynamic-input", inputs: { isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, isInputsEditable: { classPropertyName: "isInputsEditable", publicName: "isInputsEditable", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPlaceholderShown: "isPlaceholderShownChange" }, host: { classAttribute: "rtui-dynamic-input" }, providers: [
|
|
5737
6411
|
BreakpointService,
|
|
5738
6412
|
{
|
|
5739
6413
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -5753,7 +6427,7 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
|
|
|
5753
6427
|
// components
|
|
5754
6428
|
RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5755
6429
|
}
|
|
5756
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiDynamicInputComponent, decorators: [{
|
|
5757
6431
|
type: Component,
|
|
5758
6432
|
args: [{ selector: 'rtui-dynamic-input', host: { class: BEM_BLOCK$1 }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5759
6433
|
ConcatClassesPipe,
|
|
@@ -5885,8 +6559,8 @@ class RtuiImageUploadComponent {
|
|
|
5885
6559
|
}
|
|
5886
6560
|
this.save.emit();
|
|
5887
6561
|
}
|
|
5888
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5889
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
6562
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6563
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtuiImageUploadComponent, isStandalone: true, selector: "rtui-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isSaveButtonShown: { classPropertyName: "isSaveButtonShown", publicName: "isSaveButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isDownloadButtonEnabled: { classPropertyName: "isDownloadButtonEnabled", publicName: "isDownloadButtonEnabled", isSignal: true, isRequired: false, transformFunction: null }, isTooltipDisabled: { classPropertyName: "isTooltipDisabled", publicName: "isTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, isActionsShown: { classPropertyName: "isActionsShown", publicName: "isActionsShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, imageQuality: { classPropertyName: "imageQuality", publicName: "imageQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrl: "imageUrlChange", imageChanged: "imageChanged", save: "save" }, host: { classAttribute: "rtui-image-upload" }, providers: [BreakpointService], ngImport: i0, template: "@if (loading()) {\n <rtui-spinner />\n} @else if (originalImage()) {\n <div rtBlock=\"rtui-image-cropper\">\n <image-cropper\n alignImage=\"center\"\n [format]=\"imageFormat()\"\n [imageQuality]=\"imageQuality()\"\n [allowMoveImage]=\"true\"\n [maintainAspectRatio]=\"false\"\n [imageFile]=\"originalImage()\"\n (imageCropped)=\"onImageCropped($event)\" />\n\n @if (isActionsShown()) {\n <div rtElem=\"actions\">\n <button mat-button color=\"accent\" (click)=\"onCancel()\">Cancel</button>\n <button mat-flat-button (click)=\"onApply()\">Apply</button>\n </div>\n }\n </div>\n} @else {\n <input #uploadInput hidden type=\"file\" accept=\".jpg,.jpeg,.png,.webp\" (change)=\"onFileSelect($event)\" />\n\n @if (imageUrl()) {\n <div rtBlock=\"rtui-image-container\">\n <img\n rtElem=\"image\"\n role=\"button\"\n tabindex=\"0\"\n alt=\"img\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltip]=\"tooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltipDisabled]=\"narrow() || !tooltip() || !isActive() || isTooltipDisabled()\"\n [rtMod]=\"{ active: isActive() }\"\n [src]=\"imageUrl()\"\n (click)=\"uploadInput.click()\"\n (keydown.enter)=\"uploadInput.click()\" />\n\n @if (isSaveButtonShown()) {\n <button\n rtElem=\"action\"\n mat-icon-button\n aria-label=\"Download image\"\n matTooltip=\"Download image\"\n matTooltipPosition=\"above\"\n [matTooltipDisabled]=\"narrow()\"\n (click)=\"onDownloadImage()\">\n <mat-icon rtIconOutlined>download</mat-icon>\n </button>\n }\n </div>\n } @else {\n <rtui-file-upload (uploadFile)=\"onFileUpload($event)\" />\n }\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-image-upload-host-width: 100%;--rt-image-upload-host-min-width: 100%;--rt-image-upload-host-max-width: 100%;--rt-image-upload-host-height: 100%;--rt-image-upload-host-min-height: 15rem;--rt-image-upload-host-max-height: 100%;--rt-image-upload-host-display: flex;--rt-image-upload-host-justify-content: center;--rt-image-upload-host-align-items: center;--rt-image-upload-image-cropper-padding: .25rem;--rt-image-upload-image-cropper-actions-display: flex;--rt-image-upload-image-cropper-actions-justify-content: flex-end;--rt-image-upload-image-cropper-actions-gap: .5rem;--rt-image-upload-image-cropper-actions-margin-top: .5rem;--rt-image-upload-image-container-position: relative;--rt-image-upload-image-container-padding: .5rem;--rt-image-upload-image-container-image-position: relative;--rt-image-upload-image-container-image-height: 100%;--rt-image-upload-image-container-image-max-height: 15rem;--rt-image-upload-image-container-image-object-fit: contain;display:var(--rt-image-upload-host-display);width:var(--rt-image-upload-host-width);min-width:var(--rt-image-upload-host-min-height);max-width:var(--rt-image-upload-host-max-width);height:var(--rt-image-upload-host-height);min-height:var(--rt-image-upload-host-min-height);max-height:var(--rt-image-upload-host-max-height);align-items:var(--rt-image-upload-host-align-items);justify-content:var(--rt-image-upload-host-justify-content)}:host .rtui-image-cropper{padding:var(--rt-image-upload-image-cropper-padding)}:host .rtui-image-cropper__actions{display:var(--rt-image-upload-image-cropper-actions-display);justify-content:var(--rt-image-upload-image-cropper-actions-justify-content);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top);gap:var(--rt-image-upload-image-cropper-actions-gap)}:host .rtui-image-container{position:var(--rt-image-upload-image-container-position);padding:var(--rt-image-upload-image-container-padding)}:host .rtui-image-container__image{position:var(--rt-image-upload-image-container-image-position);height:var(--rt-image-upload-image-container-image-height);max-height:var(--rt-image-upload-image-container-image-max-height);object-fit:var(--rt-image-upload-image-container-image-object-fit);pointer-events:none}:host .rtui-image-container__image--active{cursor:pointer;pointer-events:initial}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;z-index:999;top:0;right:0;backdrop-filter:blur(1.25rem)}\n"], dependencies: [{ kind: "component", type:
|
|
5890
6564
|
// material
|
|
5891
6565
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type:
|
|
5892
6566
|
// cropper
|
|
@@ -5894,7 +6568,7 @@ class RtuiImageUploadComponent {
|
|
|
5894
6568
|
// rt-tools
|
|
5895
6569
|
ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground", "delay"] }, { kind: "component", type: RtuiFileUploadComponent, selector: "rtui-file-upload", inputs: ["isIconOutlined"], outputs: ["uploadFile"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5896
6570
|
}
|
|
5897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtuiImageUploadComponent, decorators: [{
|
|
5898
6572
|
type: Component,
|
|
5899
6573
|
args: [{ selector: 'rtui-image-upload', host: { class: BEM_BLOCK }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5900
6574
|
// material
|
|
@@ -6105,10 +6779,10 @@ class RtThemeService {
|
|
|
6105
6779
|
}
|
|
6106
6780
|
return this.#theme() === ERtTheme.DARK;
|
|
6107
6781
|
}
|
|
6108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
6109
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
6782
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6783
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThemeService, providedIn: 'root' }); }
|
|
6110
6784
|
}
|
|
6111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThemeService, decorators: [{
|
|
6112
6786
|
type: Injectable,
|
|
6113
6787
|
args: [{ providedIn: 'root' }]
|
|
6114
6788
|
}], ctorParameters: () => [] });
|
|
@@ -6132,10 +6806,10 @@ class RtThemeDirective {
|
|
|
6132
6806
|
this.rtTheme = input('', /* @ts-ignore */
|
|
6133
6807
|
...(ngDevMode ? [{ debugName: "rtTheme" }] : /* istanbul ignore next */ []));
|
|
6134
6808
|
}
|
|
6135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
6136
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
6809
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6810
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtThemeDirective, isStandalone: true, selector: "[rtTheme]", inputs: { rtTheme: { classPropertyName: "rtTheme", publicName: "rtTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-rt-theme": "rtTheme() || null" } }, ngImport: i0 }); }
|
|
6137
6811
|
}
|
|
6138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
6812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtThemeDirective, decorators: [{
|
|
6139
6813
|
type: Directive,
|
|
6140
6814
|
args: [{
|
|
6141
6815
|
standalone: true,
|
|
@@ -6155,5 +6829,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6155
6829
|
* Generated bundle index. Do not edit.
|
|
6156
6830
|
*/
|
|
6157
6831
|
|
|
6158
|
-
export { ASIDE_REF, AsideRef, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, EAsideButtons, EInfoBadgeSize, EInfoBadgeType, EModalWindowSize, ERtAccentRole, ERtTheme, ETableColumnFilterTypes, ETableColumnTypes, ETextCellColor, EToggleSizeType, RTUI_SIDE_MENU, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_STORAGE_KEY, RT_UI_CONFIG, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtHideTooltipDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, SUB_MENU_MODE_KEY, SUB_MENU_WIDTH_KEY, SUB_MENU_WIDTH_MAX, SUB_MENU_WIDTH_MIN, clampSubMenuWidth, comparePropNames, darkenHexColor, getColorBasedOnBackground, provideRtUi, readSubMenuMode, readSubMenuWidth, splitSubMenuTitle, writeSubMenuMode, writeSubMenuWidth };
|
|
6832
|
+
export { ASIDE_REF, AsideRef, DEFAULT_MENU_ID, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, EAsideButtons, EInfoBadgeSize, EInfoBadgeType, EModalWindowSize, ERtAccentRole, ERtTheme, ETableColumnFilterTypes, ETableColumnTypes, ETextCellColor, EToggleSizeType, RTUI_SIDE_MENU, RTUI_SIDE_MENU_SETTINGS_CONFIG, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_STORAGE_KEY, RT_UI_CONFIG, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtHideTooltipDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSideMenuSettingsService, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, SIDE_MENU_SETTINGS_KEY, SUB_MENU_MODE_KEY, SUB_MENU_WIDTH_KEY, SUB_MENU_WIDTH_MAX, SUB_MENU_WIDTH_MIN, clampSubMenuWidth, comparePropNames, darkenHexColor, getColorBasedOnBackground, provideRtUi, provideRtuiSideMenuSettings, readSubMenuMode, readSubMenuWidth, splitSubMenuTitle, writeSubMenuMode, writeSubMenuWidth };
|
|
6159
6833
|
//# sourceMappingURL=rt-tools-ui-kit.mjs.map
|