@rt-tools/ui-kit 0.0.19 → 0.0.21
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/fesm2022/rt-tools-ui-kit.mjs +338 -144
- package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
- package/package.json +5 -5
- package/rt-tools-ui-kit-0.0.21.tgz +0 -0
- package/src/lib/ui-kit/action-bar/components/bar/rtui-action-bar.component.scss +18 -18
- package/src/lib/ui-kit/action-bar/components/container/rtui-action-bar-container.component.scss +5 -7
- package/src/lib/ui-kit/aside/components/container/aside-container.component.scss +1 -0
- package/src/lib/ui-kit/aside/components/error-notification/aside-error-box.component.scss +6 -6
- package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss +25 -32
- package/src/lib/ui-kit/aside/stories/aside-component/test-aside.component.scss +1 -1
- package/src/lib/ui-kit/buttons/multi-button/rtui-multi-button.component.scss +7 -7
- package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss +247 -0
- package/src/lib/ui-kit/checkbox/rtui-checkbox.component.scss +10 -10
- package/src/lib/ui-kit/checkbox/stories/component/test-checkbox.component.scss +2 -2
- package/src/lib/ui-kit/dynamic-selectors/components/actions/rtui-dynamic-selector-list-actions.component.scss +2 -2
- package/src/lib/ui-kit/dynamic-selectors/components/dynamic-selector/rtui-dynamic-selector.component.scss +3 -3
- package/src/lib/ui-kit/dynamic-selectors/components/multi-selector-popup/rtui-multi-selector-popup.component.scss +17 -17
- package/src/lib/ui-kit/dynamic-selectors/components/placeholder/rtui-dynamic-selector-placeholder.component.scss +3 -4
- package/src/lib/ui-kit/dynamic-selectors/components/selected-list/rtui-dynamic-selector-selected-list.component.scss +2 -2
- package/src/lib/ui-kit/dynamic-selectors/strories/component/input/test-dynamic-input.component.scss +2 -3
- package/src/lib/ui-kit/dynamic-selectors/strories/component/selector/test-selector.component.scss +4 -5
- package/src/lib/ui-kit/file-uploader/rtui-file-upload.component.scss +5 -5
- package/src/lib/ui-kit/file-uploader/stories/component/test-file-upload.component.scss +1 -1
- package/src/lib/ui-kit/header/header.component.scss +1 -0
- package/src/lib/ui-kit/header/stories/component/test-header.component.scss +3 -3
- package/src/lib/ui-kit/icon/rtui-icon.component.scss +110 -0
- package/src/lib/ui-kit/image-uploader/image-uploader/rtui-image-upload.component.scss +5 -5
- package/src/lib/ui-kit/image-uploader/stories/component/test-image-upload.component.scss +2 -2
- package/src/lib/ui-kit/info-badge/info-badge.component.scss +20 -19
- package/src/lib/ui-kit/info-badge/stories/component/test-info-badge/test-info-badge.component.scss +1 -1
- package/src/lib/ui-kit/modal/modal.component.scss +5 -5
- package/src/lib/ui-kit/popover/rtui-popover-container.component.scss +2 -3
- package/src/lib/ui-kit/scrollable/scrollable-container.component.scss +3 -5
- package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss +25 -25
- package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss +14 -14
- package/src/lib/ui-kit/side-menu/stories/component/test-side-menu-wrapper.component.scss +10 -10
- package/src/lib/ui-kit/snack-bar/snack-bar.component.scss +9 -9
- package/src/lib/ui-kit/snack-bar/stories/component/test-snack-bar.component.scss +3 -3
- package/src/lib/ui-kit/spinner/spinner.component.scss +10 -13
- package/src/lib/ui-kit/table/components/clear-search-button/rtui-clear-button.component.scss +5 -5
- package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss +14 -22
- package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss +8 -9
- package/src/lib/ui-kit/table/components/table-config-aside/rt-table-config-aside.component.scss +1 -1
- package/src/lib/ui-kit/table/components/table-container/table-container.component.scss +16 -14
- package/src/lib/ui-kit/table/components/table-header-cell/table-header-cell.component.scss +6 -7
- package/src/lib/ui-kit/table/components/table-header-filter-cell/table-header-filter-cell.component.scss +3 -3
- package/src/lib/ui-kit/table/dynamic-list.component.scss +2 -2
- package/src/lib/ui-kit/table/stories/dynamic-list/test-dynamic-list.component.scss +1 -1
- package/src/lib/ui-kit/table/stories/pagination/test-pagination-component.scss +4 -4
- package/src/lib/ui-kit/table/stories/table/test-table-component.scss +1 -1
- package/src/lib/ui-kit/toggle/rtui-toggle.component.scss +15 -21
- package/src/lib/ui-kit/toggle/stories/component/test-toggle.component.scss +2 -2
- package/src/lib/ui-kit/toolbar/toolbar.component.scss +5 -10
- package/src/styles/TOKENS.md +95 -2
- package/src/styles/base/_base.scss +4 -5
- package/src/styles/base/_color-scheme.scss +86 -0
- package/src/styles/base/_mixin.scss +12 -15
- package/src/styles/base/_tokens.scss +139 -99
- package/src/styles/base/_variables.scss +5 -11
- package/src/styles/color-scheme.spec.ts +236 -0
- package/src/styles/components/_button.scss +32 -24
- package/src/styles/components/_dynamic-selectors.scss +9 -10
- package/src/styles/components/_form.scss +8 -13
- package/src/styles/components/_material-bridge.scss +30 -0
- package/src/styles/components/_rtui_button.scss +100 -5
- package/src/styles/components/_table.scss +23 -39
- package/src/styles/main.scss +4 -0
- package/styles/tokens.css +79 -101
- package/types/rt-tools-ui-kit.d.ts +99 -37
- package/rt-tools-ui-kit-0.0.19.tgz +0 -0
- package/src/lib/ui-kit/buttons/icon-round/rtui-round-icon-button.component.scss +0 -44
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { NgStyle, NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe,
|
|
1
|
+
import { NgStyle, NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe, DOCUMENT, TitleCasePipe } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { inject, HostBinding, ChangeDetectionStrategy, Component, Injectable, Directive, contentChild, TemplateRef, input, booleanAttribute, output, viewChild, signal, computed, numberAttribute, InjectionToken, Injector, ViewEncapsulation, model, DestroyRef, effect, HostListener, ElementRef, forwardRef, ChangeDetectorRef, untracked, ViewContainerRef, afterNextRender } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
@@ -12,15 +12,16 @@ 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 { BlockDirective, ElemDirective, WINDOW, IDBStorageService,
|
|
16
|
-
import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, isString, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate,
|
|
15
|
+
import { BlockDirective, ElemDirective, ModDirective, WINDOW, IDBStorageService, PlatformService, LOCAL_STORAGE } from '@rt-tools/core';
|
|
16
|
+
import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, transformStringInput, isString, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet, RtEscapeKeyDirective, POSITION_ENUM } from '@rt-tools/utils';
|
|
17
17
|
import { ReplaySubject, share, Subject, merge, of, noop } from 'rxjs';
|
|
18
|
-
import { filter, map, delay,
|
|
18
|
+
import { filter, map, delay, take, tap, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
19
19
|
import { MatListItem, MatNavList, MatListItemIcon, MatListItemTitle } from '@angular/material/list';
|
|
20
20
|
import * as i1$2 from '@angular/material/sidenav';
|
|
21
21
|
import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
|
|
22
22
|
import * as i1$1 from '@angular/material/expansion';
|
|
23
23
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
24
|
+
import * as i1$5 from '@angular/material/tooltip';
|
|
24
25
|
import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
|
|
25
26
|
import * as i1$3 from '@angular/material/progress-spinner';
|
|
26
27
|
import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
@@ -80,7 +81,7 @@ class RtuiModalComponent {
|
|
|
80
81
|
});
|
|
81
82
|
}
|
|
82
83
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
83
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 rtElem=\"confirmation\" [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 [ngClass]=\"button.className\"\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: ["
|
|
84
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 rtElem=\"confirmation\" [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 [ngClass]=\"button.className\"\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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
85
|
// material
|
|
85
86
|
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
87
|
// BEM
|
|
@@ -103,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
103
104
|
// BEM
|
|
104
105
|
BlockDirective,
|
|
105
106
|
ElemDirective,
|
|
106
|
-
], 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 rtElem=\"confirmation\" [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 [ngClass]=\"button.className\"\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: ["
|
|
107
|
+
], 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 rtElem=\"confirmation\" [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 [ngClass]=\"button.className\"\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"] }]
|
|
107
108
|
}], propDecorators: { hostClasses: [{
|
|
108
109
|
type: HostBinding,
|
|
109
110
|
args: ['class']
|
|
@@ -194,11 +195,11 @@ class RtuiScrollableContainerComponent {
|
|
|
194
195
|
this.footerTpl = contentChild(RtuiScrollableContainerFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : {}), read: TemplateRef });
|
|
195
196
|
}
|
|
196
197
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiScrollableContainerComponent, isStandalone: true, selector: "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 }], 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 rtElem=\"content\">\n <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n </div>\n }\n\n @if (footerTpl()) {\n <div rtElem=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </div>\n }\n</ng-container>\n", styles: ["
|
|
198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiScrollableContainerComponent, isStandalone: true, selector: "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 }], 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 rtElem=\"content\">\n <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n </div>\n }\n\n @if (footerTpl()) {\n <div rtElem=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{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)}: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)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
198
199
|
}
|
|
199
200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerComponent, decorators: [{
|
|
200
201
|
type: Component,
|
|
201
|
-
args: [{ selector: 'rtui-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BlockDirective, ElemDirective, NgTemplateOutlet], 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 rtElem=\"content\">\n <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n </div>\n }\n\n @if (footerTpl()) {\n <div rtElem=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </div>\n }\n</ng-container>\n", styles: ["
|
|
202
|
+
args: [{ selector: 'rtui-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BlockDirective, ElemDirective, NgTemplateOutlet], 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 rtElem=\"content\">\n <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n </div>\n }\n\n @if (footerTpl()) {\n <div rtElem=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{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)}: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)}\n"] }]
|
|
202
203
|
}], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerHeaderDirective), { ...{
|
|
203
204
|
read: TemplateRef,
|
|
204
205
|
}, isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerContentDirective), { ...{
|
|
@@ -233,9 +234,9 @@ class RtuiSideMenuSubItemComponent {
|
|
|
233
234
|
disableTooltipInteractivity: true,
|
|
234
235
|
},
|
|
235
236
|
},
|
|
236
|
-
], 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() }\"\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() || isMobile()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\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?.length) {\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\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() || isMobile()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded) {\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::ng-deep .mat-expansion-indicator{padding:0
|
|
237
|
+
], 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() }\"\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() || isMobile()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\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?.length) {\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\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() || isMobile()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded) {\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::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:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}: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 .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:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:var(--rt-side-menu-sub-menu-item-width);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__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: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$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.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:
|
|
237
238
|
// directives
|
|
238
|
-
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: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
239
|
+
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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
239
240
|
}
|
|
240
241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuSubItemComponent, decorators: [{
|
|
241
242
|
type: Component,
|
|
@@ -251,6 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
251
252
|
// directives
|
|
252
253
|
BlockDirective,
|
|
253
254
|
ElemDirective,
|
|
255
|
+
ModDirective,
|
|
254
256
|
RtIconOutlinedDirective,
|
|
255
257
|
RtHideTooltipDirective,
|
|
256
258
|
], providers: [
|
|
@@ -260,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
260
262
|
disableTooltipInteractivity: true,
|
|
261
263
|
},
|
|
262
264
|
},
|
|
263
|
-
], 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() }\"\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() || isMobile()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\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?.length) {\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\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() || isMobile()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded) {\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::ng-deep .mat-expansion-indicator{padding:0
|
|
265
|
+
], 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() }\"\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() || isMobile()\"\n [rtHideTooltipDirective]=\"titleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\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?.length) {\n <mat-expansion-panel\n #panel\n rtBlock=\"rtui-side-menu-expand-sub-item\"\n [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n <mat-expansion-panel-header\n rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\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() || isMobile()\"\n [rtHideTooltipDirective]=\"headerTitleTpl\"\n [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n {{ item.name }}\n </div>\n }\n </mat-expansion-panel-header>\n\n @if (panel?.expanded) {\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::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:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}: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 .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:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:var(--rt-side-menu-sub-menu-item-width);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__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:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"] }]
|
|
264
266
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], 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"] }] } });
|
|
265
267
|
|
|
266
268
|
class RtuiSideMenuHeaderDirective {
|
|
@@ -359,9 +361,9 @@ class RtuiSideMenuComponent {
|
|
|
359
361
|
this.subMenuRef()?.open().then();
|
|
360
362
|
}
|
|
361
363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
362
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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: { closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, 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 }], ngImport: i0, template: "@if (isMobile()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\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]=\"selectedSubMenu() ?? []\">\n <rtui-side-menu-sub-item\n [item]=\"backToMainMenuButton()\"\n [isMobile]=\"isMobile()\"\n (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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\">\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 [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"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: subMenuRef()?.opened }\"\n [hasBackdrop]=\"true\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable>\n <ng-container *rtuiScrollableContent>\n @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"selectedSubMenu() ?? []\">\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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", styles: [":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-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;flex-direction:column;width:100%}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}: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;justify-content:space-between;align-items:center}: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{font-size:.75rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}: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;justify-content:center;align-items:center;margin-left:.5rem;border-radius:50%}: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:.5rem}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;flex-direction:column;align-items:center;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{padding:0;display:flex;justify-content:center;align-items:center;height:var(--rt-side-menu-item-height);width:var(--rt-side-menu-item-width)}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;justify-content:center;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);text-align:var(--rt-side-menu-item-text-align);line-height:var(--rt-side-menu-item-line-height)}: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-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{width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:14px 0 28px #00000040,10px 0 10px #00000038}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fadeInAnimation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { 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:
|
|
364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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: { closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, 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 }], ngImport: i0, template: "@if (isMobile()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\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]=\"selectedSubMenu() ?? []\">\n <rtui-side-menu-sub-item\n [item]=\"backToMainMenuButton()\"\n [isMobile]=\"isMobile()\"\n (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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\">\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 [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"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: subMenuRef()?.opened }\"\n [hasBackdrop]=\"true\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable>\n <ng-container *rtuiScrollableContent>\n @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"selectedSubMenu() ?? []\">\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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", styles: ["@charset \"UTF-8\";: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-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-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{width:fit-content}: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-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:var(--rt-side-menu-sub-menu-width);height:100%;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__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:fit-content}@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$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { 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:
|
|
363
365
|
// directives
|
|
364
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["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:
|
|
366
|
+
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:
|
|
365
367
|
// components
|
|
366
368
|
RtuiScrollableContainerComponent, selector: "rtui-scrollable" }, { kind: "component", type: RtuiSideMenuSubItemComponent, selector: "rtui-side-menu-sub-item", inputs: ["item", "isMobile", "isSubMenuXScrollEnabled", "isSubMenuIconsOutlined", "isSubMenuButtonIconsOutlined", "isSubMenuTooltipsShown"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
367
369
|
}
|
|
@@ -377,6 +379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
377
379
|
// directives
|
|
378
380
|
BlockDirective,
|
|
379
381
|
ElemDirective,
|
|
382
|
+
ModDirective,
|
|
380
383
|
RtuiScrollableContainerHeaderDirective,
|
|
381
384
|
RtuiScrollableContainerContentDirective,
|
|
382
385
|
RtuiScrollableContainerFooterDirective,
|
|
@@ -386,7 +389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
386
389
|
// components
|
|
387
390
|
RtuiScrollableContainerComponent,
|
|
388
391
|
RtuiSideMenuSubItemComponent,
|
|
389
|
-
], template: "@if (isMobile()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\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]=\"selectedSubMenu() ?? []\">\n <rtui-side-menu-sub-item\n [item]=\"backToMainMenuButton()\"\n [isMobile]=\"isMobile()\"\n (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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\">\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 [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"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: subMenuRef()?.opened }\"\n [hasBackdrop]=\"true\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable>\n <ng-container *rtuiScrollableContent>\n @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"selectedSubMenu() ?? []\">\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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", styles: [":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-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;flex-direction:column;width:100%}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}: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;justify-content:space-between;align-items:center}: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{font-size:.75rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}: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;justify-content:center;align-items:center;margin-left:.5rem;border-radius:50%}: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:.5rem}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;flex-direction:column;align-items:center;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{padding:0;display:flex;justify-content:center;align-items:center;height:var(--rt-side-menu-item-height);width:var(--rt-side-menu-item-width)}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;justify-content:center;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);text-align:var(--rt-side-menu-item-text-align);line-height:var(--rt-side-menu-item-line-height)}: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-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{width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:14px 0 28px #00000040,10px 0 10px #00000038}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fadeInAnimation{to{opacity:1}}\n"] }]
|
|
392
|
+
], template: "@if (isMobile()) {\n <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\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]=\"selectedSubMenu() ?? []\">\n <rtui-side-menu-sub-item\n [item]=\"backToMainMenuButton()\"\n [isMobile]=\"isMobile()\"\n (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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\">\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 [rtNavigationDirective]=\"item?.link\"\n (mouseenter)=\"toggleSubMenu(item)\"\n (click)=\"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: subMenuRef()?.opened }\"\n [hasBackdrop]=\"true\"\n (backdropClick)=\"closeSubMenu()\">\n <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n <rtui-scrollable>\n <ng-container *rtuiScrollableContent>\n @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n <mat-nav-list\n rtElem=\"list\"\n [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n [rtScrollToElement]=\"activeMenuId()\"\n [elements]=\"selectedSubMenu() ?? []\">\n @for (item of selectedSubMenu(); track i; let i = $index) {\n <rtui-side-menu-sub-item\n [item]=\"item\"\n [isMobile]=\"isMobile()\"\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", styles: ["@charset \"UTF-8\";: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-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-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{width:fit-content}: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-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:var(--rt-side-menu-sub-menu-width);height:100%;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__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:fit-content}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
|
|
390
393
|
}], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
|
|
391
394
|
read: TemplateRef,
|
|
392
395
|
}, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
|
|
@@ -400,11 +403,11 @@ class RtuiSpinnerComponent {
|
|
|
400
403
|
this.showBackground = input(false, { ...(ngDevMode ? { debugName: "showBackground" } : {}), transform: booleanAttribute });
|
|
401
404
|
}
|
|
402
405
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
403
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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 } }, ngImport: i0, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n <mat-spinner [diameter]=\"diameter()\" />\n </div>\n</div>\n", styles: [":host{z-index:10000;
|
|
406
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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 } }, ngImport: i0, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n <mat-spinner [diameter]=\"diameter()\" />\n </div>\n</div>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .c-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$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
404
407
|
}
|
|
405
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSpinnerComponent, decorators: [{
|
|
406
409
|
type: Component,
|
|
407
|
-
args: [{ selector: 'rtui-spinner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n <mat-spinner [diameter]=\"diameter()\" />\n </div>\n</div>\n", styles: [":host{z-index:10000;
|
|
410
|
+
args: [{ selector: 'rtui-spinner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n <mat-spinner [diameter]=\"diameter()\" />\n </div>\n</div>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .c-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"] }]
|
|
408
411
|
}], 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 }] }] } });
|
|
409
412
|
|
|
410
413
|
class AsideRef {
|
|
@@ -465,7 +468,7 @@ class RtuiAsidePanelComponent {
|
|
|
465
468
|
return new ComponentPortal(asideRef.component, null, injector);
|
|
466
469
|
}
|
|
467
470
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiAsidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: RtuiAsidePanelComponent, isStandalone: true, selector: "rtui-aside-panel", host: { properties: { "@aside": "this._state" } }, ngImport: i0, template: "<div\n class=\"c-aside\"\n [class.position-left]=\"position === 'left'\"\n [class.position-right]=\"position === 'right'\"\n [class.full-screen]=\"isSmall$ | async\">\n <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["
|
|
471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: RtuiAsidePanelComponent, isStandalone: true, selector: "rtui-aside-panel", host: { properties: { "@aside": "this._state" } }, ngImport: i0, template: "<div\n class=\"c-aside\"\n [class.position-left]=\"position === 'left'\"\n [class.position-right]=\"position === 'right'\"\n [class.full-screen]=\"isSmall$ | async\">\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-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.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$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
469
472
|
trigger('aside', [
|
|
470
473
|
state('enter-left', style({ transform: 'none' })),
|
|
471
474
|
transition('* => enter-left', [
|
|
@@ -499,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
499
502
|
]),
|
|
500
503
|
transition('enter-right => *', animate('200ms ease-in', style({ transform: 'translateX(100%)' }))),
|
|
501
504
|
]),
|
|
502
|
-
], template: "<div\n class=\"c-aside\"\n [class.position-left]=\"position === 'left'\"\n [class.position-right]=\"position === 'right'\"\n [class.full-screen]=\"isSmall$ | async\">\n <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["
|
|
505
|
+
], template: "<div\n class=\"c-aside\"\n [class.position-left]=\"position === 'left'\"\n [class.position-right]=\"position === 'right'\"\n [class.full-screen]=\"isSmall$ | async\">\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-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.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"] }]
|
|
503
506
|
}], propDecorators: { _state: [{
|
|
504
507
|
type: HostBinding,
|
|
505
508
|
args: ['@aside']
|
|
@@ -528,7 +531,10 @@ class RtAsideService {
|
|
|
528
531
|
const portal = this.#createPortal(asideRef);
|
|
529
532
|
const componentRef = overlayRef.attach(portal);
|
|
530
533
|
merge(overlayRef.backdropClick(), overlayRef.keydownEvents().pipe(filter((keyEvent) => keyEvent.key === 'Escape')), this.#router.events.pipe(filter((e) => e instanceof NavigationEnd)), answer.pipe(delay(10)))
|
|
531
|
-
.pipe(
|
|
534
|
+
.pipe(
|
|
535
|
+
// The aside closes on the first of these events — terminate so the merged
|
|
536
|
+
// hot sources (router/backdrop/keydown) don't keep the subscription alive.
|
|
537
|
+
take(1), tap(() => {
|
|
532
538
|
componentRef.instance.startExitAnimation();
|
|
533
539
|
overlayRef.detach();
|
|
534
540
|
answer.complete();
|
|
@@ -638,11 +644,11 @@ class RtuiToolbarComponent {
|
|
|
638
644
|
this.sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), transform: booleanAttribute });
|
|
639
645
|
}
|
|
640
646
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
641
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 } }, 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: ["
|
|
647
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 } }, 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 }); }
|
|
642
648
|
}
|
|
643
649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarComponent, decorators: [{
|
|
644
650
|
type: Component,
|
|
645
|
-
args: [{ selector: 'rtui-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatToolbar, NgTemplateOutlet, BlockDirective, ElemDirective], 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: ["
|
|
651
|
+
args: [{ selector: 'rtui-toolbar', 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"] }]
|
|
646
652
|
}], propDecorators: { isVisibleToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisibleToolbar", required: false }] }], leftToolTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiToolbarLeftDirective), { ...{
|
|
647
653
|
read: TemplateRef,
|
|
648
654
|
}, isSignal: true }] }], centerToolTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiToolbarCenterDirective), { ...{
|
|
@@ -665,7 +671,7 @@ class AsideErrorBoxComponent {
|
|
|
665
671
|
setTimeout(() => this.isErrorCopied.set(false), 1000);
|
|
666
672
|
}
|
|
667
673
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
668
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AsideErrorBoxComponent, isStandalone: true, selector: "rtui-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, 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=\"c-button c-button--txt-base--size-sm\"\n [class.--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;
|
|
674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AsideErrorBoxComponent, isStandalone: true, selector: "rtui-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, 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=\"c-button c-button--txt-base--size-sm\"\n [class.--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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
669
675
|
// bem
|
|
670
676
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
671
677
|
}
|
|
@@ -677,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
677
683
|
// bem
|
|
678
684
|
BlockDirective,
|
|
679
685
|
ElemDirective,
|
|
680
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"c-button c-button--txt-base--size-sm\"\n [class.--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;
|
|
686
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"c-button c-button--txt-base--size-sm\"\n [class.--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"] }]
|
|
681
687
|
}], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }] } });
|
|
682
688
|
|
|
683
689
|
class RtuiAsideContainerHeaderDirective {
|
|
@@ -761,84 +767,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
761
767
|
read: TemplateRef,
|
|
762
768
|
}, isSignal: true }] }] } });
|
|
763
769
|
|
|
764
|
-
|
|
770
|
+
const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
|
|
771
|
+
const fontLoaded = signal(false, { ...(ngDevMode ? { debugName: "fontLoaded" } : {}) });
|
|
772
|
+
class RtuiIconComponent {
|
|
773
|
+
#document;
|
|
765
774
|
constructor() {
|
|
766
|
-
this
|
|
775
|
+
this.#document = inject(DOCUMENT);
|
|
776
|
+
this.fontLoaded = fontLoaded.asReadonly();
|
|
777
|
+
this.hostClasses = computed(() => {
|
|
778
|
+
const classes = [`rtui-icon--size-${this.size()}`, `rtui-icon--theme-${this.theme()}`];
|
|
779
|
+
if (this.rotate()) {
|
|
780
|
+
classes.push('rtui-icon--rotate');
|
|
781
|
+
}
|
|
782
|
+
if (!this.fontLoaded()) {
|
|
783
|
+
classes.push('rtui-icon--loading');
|
|
784
|
+
}
|
|
785
|
+
return classes.join(' ');
|
|
786
|
+
}, { ...(ngDevMode ? { debugName: "hostClasses" } : {}) });
|
|
787
|
+
this.size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
788
|
+
this.theme = input('inherit', { ...(ngDevMode ? { debugName: "theme" } : {}) });
|
|
789
|
+
this.glyph = input('', { ...(ngDevMode ? { debugName: "glyph" } : {}), transform: transformStringInput });
|
|
790
|
+
this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : {}), transform: booleanAttribute });
|
|
791
|
+
this.rotate = input(false, { ...(ngDevMode ? { debugName: "rotate" } : {}), transform: booleanAttribute });
|
|
792
|
+
if (!fontLoaded()) {
|
|
793
|
+
this.#checkFontLoaded();
|
|
794
|
+
}
|
|
767
795
|
}
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
796
|
+
#checkFontLoaded() {
|
|
797
|
+
const fonts = this.#document.fonts;
|
|
798
|
+
if (fonts.check(`1rem "${MATERIAL_SYMBOLS_FONT}"`)) {
|
|
799
|
+
fontLoaded.set(true);
|
|
800
|
+
return;
|
|
801
|
+
}
|
|
802
|
+
fonts.ready.then(() => {
|
|
803
|
+
fontLoaded.set(true);
|
|
804
|
+
});
|
|
805
|
+
}
|
|
806
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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$5.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: [".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:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.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:1.375rem;height:1.375rem;font-size:1.375rem}\n"], dependencies: [{ kind: "component", type:
|
|
808
|
+
// material
|
|
809
|
+
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
810
|
+
// directives
|
|
811
|
+
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
772
812
|
}
|
|
773
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type:
|
|
813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiIconComponent, decorators: [{
|
|
774
814
|
type: Component,
|
|
775
|
-
args: [{ selector: 'rtui-
|
|
815
|
+
args: [{ selector: 'rtui-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
816
|
+
// material
|
|
776
817
|
MatIcon,
|
|
777
|
-
//
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
818
|
+
// directives
|
|
819
|
+
RtIconOutlinedDirective,
|
|
820
|
+
], hostDirectives: [
|
|
821
|
+
{
|
|
822
|
+
directive: MatTooltip,
|
|
823
|
+
inputs: ['matTooltip: tooltip', 'matTooltipPosition: tooltipPosition', 'matTooltipDisabled: tooltipDisabled'],
|
|
824
|
+
},
|
|
825
|
+
], host: {
|
|
826
|
+
class: 'rtui-icon',
|
|
827
|
+
'[class]': 'hostClasses()',
|
|
828
|
+
}, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n @if (glyph()) {\n {{ glyph() }}\n } @else {\n <ng-content />\n }\n</mat-icon>\n", styles: [".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:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.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:1.375rem;height:1.375rem;font-size:1.375rem}\n"] }]
|
|
829
|
+
}], 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 }] }] } });
|
|
782
830
|
|
|
783
|
-
var BUTTON_SIZE;
|
|
784
|
-
(function (BUTTON_SIZE) {
|
|
785
|
-
BUTTON_SIZE["SMALL"] = "sm";
|
|
786
|
-
BUTTON_SIZE["MEDIUM"] = "md";
|
|
787
|
-
BUTTON_SIZE["LARGE"] = "lg";
|
|
788
|
-
BUTTON_SIZE["FULL"] = "full";
|
|
789
|
-
})(BUTTON_SIZE || (BUTTON_SIZE = {}));
|
|
790
|
-
var BUTTON_COLOR;
|
|
791
|
-
(function (BUTTON_COLOR) {
|
|
792
|
-
BUTTON_COLOR["ACCENT"] = "accent";
|
|
793
|
-
BUTTON_COLOR["SUCCESS"] = "success";
|
|
794
|
-
BUTTON_COLOR["SECONDARY"] = "secondary";
|
|
795
|
-
BUTTON_COLOR["ERROR"] = "error";
|
|
796
|
-
BUTTON_COLOR["WARNING"] = "warning";
|
|
797
|
-
})(BUTTON_COLOR || (BUTTON_COLOR = {}));
|
|
798
|
-
var BUTTON_APPEARANCE;
|
|
799
|
-
(function (BUTTON_APPEARANCE) {
|
|
800
|
-
BUTTON_APPEARANCE["OUTLINE"] = "outline";
|
|
801
|
-
BUTTON_APPEARANCE["LIGHT"] = "light";
|
|
802
|
-
})(BUTTON_APPEARANCE || (BUTTON_APPEARANCE = {}));
|
|
803
831
|
class RtuiButtonComponent {
|
|
804
832
|
constructor() {
|
|
805
|
-
this.
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
const modifiers = [];
|
|
810
|
-
if (this.color()) {
|
|
811
|
-
modifiers.push(this.color());
|
|
812
|
-
}
|
|
813
|
-
if (this.appearance()) {
|
|
814
|
-
modifiers.push(this.appearance());
|
|
833
|
+
this.resolvedIconSize = computed(() => {
|
|
834
|
+
const iconSize = this.iconSize();
|
|
835
|
+
if (iconSize) {
|
|
836
|
+
return iconSize;
|
|
815
837
|
}
|
|
816
|
-
|
|
817
|
-
|
|
838
|
+
const sizeMap = {
|
|
839
|
+
xs: 'xs',
|
|
840
|
+
sm: 'sm',
|
|
841
|
+
md: 'sm',
|
|
842
|
+
lg: 'md',
|
|
843
|
+
};
|
|
844
|
+
return sizeMap[this.size()];
|
|
845
|
+
}, { ...(ngDevMode ? { debugName: "resolvedIconSize" } : {}) });
|
|
846
|
+
this.spinnerSize = computed(() => {
|
|
847
|
+
const sizeMap = {
|
|
848
|
+
xs: 12,
|
|
849
|
+
sm: 16,
|
|
850
|
+
md: 20,
|
|
851
|
+
lg: 24,
|
|
852
|
+
};
|
|
853
|
+
return this.spinnerDiameter() ?? sizeMap[this.size()];
|
|
854
|
+
}, { ...(ngDevMode ? { debugName: "spinnerSize" } : {}) });
|
|
855
|
+
this.modifiers = computed(() => ({
|
|
856
|
+
[`type-${this.type()}`]: true,
|
|
857
|
+
[`variant-${this.variant()}`]: true,
|
|
858
|
+
[`size-${this.size()}`]: true,
|
|
859
|
+
[`radius-${this.radius()}`]: true,
|
|
860
|
+
[`appearance-${this.appearance()}`]: !!this.appearance(),
|
|
861
|
+
loading: this.loading(),
|
|
862
|
+
disabled: this.disabled(),
|
|
863
|
+
}), { ...(ngDevMode ? { debugName: "modifiers" } : {}) });
|
|
864
|
+
this.type = input('icon', { ...(ngDevMode ? { debugName: "type" } : {}) });
|
|
865
|
+
this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}) });
|
|
866
|
+
this.appearance = input(undefined, { ...(ngDevMode ? { debugName: "appearance" } : {}) });
|
|
867
|
+
this.size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
868
|
+
this.radius = input('full', { ...(ngDevMode ? { debugName: "radius" } : {}) });
|
|
869
|
+
this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : {}), transform: transformStringInput });
|
|
870
|
+
this.iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : {}) });
|
|
871
|
+
this.iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
|
|
872
|
+
this.text = input('', { ...(ngDevMode ? { debugName: "text" } : {}), transform: transformStringInput });
|
|
873
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
874
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
875
|
+
this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : {}), transform: booleanAttribute });
|
|
876
|
+
this.fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}), transform: booleanAttribute });
|
|
877
|
+
this.spinnerDiameter = input(undefined, { ...(ngDevMode ? { debugName: "spinnerDiameter" } : {}) });
|
|
878
|
+
this.clicked = output();
|
|
879
|
+
}
|
|
880
|
+
onClick() {
|
|
881
|
+
if (!this.loading() && !this.disabled()) {
|
|
882
|
+
this.clicked.emit();
|
|
883
|
+
}
|
|
818
884
|
}
|
|
819
885
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
820
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
821
|
-
|
|
822
|
-
|
|
886
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", 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.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "@switch (type()) {\n @case ('pill') {\n <button type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n @default {\n <button type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;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 rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"], dependencies: [{ kind: "directive", type:
|
|
887
|
+
// rt-tools
|
|
888
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "component", type:
|
|
889
|
+
// components
|
|
890
|
+
RtuiIconComponent, selector: "rtui-icon", inputs: ["size", "theme", "glyph", "outlined", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
823
891
|
}
|
|
824
892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, decorators: [{
|
|
825
893
|
type: Component,
|
|
826
|
-
args: [{
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
894
|
+
args: [{ selector: 'rtui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
895
|
+
// rt-tools
|
|
896
|
+
BlockDirective,
|
|
897
|
+
ElemDirective,
|
|
898
|
+
ModDirective,
|
|
899
|
+
RtuiSpinnerComponent,
|
|
900
|
+
// components
|
|
901
|
+
RtuiIconComponent,
|
|
902
|
+
], hostDirectives: [
|
|
903
|
+
{
|
|
904
|
+
directive: MatTooltip,
|
|
905
|
+
inputs: [
|
|
906
|
+
'matTooltip: tooltip',
|
|
907
|
+
'matTooltipPosition: tooltipPosition',
|
|
908
|
+
'matTooltipDisabled: tooltipDisabled',
|
|
909
|
+
'matTooltipClass: tooltipClass',
|
|
910
|
+
],
|
|
911
|
+
},
|
|
912
|
+
], host: {
|
|
913
|
+
'[class.rtui-button-full]': 'fullWidth()',
|
|
914
|
+
}, template: "@switch (type()) {\n @case ('pill') {\n <button type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n @default {\n <button type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;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 rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"] }]
|
|
915
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", 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"] }] } });
|
|
842
916
|
|
|
843
917
|
class RtuiMultiButtonComponent {
|
|
844
918
|
constructor() {
|
|
@@ -853,9 +927,9 @@ class RtuiMultiButtonComponent {
|
|
|
853
927
|
}
|
|
854
928
|
}
|
|
855
929
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiMultiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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" }, 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: ["
|
|
930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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" }, 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:
|
|
857
931
|
// rt-tools
|
|
858
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type:
|
|
932
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type:
|
|
859
933
|
// pipes
|
|
860
934
|
TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
861
935
|
}
|
|
@@ -867,7 +941,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
867
941
|
// rt-tools
|
|
868
942
|
BlockDirective,
|
|
869
943
|
ElemDirective,
|
|
870
|
-
|
|
944
|
+
ModDirective,
|
|
945
|
+
], 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"] }]
|
|
871
946
|
}], 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"] }] } });
|
|
872
947
|
|
|
873
948
|
class RtuiHeaderLeftDirective {
|
|
@@ -964,11 +1039,11 @@ class RtuiClearButtonComponent {
|
|
|
964
1039
|
this.clickAction.emit();
|
|
965
1040
|
}
|
|
966
1041
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
967
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: RtuiClearButtonComponent, isStandalone: true, selector: "rtui-clear-button", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, 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" }, ngImport: i0, template: "<button\n rtBlock=\"rtui-clear-button\"\n [rtMod]=\"{ invisible: !isButtonShown() }\"\n [matTooltip]=\"tooltip() ?? ''\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltipDisabled]=\"isMobile()\"\n (keydown)=\"onKeydown()\"\n (click)=\"onClick()\">\n <mat-icon rtElem=\"icon\">close</mat-icon>\n</button>\n", styles: ["
|
|
1042
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: RtuiClearButtonComponent, isStandalone: true, selector: "rtui-clear-button", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, 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" }, ngImport: i0, template: "<button\n rtBlock=\"rtui-clear-button\"\n [rtMod]=\"{ invisible: !isButtonShown() }\"\n [matTooltip]=\"tooltip() ?? ''\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltipDisabled]=\"isMobile()\"\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:
|
|
968
1043
|
// Material
|
|
969
1044
|
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:
|
|
970
1045
|
// BEM
|
|
971
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1046
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
972
1047
|
}
|
|
973
1048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiClearButtonComponent, decorators: [{
|
|
974
1049
|
type: Component,
|
|
@@ -980,7 +1055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
980
1055
|
// BEM
|
|
981
1056
|
BlockDirective,
|
|
982
1057
|
ElemDirective,
|
|
983
|
-
|
|
1058
|
+
ModDirective,
|
|
1059
|
+
], template: "<button\n rtBlock=\"rtui-clear-button\"\n [rtMod]=\"{ invisible: !isButtonShown() }\"\n [matTooltip]=\"tooltip() ?? ''\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltipDisabled]=\"isMobile()\"\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"] }]
|
|
984
1060
|
}], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isButtonShown", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], keydownAction: [{ type: i0.Output, args: ["keydownAction"] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
|
|
985
1061
|
|
|
986
1062
|
const DEFAULT_PAGE_SIZE = 20;
|
|
@@ -1120,11 +1196,11 @@ class RtuiPaginationComponent {
|
|
|
1120
1196
|
}
|
|
1121
1197
|
}
|
|
1122
1198
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange" }, host: { listeners: { "window:resize": "onResize()" } }, 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() && !isMobile() }\">\n <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"0\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n [class.c-pagination__paging-item--disabled]=\"!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 (isMobile()) {\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() && !isMobile() }\">\n @if (!isMobile()) {\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: [":host{width:fit-content;height:100%;display:flex;--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-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-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-mobile-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;justify-content:flex-start;align-items:center;gap:var(--rt-table-pagination-container-gap);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);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;justify-content:center;align-items:center;gap:var(--rt-table-pagination-paging-gap);margin:var(--rt-table-pagination-container-margin)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{display:flex;justify-content:center;align-items:center;position:relative;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){color:var(--rt-table-pagination-paging-item-hover-color);background-color:var(--rt-table-pagination-paging-item-hover-background-color)}:host .pagination-container .paging__item--active{color:var(--rt-table-pagination-paging-item-active-color);background-color:var(--rt-table-pagination-paging-item-active-background-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{cursor:default;pointer-events:none;border:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--rt-table-pagination-size-toggle-gap);margin:var(--rt-table-pagination-container-margin)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-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;cursor:pointer;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);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])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1199
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange" }, host: { listeners: { "window:resize": "onResize()" } }, 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() && !isMobile() }\">\n <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"0\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n [class.c-pagination__paging-item--disabled]=\"!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 (isMobile()) {\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() && !isMobile() }\">\n @if (!isMobile()) {\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-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-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-mobile-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)}:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}: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)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-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)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-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])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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 }); }
|
|
1124
1200
|
}
|
|
1125
1201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPaginationComponent, decorators: [{
|
|
1126
1202
|
type: Component,
|
|
1127
|
-
args: [{ selector: 'rtui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, BlockDirective, ElemDirective], template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"0\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n [class.c-pagination__paging-item--disabled]=\"!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 (isMobile()) {\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() && !isMobile() }\">\n @if (!isMobile()) {\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: ["
|
|
1203
|
+
args: [{ selector: 'rtui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, BlockDirective, ElemDirective, ModDirective], template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n <div\n rtElem=\"item\"\n role=\"button\"\n tabindex=\"0\"\n [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n [class.c-pagination__paging-item--disabled]=\"!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 (isMobile()) {\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() && !isMobile() }\">\n @if (!isMobile()) {\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-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-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-mobile-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)}:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}: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)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-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)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-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"] }]
|
|
1128
1204
|
}], propDecorators: { currentPageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageModel", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], containerRef: [{ type: i0.ViewChild, args: ['containerRef', { isSignal: true }] }], onResize: [{
|
|
1129
1205
|
type: HostListener,
|
|
1130
1206
|
args: ['window:resize']
|
|
@@ -1758,7 +1834,7 @@ class TableBaseCellComponent {
|
|
|
1758
1834
|
}
|
|
1759
1835
|
}
|
|
1760
1836
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TableBaseCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1761
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "style": "this.style" } }, 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]=\"!isMobile()\"\n [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n [matTooltipDisabled]=\"isMobile()\">\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) {\n <button\n type=\"button\"\n rtBlock=\"base-cell\"\n rtElem=\"copy-button\"\n class=\"c-button c-button--txt-base\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{\n position: copyBtnPosition,\n complete: isCopied(),\n visible: isMobile() || isMouseOver(),\n }\"\n [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n [matTooltipDisabled]=\"isMobile()\"\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: ["
|
|
1837
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "style": "this.style" } }, 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]=\"!isMobile()\"\n [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n [matTooltipDisabled]=\"isMobile()\">\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) {\n <button\n type=\"button\"\n rtBlock=\"base-cell\"\n rtElem=\"copy-button\"\n class=\"c-button c-button--txt-base\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{\n position: copyBtnPosition,\n complete: isCopied(),\n visible: isMobile() || isMouseOver(),\n }\"\n [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n [matTooltipDisabled]=\"isMobile()\"\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-icon-size: 1rem;--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;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color);visibility:hidden}: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)}: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:
|
|
1762
1838
|
// material
|
|
1763
1839
|
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:
|
|
1764
1840
|
// directives
|
|
@@ -1780,7 +1856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1780
1856
|
RtHideTooltipDirective,
|
|
1781
1857
|
// pipes
|
|
1782
1858
|
EmptyToDashPipe,
|
|
1783
|
-
], 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]=\"!isMobile()\"\n [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n [matTooltipDisabled]=\"isMobile()\">\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) {\n <button\n type=\"button\"\n rtBlock=\"base-cell\"\n rtElem=\"copy-button\"\n class=\"c-button c-button--txt-base\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{\n position: copyBtnPosition,\n complete: isCopied(),\n visible: isMobile() || isMouseOver(),\n }\"\n [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n [matTooltipDisabled]=\"isMobile()\"\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: ["
|
|
1859
|
+
], 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]=\"!isMobile()\"\n [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n [matTooltipDisabled]=\"isMobile()\">\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) {\n <button\n type=\"button\"\n rtBlock=\"base-cell\"\n rtElem=\"copy-button\"\n class=\"c-button c-button--txt-base\"\n matTooltipPosition=\"above\"\n [rtMod]=\"{\n position: copyBtnPosition,\n complete: isCopied(),\n visible: isMobile() || isMouseOver(),\n }\"\n [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n [matTooltipDisabled]=\"isMobile()\"\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-icon-size: 1rem;--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;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color);visibility:hidden}: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)}: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"] }]
|
|
1784
1860
|
}], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], style: [{
|
|
1785
1861
|
type: HostBinding,
|
|
1786
1862
|
args: ['style']
|
|
@@ -1827,7 +1903,7 @@ class RtuiTableHeaderCellComponent {
|
|
|
1827
1903
|
return LIST_SORT_ORDER_ENUM.ASC;
|
|
1828
1904
|
}
|
|
1829
1905
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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" } }, 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 ?? ''\" [ngClass]=\"headerModel()?.className\">\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: ["
|
|
1906
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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" } }, 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 ?? ''\" [ngClass]=\"headerModel()?.className\">\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type:
|
|
1831
1907
|
// Material
|
|
1832
1908
|
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:
|
|
1833
1909
|
// Bem
|
|
@@ -1850,7 +1926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1850
1926
|
ModDirective,
|
|
1851
1927
|
// Directives
|
|
1852
1928
|
RtIconOutlinedDirective,
|
|
1853
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, 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 ?? ''\" [ngClass]=\"headerModel()?.className\">\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: ["
|
|
1929
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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 ?? ''\" [ngClass]=\"headerModel()?.className\">\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"] }]
|
|
1854
1930
|
}], propDecorators: { headerModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerModel", required: true }] }], sortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortModel", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], headerDataEllipsisMaxLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerDataEllipsisMaxLines", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], style: [{
|
|
1855
1931
|
type: HostBinding,
|
|
1856
1932
|
args: ['style']
|
|
@@ -1963,7 +2039,7 @@ class RtuiTableHeaderFilterCellComponent {
|
|
|
1963
2039
|
this.currentFilter.update((filter) => ({ ...filter, operatorType }));
|
|
1964
2040
|
}
|
|
1965
2041
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, providers: [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]=\"isMobile()\"\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 <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n <span>Equal</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n <span>Not equal</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n <span>Contains</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n <span>More than</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n <span>Less than</span>\n </div>\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]=\"isMobile()\"\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\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\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]=\"isMobile()\"\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{width:100%;
|
|
2042
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, providers: [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]=\"isMobile()\"\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 <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n <span>Equal</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n <span>Not equal</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n <span>Contains</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n <span>More than</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n <span>Less than</span>\n </div>\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]=\"isMobile()\"\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\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\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]=\"isMobile()\"\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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:
|
|
1967
2043
|
// Material
|
|
1968
2044
|
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:
|
|
1969
2045
|
// Directives
|
|
@@ -2000,7 +2076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2000
2076
|
BlockDirective,
|
|
2001
2077
|
// Components
|
|
2002
2078
|
RtuiClearButtonComponent,
|
|
2003
|
-
], 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]=\"isMobile()\"\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 <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n <span>Equal</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n <span>Not equal</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n <span>Contains</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n <span>More than</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n <span>Less than</span>\n </div>\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]=\"isMobile()\"\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\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\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]=\"isMobile()\"\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{width:100%;
|
|
2079
|
+
], 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]=\"isMobile()\"\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 <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n <span>Equal</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n <span>Not equal</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n <span>Contains</span>\n </div>\n }\n @if (\n filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n ) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n <span>More than</span>\n </div>\n }\n @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n <span>Less than</span>\n </div>\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]=\"isMobile()\"\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\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\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]=\"isMobile()\"\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"] }]
|
|
2004
2080
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], filterProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterProperty", required: true }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: true }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: true }] }], defaultFilterOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFilterOperator", required: true }] }], filterOperators: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOperators", required: false }] }], filterSelectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSelectOptions", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
|
|
2005
2081
|
|
|
2006
2082
|
class RtuiStopTableRowClickDirective {
|
|
@@ -2228,7 +2304,7 @@ class RtuiTableComponent {
|
|
|
2228
2304
|
// material
|
|
2229
2305
|
MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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: "directive", type:
|
|
2230
2306
|
// directives
|
|
2231
|
-
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: RtuiTableRowClickDirective, selector: "[rtuiTableRowClickDirective]", inputs: ["rtuiTableRowClickDirective", "isTableRowClickable"] }, { kind: "component", type:
|
|
2307
|
+
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: RtuiTableRowClickDirective, selector: "[rtuiTableRowClickDirective]", inputs: ["rtuiTableRowClickDirective", "isTableRowClickable"] }, { kind: "component", type:
|
|
2232
2308
|
// components
|
|
2233
2309
|
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", "isMobile"] }, { kind: "component", type: RtuiTableHeaderFilterCellComponent, selector: "rtui-table-header-filter-cell", inputs: ["appearance", "filterProperty", "filterType", "filterModel", "defaultFilterOperator", "filterOperators", "filterSelectOptions", "isMobile"], outputs: ["filterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2234
2310
|
}
|
|
@@ -2246,6 +2322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2246
2322
|
// directives
|
|
2247
2323
|
BlockDirective,
|
|
2248
2324
|
ElemDirective,
|
|
2325
|
+
ModDirective,
|
|
2249
2326
|
RtIconOutlinedDirective,
|
|
2250
2327
|
RtuiTableRowClickDirective,
|
|
2251
2328
|
// components
|
|
@@ -2280,11 +2357,11 @@ class RtuiDynamicSelectorListActionsComponent {
|
|
|
2280
2357
|
this.clearAction.emit();
|
|
2281
2358
|
}
|
|
2282
2359
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2283
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: RtuiDynamicSelectorListActionsComponent, isStandalone: true, selector: "rtui-dynamic-selector-list-actions", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, 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" }, 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]=\"isMobile()\"\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]=\"isMobile()\"\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: ["
|
|
2360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: RtuiDynamicSelectorListActionsComponent, isStandalone: true, selector: "rtui-dynamic-selector-list-actions", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, 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" }, 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]=\"isMobile()\"\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]=\"isMobile()\"\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 }); }
|
|
2284
2361
|
}
|
|
2285
2362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, decorators: [{
|
|
2286
2363
|
type: Component,
|
|
2287
|
-
args: [{ selector: 'rtui-dynamic-selector-list-actions', imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, MatIconButton, MatTooltip], 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]=\"isMobile()\"\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]=\"isMobile()\"\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: ["
|
|
2364
|
+
args: [{ selector: 'rtui-dynamic-selector-list-actions', imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective, MatIconButton, MatTooltip], 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]=\"isMobile()\"\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]=\"isMobile()\"\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"] }]
|
|
2288
2365
|
}], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], 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"] }] } });
|
|
2289
2366
|
|
|
2290
2367
|
class RtuiDynamicSelectorsDirective {
|
|
@@ -2392,9 +2469,9 @@ class RtuiToggleComponent {
|
|
|
2392
2469
|
multi: true,
|
|
2393
2470
|
},
|
|
2394
2471
|
BreakpointService,
|
|
2395
|
-
], ngImport: i0, template: "<label\n rtBlock=\"rtui-toggle-container\"\n [rtMod]=\"{ disabled: isDisabled() }\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip() || isMobile() || tooltipDisabled()\">\n <div rtBlock=\"rtui-toggle\" rtMod=\"{{ size() }}\">\n <input type=\"checkbox\" rtElem=\"check\" [formControl]=\"formControl\" />\n\n <b rtElem=\"switch\"></b>\n\n <b rtElem=\"track\"></b>\n </div>\n\n @if (label()) {\n <div rtElem=\"label\" [rtMod]=\"{ active: formControl.value }\">{{ label() }}</div>\n }\n</label>\n", styles: ["
|
|
2472
|
+
], ngImport: i0, template: "<label\n rtBlock=\"rtui-toggle-container\"\n [rtMod]=\"{ disabled: isDisabled() }\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip() || isMobile() || tooltipDisabled()\">\n <div rtBlock=\"rtui-toggle\" rtMod=\"{{ size() }}\">\n <input type=\"checkbox\" rtElem=\"check\" [formControl]=\"formControl\" />\n\n <b rtElem=\"switch\"></b>\n\n <b rtElem=\"track\"></b>\n </div>\n\n @if (label()) {\n <div rtElem=\"label\" [rtMod]=\"{ active: formControl.value }\">{{ label() }}</div>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--rt-toggle-container-display: flex;--rt-toggle-container-align-items: center;--rt-toggle-container-justify-content: space-between;--rt-toggle-container-gap: 1rem;--rt-toggle-container-disabled-opacity: .6;--rt-toggle-toggle-border-radius: 6.25rem;--rt-toggle-toggle-background-color: var(--rt-bg-base-subtle);--rt-toggle-toggle-box-shadow: inset 0 0 .125rem .0625rem rgba(0, 0, 0, .05);--rt-toggle-toggle-check-box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked);--rt-toggle-toggle-switch-border-radius: 2.25rem;--rt-toggle-toggle-switch-background-color: var(--rt-control-thumb);--rt-toggle-toggle-switch-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);--rt-toggle-toggle-track-background-color: var(--rt-control-track);--rt-toggle-toggle-track-border-radius: 2.5rem;--rt-toggle-toggle-track-border: .0625rem solid var(--rt-border-neutral-medium);--rt-toggle-label-color: var(--rt-text-base-secondary);--rt-toggle-label-font-size: .875rem;--rt-toggle-label-active-color: var(--rt-text-base-strong);--rt-toggle-label-hover-color: var(--rt-text-base-strong);--rt-toggle-label-hover-cursor: pointer}:host .rtui-toggle-container{display:var(--rt-toggle-container-display);align-items:var(--rt-toggle-container-align-items);justify-content:var(--rt-toggle-container-justify-content);gap:var(--rt-toggle-container-gap)}:host .rtui-toggle-container--disabled{opacity:var(--rt-toggle-container-disabled-opacity)}:host .rtui-toggle-container--disabled .rtui-toggle,:host .rtui-toggle-container--disabled .rtui-toggle-container__label{pointer-events:none}:host .rtui-toggle-container__label{color:var(--rt-toggle-label-color);font-size:var(--rt-toggle-label-font-size)}:host .rtui-toggle-container__label:hover{color:var(--rt-toggle-label-hover-color);cursor:pointer}:host .rtui-toggle-container__label--active{color:var(--rt-toggle-label-active-color)}:host .rtui-toggle-container .rtui-toggle{position:relative;overflow:hidden;width:3.125rem;min-width:3.125rem;height:1.875rem;border-radius:var(--rt-toggle-toggle-border-radius);background-color:var(--rt-toggle-toggle-background-color);box-shadow:var(--rt-toggle-toggle-box-shadow);cursor:pointer}:host .rtui-toggle-container .rtui-toggle b{display:block}:host .rtui-toggle-container .rtui-toggle__check{display:none}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__track{box-shadow:var(--rt-toggle-toggle-check-box-shadow)}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.375rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:.05s,0s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__switch{position:absolute;z-index:1;border-radius:var(--rt-toggle-toggle-switch-border-radius);background-color:var(--rt-toggle-toggle-switch-background-color);box-shadow:var(--rt-toggle-toggle-switch-box-shadow);inset:.125rem 1.375rem .125rem .125rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:0s,.05s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__track{position:absolute;border:var(--rt-toggle-toggle-track-border);border-radius:var(--rt-toggle-toggle-track-border-radius);background-color:var(--rt-toggle-toggle-track-background-color);inset:0;transition:.35s cubic-bezier(.785,.135,.15,.86)}:host .rtui-toggle-container .rtui-toggle--md{width:3rem;min-width:3rem;height:1.5rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__switch{right:1.625rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.625rem}:host .rtui-toggle-container .rtui-toggle--sm{width:1.5rem;min-width:1.5rem;height:.875rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__switch{right:.75rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type:
|
|
2396
2473
|
// directives
|
|
2397
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2474
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2398
2475
|
}
|
|
2399
2476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToggleComponent, decorators: [{
|
|
2400
2477
|
type: Component,
|
|
@@ -2411,7 +2488,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2411
2488
|
// directives
|
|
2412
2489
|
BlockDirective,
|
|
2413
2490
|
ElemDirective,
|
|
2414
|
-
|
|
2491
|
+
ModDirective,
|
|
2492
|
+
], template: "<label\n rtBlock=\"rtui-toggle-container\"\n [rtMod]=\"{ disabled: isDisabled() }\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipDisabled]=\"!tooltip() || isMobile() || tooltipDisabled()\">\n <div rtBlock=\"rtui-toggle\" rtMod=\"{{ size() }}\">\n <input type=\"checkbox\" rtElem=\"check\" [formControl]=\"formControl\" />\n\n <b rtElem=\"switch\"></b>\n\n <b rtElem=\"track\"></b>\n </div>\n\n @if (label()) {\n <div rtElem=\"label\" [rtMod]=\"{ active: formControl.value }\">{{ label() }}</div>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--rt-toggle-container-display: flex;--rt-toggle-container-align-items: center;--rt-toggle-container-justify-content: space-between;--rt-toggle-container-gap: 1rem;--rt-toggle-container-disabled-opacity: .6;--rt-toggle-toggle-border-radius: 6.25rem;--rt-toggle-toggle-background-color: var(--rt-bg-base-subtle);--rt-toggle-toggle-box-shadow: inset 0 0 .125rem .0625rem rgba(0, 0, 0, .05);--rt-toggle-toggle-check-box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked);--rt-toggle-toggle-switch-border-radius: 2.25rem;--rt-toggle-toggle-switch-background-color: var(--rt-control-thumb);--rt-toggle-toggle-switch-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);--rt-toggle-toggle-track-background-color: var(--rt-control-track);--rt-toggle-toggle-track-border-radius: 2.5rem;--rt-toggle-toggle-track-border: .0625rem solid var(--rt-border-neutral-medium);--rt-toggle-label-color: var(--rt-text-base-secondary);--rt-toggle-label-font-size: .875rem;--rt-toggle-label-active-color: var(--rt-text-base-strong);--rt-toggle-label-hover-color: var(--rt-text-base-strong);--rt-toggle-label-hover-cursor: pointer}:host .rtui-toggle-container{display:var(--rt-toggle-container-display);align-items:var(--rt-toggle-container-align-items);justify-content:var(--rt-toggle-container-justify-content);gap:var(--rt-toggle-container-gap)}:host .rtui-toggle-container--disabled{opacity:var(--rt-toggle-container-disabled-opacity)}:host .rtui-toggle-container--disabled .rtui-toggle,:host .rtui-toggle-container--disabled .rtui-toggle-container__label{pointer-events:none}:host .rtui-toggle-container__label{color:var(--rt-toggle-label-color);font-size:var(--rt-toggle-label-font-size)}:host .rtui-toggle-container__label:hover{color:var(--rt-toggle-label-hover-color);cursor:pointer}:host .rtui-toggle-container__label--active{color:var(--rt-toggle-label-active-color)}:host .rtui-toggle-container .rtui-toggle{position:relative;overflow:hidden;width:3.125rem;min-width:3.125rem;height:1.875rem;border-radius:var(--rt-toggle-toggle-border-radius);background-color:var(--rt-toggle-toggle-background-color);box-shadow:var(--rt-toggle-toggle-box-shadow);cursor:pointer}:host .rtui-toggle-container .rtui-toggle b{display:block}:host .rtui-toggle-container .rtui-toggle__check{display:none}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__track{box-shadow:var(--rt-toggle-toggle-check-box-shadow)}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.375rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:.05s,0s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__switch{position:absolute;z-index:1;border-radius:var(--rt-toggle-toggle-switch-border-radius);background-color:var(--rt-toggle-toggle-switch-background-color);box-shadow:var(--rt-toggle-toggle-switch-box-shadow);inset:.125rem 1.375rem .125rem .125rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:0s,.05s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__track{position:absolute;border:var(--rt-toggle-toggle-track-border);border-radius:var(--rt-toggle-toggle-track-border-radius);background-color:var(--rt-toggle-toggle-track-background-color);inset:0;transition:.35s cubic-bezier(.785,.135,.15,.86)}:host .rtui-toggle-container .rtui-toggle--md{width:3rem;min-width:3rem;height:1.5rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__switch{right:1.625rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.625rem}:host .rtui-toggle-container .rtui-toggle--sm{width:1.5rem;min-width:1.5rem;height:.875rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__switch{right:.75rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:.75rem}\n"] }]
|
|
2415
2493
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }] } });
|
|
2416
2494
|
|
|
2417
2495
|
class RtuiMultiSelectorPopupComponent {
|
|
@@ -2615,11 +2693,11 @@ class RtuiMultiSelectorPopupComponent {
|
|
|
2615
2693
|
this.scrollAction.emit();
|
|
2616
2694
|
}
|
|
2617
2695
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiMultiSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, 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 } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, providers: [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 (!isMobile()) {\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 (isMobile()) {\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 rtElem=\"controls-item-title\">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 [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 [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\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n <button\n mat-flat-button\n type=\"button\"\n rtBlock=\"c-button\"\n [disabled]=\"!selectionControl.value?.length || loading()\"\n (click)=\"onSubmit()\">\n SUBMIT\n </button>\n </div>\n</div>\n", styles: [":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;flex-direction:column;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);padding:var(--rt-multi-selector-host-padding);box-shadow:var(--rt-multi-selector-host-box-shadow);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color)}: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);font-size:var(--rt-multi-selector-header-controls-item-info-font-size);color:var(--rt-multi-selector-header-controls-item-info-color)}:host .rtui-multi-selector-options{display:flex;flex-direction:column;flex:1 1 100%;height:100%;width:100%;overflow-y:auto}:host .rtui-multi-selector-options__item-title{width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;justify-content:center;align-items:center}:host .rtui-multi-selector-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 100%;gap:var(--rt-multi-selector-placeholder-gap);padding-right:var(--rt-multi-selector-placeholder-padding-right);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);font-size:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color)}:host .rtui-multi-selector-placeholder__title{font-size:var(--rt-multi-selector-placeholder-title-font-size);color:var(--rt-multi-selector-placeholder-title-color)}:host .rtui-multi-selector-footer{display:flex;justify-content:flex-end;align-items:center;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{text-decoration:none;font-size:var(--rt-multi-selector-footer-nav-action-font-size);color:var(--rt-multi-selector-footer-nav-action-color)}: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:
|
|
2696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, 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 } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, providers: [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 (!isMobile()) {\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 (isMobile()) {\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 rtElem=\"controls-item-title\">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 [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 [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\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n <button\n mat-flat-button\n type=\"button\"\n rtBlock=\"c-button\"\n [disabled]=\"!selectionControl.value?.length || loading()\"\n (click)=\"onSubmit()\">\n SUBMIT\n </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:
|
|
2619
2697
|
// Material
|
|
2620
2698
|
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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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", "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:
|
|
2621
2699
|
// directives
|
|
2622
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtScrollDirective, selector: "[rtScrollDirective]", inputs: ["active", "multiplier"], outputs: ["scrollAction"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type:
|
|
2700
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtScrollDirective, selector: "[rtScrollDirective]", inputs: ["active", "multiplier"], outputs: ["scrollAction"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type:
|
|
2623
2701
|
// components
|
|
2624
2702
|
RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isMobile", "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"] }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: EntityToStringPipe, name: "entityToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2625
2703
|
}
|
|
@@ -2644,6 +2722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2644
2722
|
// directives
|
|
2645
2723
|
BlockDirective,
|
|
2646
2724
|
ElemDirective,
|
|
2725
|
+
ModDirective,
|
|
2647
2726
|
RtScrollDirective,
|
|
2648
2727
|
RtIconOutlinedDirective,
|
|
2649
2728
|
// components
|
|
@@ -2651,7 +2730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2651
2730
|
RtuiToggleComponent,
|
|
2652
2731
|
RtuiSpinnerComponent,
|
|
2653
2732
|
EntityToStringPipe,
|
|
2654
|
-
], providers: [DeviceDetectorService], 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 (!isMobile()) {\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 (isMobile()) {\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 rtElem=\"controls-item-title\">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 [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 [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\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n <button\n mat-flat-button\n type=\"button\"\n rtBlock=\"c-button\"\n [disabled]=\"!selectionControl.value?.length || loading()\"\n (click)=\"onSubmit()\">\n SUBMIT\n </button>\n </div>\n</div>\n", styles: [":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;flex-direction:column;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);padding:var(--rt-multi-selector-host-padding);box-shadow:var(--rt-multi-selector-host-box-shadow);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color)}: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);font-size:var(--rt-multi-selector-header-controls-item-info-font-size);color:var(--rt-multi-selector-header-controls-item-info-color)}:host .rtui-multi-selector-options{display:flex;flex-direction:column;flex:1 1 100%;height:100%;width:100%;overflow-y:auto}:host .rtui-multi-selector-options__item-title{width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;justify-content:center;align-items:center}:host .rtui-multi-selector-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 100%;gap:var(--rt-multi-selector-placeholder-gap);padding-right:var(--rt-multi-selector-placeholder-padding-right);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);font-size:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color)}:host .rtui-multi-selector-placeholder__title{font-size:var(--rt-multi-selector-placeholder-title-font-size);color:var(--rt-multi-selector-placeholder-title-color)}:host .rtui-multi-selector-footer{display:flex;justify-content:flex-end;align-items:center;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{text-decoration:none;font-size:var(--rt-multi-selector-footer-nav-action-font-size);color:var(--rt-multi-selector-footer-nav-action-color)}: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"] }]
|
|
2733
|
+
], providers: [DeviceDetectorService], 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 (!isMobile()) {\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 (isMobile()) {\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 rtElem=\"controls-item-title\">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 [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 [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\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n <button\n mat-flat-button\n type=\"button\"\n rtBlock=\"c-button\"\n [disabled]=\"!selectionControl.value?.length || loading()\"\n (click)=\"onSubmit()\">\n SUBMIT\n </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"] }]
|
|
2655
2734
|
}], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], entitiesToSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "entitiesToSelect", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInputTpl', { isSignal: true }] }] } });
|
|
2656
2735
|
|
|
2657
2736
|
class RtuiDynamicSelectorPlaceholderComponent {
|
|
@@ -2668,11 +2747,11 @@ class RtuiDynamicSelectorPlaceholderComponent {
|
|
|
2668
2747
|
this.submitAction.emit(trigger);
|
|
2669
2748
|
}
|
|
2670
2749
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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" }, 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 rtBlock=\"c-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: ["
|
|
2750
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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" }, 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 rtBlock=\"c-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 }); }
|
|
2672
2751
|
}
|
|
2673
2752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, decorators: [{
|
|
2674
2753
|
type: Component,
|
|
2675
|
-
args: [{ selector: 'rtui-dynamic-selector-placeholder', imports: [MatIcon, MatButton, CdkOverlayOrigin, RtIconOutlinedDirective, BlockDirective, ElemDirective], 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 rtBlock=\"c-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: ["
|
|
2754
|
+
args: [{ selector: 'rtui-dynamic-selector-placeholder', 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 rtBlock=\"c-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"] }]
|
|
2676
2755
|
}], 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"] }] } });
|
|
2677
2756
|
|
|
2678
2757
|
/** Directive for row actions located outside a row menu button */
|
|
@@ -2747,13 +2826,13 @@ class RtuiDynamicSelectorSelectedListComponent {
|
|
|
2747
2826
|
this.editedItemIndex.set(index);
|
|
2748
2827
|
}
|
|
2749
2828
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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 }, 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" }, 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]=\"isMobile()\">\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]=\"!isMobile()\"\n [matTooltip]=\"\n useNameBreaking()\n ? (entity[displayExp()] | entityToString | breakString)\n : (entity[displayExp()] | entityToString)\n \"\n [matTooltipDisabled]=\"isMobile()\">\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]=\"isMobile()\"\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]=\"isMobile()\"\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]=\"isMobile()\"\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{
|
|
2829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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 }, 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" }, 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]=\"isMobile()\">\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]=\"!isMobile()\"\n [matTooltip]=\"\n useNameBreaking()\n ? (entity[displayExp()] | entityToString | breakString)\n : (entity[displayExp()] | entityToString)\n \"\n [matTooltipDisabled]=\"isMobile()\">\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]=\"isMobile()\"\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]=\"isMobile()\"\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]=\"isMobile()\"\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:
|
|
2751
2830
|
// material
|
|
2752
2831
|
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:
|
|
2753
2832
|
// drag and drop
|
|
2754
2833
|
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: "directive", type:
|
|
2755
2834
|
// directives
|
|
2756
|
-
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type:
|
|
2835
|
+
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type:
|
|
2757
2836
|
// pipes
|
|
2758
2837
|
EntityToStringPipe, name: "entityToString" }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2759
2838
|
}
|
|
@@ -2778,11 +2857,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2778
2857
|
RtHideTooltipDirective,
|
|
2779
2858
|
BlockDirective,
|
|
2780
2859
|
ElemDirective,
|
|
2860
|
+
ModDirective,
|
|
2781
2861
|
// pipes
|
|
2782
2862
|
EntityToStringPipe,
|
|
2783
2863
|
BreakStringPipe,
|
|
2784
2864
|
TitleCasePipe,
|
|
2785
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"isMobile()\">\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]=\"!isMobile()\"\n [matTooltip]=\"\n useNameBreaking()\n ? (entity[displayExp()] | entityToString | breakString)\n : (entity[displayExp()] | entityToString)\n \"\n [matTooltipDisabled]=\"isMobile()\">\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]=\"isMobile()\"\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]=\"isMobile()\"\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]=\"isMobile()\"\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{
|
|
2865
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"isMobile()\">\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]=\"!isMobile()\"\n [matTooltip]=\"\n useNameBreaking()\n ? (entity[displayExp()] | entityToString | breakString)\n : (entity[displayExp()] | entityToString)\n \"\n [matTooltipDisabled]=\"isMobile()\">\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]=\"isMobile()\"\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]=\"isMobile()\"\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]=\"isMobile()\"\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"] }]
|
|
2786
2866
|
}], propDecorators: { inputRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], selectedEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntities", required: true }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], isListDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isListDraggable", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], useTitleCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTitleCase", required: false }] }], isDeleteButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeleteButtonShown", required: false }] }], isItemsEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemsEditable", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], deleteFromSelectedAction: [{ type: i0.Output, args: ["deleteFromSelectedAction"] }], dropAction: [{ type: i0.Output, args: ["dropAction"] }], changeValueAction: [{ type: i0.Output, args: ["changeValueAction"] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemAdditionalControlDirective), { ...{
|
|
2787
2867
|
read: TemplateRef,
|
|
2788
2868
|
}, isSignal: true }] }], itemTitleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemTitleDirective), { ...{
|
|
@@ -3112,7 +3192,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3112
3192
|
useExisting: RtuiDynamicSelectorComponent,
|
|
3113
3193
|
multi: true,
|
|
3114
3194
|
},
|
|
3115
|
-
], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleProjectionDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <ng-container rtBlock=\"rtui-dynamic-selector\">\n @if (isNoDataPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n description=\"There are no available items to choose\"\n icon=\"warning\"\n [isButtonShow]=\"false\"\n [isIconOutlined]=\"true\" />\n } @else {\n <rtui-dynamic-selector-selected-list\n [isMobile]=\"isMobile()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [selectedEntities]=\"selectedEntities()\"\n [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n [isListDraggable]=\"isListDraggable()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [useTitleCase]=\"useTitleCase()\"\n [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n (dropAction)=\"onDrop($event)\"\n (deleteFromSelectedAction)=\"toggleEntity($event)\">\n @if (additionalControlTpl()) {\n <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n\n @if (itemTitleTpl()) {\n <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n </rtui-dynamic-selector-selected-list>\n\n @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n @if (isPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n [icon]=\"placeholderIcon()\"\n [description]=\"placeholderDescription()\"\n [buttonTitle]=\"buttonTitle()\"\n [disabled]=\"disabled()\"\n [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n (submitAction)=\"showSelectionControl($event)\" />\n } @else {\n <div rtElem=\"actions\">\n @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"c-button c-button--txt-base--size-sm\"\n [class.--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"showSelectionControl(trigger)\">\n {{ buttonTitle() }}\n </button>\n }\n\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n\n @if (selectedOverlayTrigger) {\n <ng-template\n rtEscapeKey\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n (backdropClick)=\"hideSelectionControl()\"\n (escapeKeyAction)=\"hideSelectionControl()\">\n <rtui-multi-selector-popup\n [navigateButtonTitle]=\"navigateButtonTitle()\"\n [navigateLink]=\"navigateLink()\"\n [entitiesToSelect]=\"entitiesToSelect()\"\n [appearance]=\"appearance()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [isMobile]=\"isMobile()\"\n [isSingleSelection]=\"isSingleSelection()\"\n [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [searchTerm]=\"searchTerm()\"\n [isLazyLoad]=\"isLazyLoad()\"\n [isLocalSearch]=\"isLocalSearch()\"\n [isMultiToggleShown]=\"isMultiToggleShown()\"\n (searchAction)=\"search($event)\"\n (scrollAction)=\"scroll()\"\n (temporarySelectAction)=\"setTemporarySelection($event)\"\n (closeAction)=\"hideSelectionControl()\"\n (submitAction)=\"select($event)\" />\n </ng-template>\n }\n } @else if (isSelectionAvailable()) {\n <div rtElem=\"actions\">\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n }\n </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n <rtui-dynamic-selector-list-actions\n [isMobile]=\"isMobile()\"\n [disabled]=\"disabled()\"\n [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n (resetAction)=\"resetList()\"\n (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{
|
|
3195
|
+
], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleProjectionDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <ng-container rtBlock=\"rtui-dynamic-selector\">\n @if (isNoDataPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n description=\"There are no available items to choose\"\n icon=\"warning\"\n [isButtonShow]=\"false\"\n [isIconOutlined]=\"true\" />\n } @else {\n <rtui-dynamic-selector-selected-list\n [isMobile]=\"isMobile()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [selectedEntities]=\"selectedEntities()\"\n [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n [isListDraggable]=\"isListDraggable()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [useTitleCase]=\"useTitleCase()\"\n [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n (dropAction)=\"onDrop($event)\"\n (deleteFromSelectedAction)=\"toggleEntity($event)\">\n @if (additionalControlTpl()) {\n <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n\n @if (itemTitleTpl()) {\n <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n </rtui-dynamic-selector-selected-list>\n\n @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n @if (isPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n [icon]=\"placeholderIcon()\"\n [description]=\"placeholderDescription()\"\n [buttonTitle]=\"buttonTitle()\"\n [disabled]=\"disabled()\"\n [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n (submitAction)=\"showSelectionControl($event)\" />\n } @else {\n <div rtElem=\"actions\">\n @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"c-button c-button--txt-base--size-sm\"\n [class.--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"showSelectionControl(trigger)\">\n {{ buttonTitle() }}\n </button>\n }\n\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n\n @if (selectedOverlayTrigger) {\n <ng-template\n rtEscapeKey\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n (backdropClick)=\"hideSelectionControl()\"\n (escapeKeyAction)=\"hideSelectionControl()\">\n <rtui-multi-selector-popup\n [navigateButtonTitle]=\"navigateButtonTitle()\"\n [navigateLink]=\"navigateLink()\"\n [entitiesToSelect]=\"entitiesToSelect()\"\n [appearance]=\"appearance()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [isMobile]=\"isMobile()\"\n [isSingleSelection]=\"isSingleSelection()\"\n [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [searchTerm]=\"searchTerm()\"\n [isLazyLoad]=\"isLazyLoad()\"\n [isLocalSearch]=\"isLocalSearch()\"\n [isMultiToggleShown]=\"isMultiToggleShown()\"\n (searchAction)=\"search($event)\"\n (scrollAction)=\"scroll()\"\n (temporarySelectAction)=\"setTemporarySelection($event)\"\n (closeAction)=\"hideSelectionControl()\"\n (submitAction)=\"select($event)\" />\n </ng-template>\n }\n } @else if (isSelectionAvailable()) {\n <div rtElem=\"actions\">\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n }\n </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n <rtui-dynamic-selector-list-actions\n [isMobile]=\"isMobile()\"\n [disabled]=\"disabled()\"\n [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n (resetAction)=\"resetList()\"\n (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type:
|
|
3116
3196
|
// directives
|
|
3117
3197
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtEscapeKeyDirective, selector: "[rtEscapeKey]", outputs: ["escapeKeyAction"] }, { kind: "directive", type: RtuiDynamicSelectorItemAdditionalControlDirective, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]" }, { kind: "directive", type: RtuiDynamicSelectorItemTitleDirective, selector: "[rtuiDynamicSelectorItemTitleDirective]" }, { kind: "component", type:
|
|
3118
3198
|
// components
|
|
@@ -3147,7 +3227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3147
3227
|
useExisting: RtuiDynamicSelectorComponent,
|
|
3148
3228
|
multi: true,
|
|
3149
3229
|
},
|
|
3150
|
-
], template: "<form [formGroup]=\"form\">\n <ng-container rtBlock=\"rtui-dynamic-selector\">\n @if (isNoDataPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n description=\"There are no available items to choose\"\n icon=\"warning\"\n [isButtonShow]=\"false\"\n [isIconOutlined]=\"true\" />\n } @else {\n <rtui-dynamic-selector-selected-list\n [isMobile]=\"isMobile()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [selectedEntities]=\"selectedEntities()\"\n [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n [isListDraggable]=\"isListDraggable()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [useTitleCase]=\"useTitleCase()\"\n [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n (dropAction)=\"onDrop($event)\"\n (deleteFromSelectedAction)=\"toggleEntity($event)\">\n @if (additionalControlTpl()) {\n <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n\n @if (itemTitleTpl()) {\n <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n </rtui-dynamic-selector-selected-list>\n\n @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n @if (isPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n [icon]=\"placeholderIcon()\"\n [description]=\"placeholderDescription()\"\n [buttonTitle]=\"buttonTitle()\"\n [disabled]=\"disabled()\"\n [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n (submitAction)=\"showSelectionControl($event)\" />\n } @else {\n <div rtElem=\"actions\">\n @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"c-button c-button--txt-base--size-sm\"\n [class.--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"showSelectionControl(trigger)\">\n {{ buttonTitle() }}\n </button>\n }\n\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n\n @if (selectedOverlayTrigger) {\n <ng-template\n rtEscapeKey\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n (backdropClick)=\"hideSelectionControl()\"\n (escapeKeyAction)=\"hideSelectionControl()\">\n <rtui-multi-selector-popup\n [navigateButtonTitle]=\"navigateButtonTitle()\"\n [navigateLink]=\"navigateLink()\"\n [entitiesToSelect]=\"entitiesToSelect()\"\n [appearance]=\"appearance()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [isMobile]=\"isMobile()\"\n [isSingleSelection]=\"isSingleSelection()\"\n [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [searchTerm]=\"searchTerm()\"\n [isLazyLoad]=\"isLazyLoad()\"\n [isLocalSearch]=\"isLocalSearch()\"\n [isMultiToggleShown]=\"isMultiToggleShown()\"\n (searchAction)=\"search($event)\"\n (scrollAction)=\"scroll()\"\n (temporarySelectAction)=\"setTemporarySelection($event)\"\n (closeAction)=\"hideSelectionControl()\"\n (submitAction)=\"select($event)\" />\n </ng-template>\n }\n } @else if (isSelectionAvailable()) {\n <div rtElem=\"actions\">\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n }\n </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n <rtui-dynamic-selector-list-actions\n [isMobile]=\"isMobile()\"\n [disabled]=\"disabled()\"\n [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n (resetAction)=\"resetList()\"\n (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{
|
|
3230
|
+
], template: "<form [formGroup]=\"form\">\n <ng-container rtBlock=\"rtui-dynamic-selector\">\n @if (isNoDataPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n description=\"There are no available items to choose\"\n icon=\"warning\"\n [isButtonShow]=\"false\"\n [isIconOutlined]=\"true\" />\n } @else {\n <rtui-dynamic-selector-selected-list\n [isMobile]=\"isMobile()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [selectedEntities]=\"selectedEntities()\"\n [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n [isListDraggable]=\"isListDraggable()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [useTitleCase]=\"useTitleCase()\"\n [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n (dropAction)=\"onDrop($event)\"\n (deleteFromSelectedAction)=\"toggleEntity($event)\">\n @if (additionalControlTpl()) {\n <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n\n @if (itemTitleTpl()) {\n <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n </ng-container>\n }\n </rtui-dynamic-selector-selected-list>\n\n @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n @if (isPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n [icon]=\"placeholderIcon()\"\n [description]=\"placeholderDescription()\"\n [buttonTitle]=\"buttonTitle()\"\n [disabled]=\"disabled()\"\n [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n (submitAction)=\"showSelectionControl($event)\" />\n } @else {\n <div rtElem=\"actions\">\n @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n <button\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"c-button c-button--txt-base--size-sm\"\n [class.--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"showSelectionControl(trigger)\">\n {{ buttonTitle() }}\n </button>\n }\n\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n\n @if (selectedOverlayTrigger) {\n <ng-template\n rtEscapeKey\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n (backdropClick)=\"hideSelectionControl()\"\n (escapeKeyAction)=\"hideSelectionControl()\">\n <rtui-multi-selector-popup\n [navigateButtonTitle]=\"navigateButtonTitle()\"\n [navigateLink]=\"navigateLink()\"\n [entitiesToSelect]=\"entitiesToSelect()\"\n [appearance]=\"appearance()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [isMobile]=\"isMobile()\"\n [isSingleSelection]=\"isSingleSelection()\"\n [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [searchTerm]=\"searchTerm()\"\n [isLazyLoad]=\"isLazyLoad()\"\n [isLocalSearch]=\"isLocalSearch()\"\n [isMultiToggleShown]=\"isMultiToggleShown()\"\n (searchAction)=\"search($event)\"\n (scrollAction)=\"scroll()\"\n (temporarySelectAction)=\"setTemporarySelection($event)\"\n (closeAction)=\"hideSelectionControl()\"\n (submitAction)=\"select($event)\" />\n </ng-template>\n }\n } @else if (isSelectionAvailable()) {\n <div rtElem=\"actions\">\n <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n </div>\n }\n }\n </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n <rtui-dynamic-selector-list-actions\n [isMobile]=\"isMobile()\"\n [disabled]=\"disabled()\"\n [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n (resetAction)=\"resetList()\"\n (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\n"] }]
|
|
3151
3231
|
}], propDecorators: { keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], isSelectionAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectionAvailable", required: false }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], isOpenPopupButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpenPopupButtonShown", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], additionalControlChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalControlChanged", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], selectionChangeAction: [{ type: i0.Output, args: ["selectionChangeAction"] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorAdditionalControlDirective), { ...{
|
|
3152
3232
|
read: TemplateRef,
|
|
3153
3233
|
}, isSignal: true }] }], itemTitleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemTitleProjectionDirective), { ...{
|
|
@@ -3426,7 +3506,7 @@ class RtTableConfigAsideComponent {
|
|
|
3426
3506
|
});
|
|
3427
3507
|
}
|
|
3428
3508
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3429
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: RtTableConfigAsideComponent, isStandalone: true, selector: "rtui-test-aside", providers: [BreakpointService], ngImport: i0, template: "<rtui-aside-container\n [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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]=\"isMobile()\"\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{
|
|
3509
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: RtTableConfigAsideComponent, isStandalone: true, selector: "rtui-test-aside", providers: [BreakpointService], ngImport: i0, template: "<rtui-aside-container\n [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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]=\"isMobile()\"\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:
|
|
3430
3510
|
// directives
|
|
3431
3511
|
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:
|
|
3432
3512
|
// standalone components
|
|
@@ -3449,7 +3529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3449
3529
|
RtuiAsideContainerComponent,
|
|
3450
3530
|
RtuiDynamicSelectorComponent,
|
|
3451
3531
|
RtuiToggleComponent,
|
|
3452
|
-
], providers: [BreakpointService], template: "<rtui-aside-container\n [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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]=\"isMobile()\"\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{
|
|
3532
|
+
], providers: [BreakpointService], template: "<rtui-aside-container\n [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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]=\"isMobile()\"\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"] }]
|
|
3453
3533
|
}] });
|
|
3454
3534
|
|
|
3455
3535
|
class RtuiTableToolbarSelectorsDirective {
|
|
@@ -3620,7 +3700,7 @@ class RtuiTableContainerComponent {
|
|
|
3620
3700
|
}
|
|
3621
3701
|
}
|
|
3622
3702
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3623
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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" }, 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 class=\"c-button c-button--fab\"\n matTooltip=\"Clear filters\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Refresh\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Table configuration\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 rtElem=\"pagination\">\n <rtui-pagination\n [isMobile]=\"!!isMobile()\"\n [currentPageModel]=\"pageModel()\"\n (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: [":host{width:100%;position:relative;display:flex;overflow:hidden}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{background:var(--rt-scrollbar-thumb);border:3px solid transparent;border-radius:6px;background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{background:var(--rt-scrollbar-thumb-hover);border:2px solid transparent;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-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;justify-content:flex-start;align-items:center;flex-grow:1;width:100%;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{font-size:var(--rt-table-container-selector-counter-font-size);color:var(--rt-table-container-selector-counter-color)}:host .table-container__toolbar{width:100%;display:flex;justify-content:flex-end;align-items:center}: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-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{width:100%;flex-grow:1;overflow:auto;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{width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);display:flex;flex-direction:column;justify-content:center;align-items: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%;grid-row:1;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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:
|
|
3703
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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" }, 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 class=\"c-button c-button--fab\"\n matTooltip=\"Clear filters\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Refresh\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Table configuration\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 rtElem=\"pagination\">\n <rtui-pagination\n [isMobile]=\"!!isMobile()\"\n [currentPageModel]=\"pageModel()\"\n (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-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-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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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:
|
|
3624
3704
|
// Material
|
|
3625
3705
|
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:
|
|
3626
3706
|
// Standalone components
|
|
@@ -3661,7 +3741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3661
3741
|
RtuiScrollableContainerHeaderDirective,
|
|
3662
3742
|
RtIconOutlinedDirective,
|
|
3663
3743
|
RtuiToolbarLeftDirective,
|
|
3664
|
-
], providers: [BreakpointService, RtAsideService, PlatformService], 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 class=\"c-button c-button--fab\"\n matTooltip=\"Clear filters\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Refresh\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Table configuration\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 rtElem=\"pagination\">\n <rtui-pagination\n [isMobile]=\"!!isMobile()\"\n [currentPageModel]=\"pageModel()\"\n (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: [":host{width:100%;position:relative;display:flex;overflow:hidden}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{background:var(--rt-scrollbar-thumb);border:3px solid transparent;border-radius:6px;background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{background:var(--rt-scrollbar-thumb-hover);border:2px solid transparent;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-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;justify-content:flex-start;align-items:center;flex-grow:1;width:100%;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{font-size:var(--rt-table-container-selector-counter-font-size);color:var(--rt-table-container-selector-counter-color)}:host .table-container__toolbar{width:100%;display:flex;justify-content:flex-end;align-items:center}: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-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{width:100%;flex-grow:1;overflow:auto;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{width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);display:flex;flex-direction:column;justify-content:center;align-items: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%;grid-row:1;justify-content:center}}\n"] }]
|
|
3744
|
+
], providers: [BreakpointService, RtAsideService, PlatformService], 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 class=\"c-button c-button--fab\"\n matTooltip=\"Clear filters\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Refresh\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 class=\"c-button c-button--fab\"\n matTooltip=\"Table configuration\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\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 rtElem=\"pagination\">\n <rtui-pagination\n [isMobile]=\"!!isMobile()\"\n [currentPageModel]=\"pageModel()\"\n (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-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-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"] }]
|
|
3665
3745
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], tableConfigStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfigStorageKey", required: true }] }], pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: true }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: true }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: true }] }], isPaginationShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPaginationShown", required: false }] }], isRefreshButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRefreshButtonShown", required: false }] }], isTableConfigButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableConfigButtonShown", required: false }] }], isToolbarActionsIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToolbarActionsIconsOutlined", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], isFiltersEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersEmpty", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTitle", required: false }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refreshAction: [{ type: i0.Output, args: ["refreshAction"] }], clearFiltersAction: [{ type: i0.Output, args: ["clearFiltersAction"] }], toolbarSelectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableToolbarSelectorsDirective), { ...{
|
|
3666
3746
|
read: TemplateRef,
|
|
3667
3747
|
}, isSignal: true }] }], toolbarActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableToolbarActionsDirective), { ...{
|
|
@@ -3828,7 +3908,7 @@ class RtuiDynamicListComponent {
|
|
|
3828
3908
|
this.rowDoubleClick.emit(row);
|
|
3829
3909
|
}
|
|
3830
3910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3831
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicListComponent, isStandalone: true, selector: "rtui-dynamic-list", inputs: { tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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 }, 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" }, 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 [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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{width:100%;height:100
|
|
3911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicListComponent, isStandalone: true, selector: "rtui-dynamic-list", inputs: { tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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 }, 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" }, 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 [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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:
|
|
3832
3912
|
// Directives
|
|
3833
3913
|
RtuiTableToolbarActionsDirective, selector: "[rtuiTableToolbarActionsDirective]" }, { kind: "directive", type: RtuiTableRowActionsDirective, selector: "[rtuiTabletRowActionsDirective]" }, { kind: "directive", type: RtuiTableToolbarSelectorsDirective, selector: "[rtuiTableToolbarSelectorsDirective]" }, { kind: "directive", type: RtuiTableAdditionalRowActionsDirective, selector: "[rtuiTableAdditionalRowActionsDirective]" }, { kind: "component", type:
|
|
3834
3914
|
// Ui-kit
|
|
@@ -3847,7 +3927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3847
3927
|
RtuiTableContainerComponent,
|
|
3848
3928
|
RtuiTableComponent,
|
|
3849
3929
|
RtuiCustomTableCellsDirective,
|
|
3850
|
-
], template: "<rtui-table-container\n [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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{width:100%;height:100
|
|
3930
|
+
], template: "<rtui-table-container\n [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [isMobile]=\"isMobile()\"\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 [isMobile]=\"isMobile()\"\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"] }]
|
|
3851
3931
|
}], propDecorators: { tableConfigStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfigStorageKey", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isTableRowsClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableRowsClickable", required: false }] }], isPaginationShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPaginationShown", required: false }] }], isRefreshButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRefreshButtonShown", required: false }] }], isTableConfigButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableConfigButtonShown", required: false }] }], isToolbarActionsIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToolbarActionsIconsOutlined", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: false }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], filterAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterAppearance", required: false }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], clearFiltersAction: [{ type: i0.Output, args: ["clearFiltersAction"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], toolbarSelectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicListToolbarSelectorsDirective), { ...{
|
|
3852
3932
|
read: TemplateRef,
|
|
3853
3933
|
}, isSignal: true }] }], toolbarActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicListToolbarActionsDirective), { ...{
|
|
@@ -3869,11 +3949,11 @@ class RtuiPopoverContainerComponent {
|
|
|
3869
3949
|
return this.#sanitizer.sanitize(1, this.popoverClass());
|
|
3870
3950
|
}
|
|
3871
3951
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPopoverContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3872
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;width:fit-content;
|
|
3952
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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" } }, 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 }); }
|
|
3873
3953
|
}
|
|
3874
3954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPopoverContainerComponent, decorators: [{
|
|
3875
3955
|
type: Component,
|
|
3876
|
-
args: [{ selector: 'rtui-popover-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;width:fit-content;
|
|
3956
|
+
args: [{ selector: 'rtui-popover-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], 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"] }]
|
|
3877
3957
|
}], propDecorators: { popoverTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTemplate", required: false }] }], popoverClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverClass", required: false }] }], className: [{
|
|
3878
3958
|
type: HostBinding,
|
|
3879
3959
|
args: ['class']
|
|
@@ -4037,7 +4117,7 @@ class RtuiActionBarComponent {
|
|
|
4037
4117
|
}
|
|
4038
4118
|
}
|
|
4039
4119
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4040
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiActionBarComponent, isStandalone: true, selector: "rtui-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeAction: "closeAction" }, 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 <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\n }\n }\n </div>\n }\n\n <div 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 </div>\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 <div rtElem=\"action\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\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: ["
|
|
4120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiActionBarComponent, isStandalone: true, selector: "rtui-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeAction: "closeAction" }, 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 <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\n }\n }\n </div>\n }\n\n <div 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 </div>\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 <div rtElem=\"action\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\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-radius:var(--rt-action-bar-action-border-radius);cursor:pointer;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{margin-left:auto;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-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer;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:
|
|
4041
4121
|
// material
|
|
4042
4122
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
4043
4123
|
// rt-tools
|
|
@@ -4056,7 +4136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4056
4136
|
EmptyToDashPipe,
|
|
4057
4137
|
RtIconOutlinedDirective,
|
|
4058
4138
|
RtPopoverDirective,
|
|
4059
|
-
], providers: [BreakpointService], 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 <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\n }\n }\n </div>\n }\n\n <div 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 </div>\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 <div rtElem=\"action\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\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: ["
|
|
4139
|
+
], providers: [BreakpointService], 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 <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\n }\n }\n </div>\n }\n\n <div 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 </div>\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 <div rtElem=\"action\" (click)=\"onAction(btn)\">\n <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n </div>\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-radius:var(--rt-action-bar-action-border-radius);cursor:pointer;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{margin-left:auto;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-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer;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"] }]
|
|
4060
4140
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }] } });
|
|
4061
4141
|
|
|
4062
4142
|
class RtActionBarService {
|
|
@@ -4089,7 +4169,7 @@ class RtuiActionBarContainerComponent {
|
|
|
4089
4169
|
this.#actionBarService.closeActionBar();
|
|
4090
4170
|
}
|
|
4091
4171
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4092
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiActionBarContainerComponent, isStandalone: true, selector: "rtui-action-bar-container", ngImport: i0, template: "@if (config()?.selected) {\n <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\n", styles: [":host{
|
|
4172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiActionBarContainerComponent, isStandalone: true, selector: "rtui-action-bar-container", ngImport: i0, template: "@if (config()?.selected) {\n <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\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)}\n"], dependencies: [{ kind: "component", type: RtuiActionBarComponent, selector: "rtui-action-bar", inputs: ["config"], outputs: ["closeAction"] }], animations: [
|
|
4093
4173
|
trigger('barState', [
|
|
4094
4174
|
state('opened', style({ transform: 'translateY(0)' })),
|
|
4095
4175
|
transition('void => *', [
|
|
@@ -4129,7 +4209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4129
4209
|
])),
|
|
4130
4210
|
]),
|
|
4131
4211
|
]),
|
|
4132
|
-
], template: "@if (config()?.selected) {\n <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\n", styles: [":host{
|
|
4212
|
+
], template: "@if (config()?.selected) {\n <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\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)}\n"] }]
|
|
4133
4213
|
}] });
|
|
4134
4214
|
|
|
4135
4215
|
/**
|
|
@@ -4194,11 +4274,11 @@ class RtuiSnackBarComponent {
|
|
|
4194
4274
|
this.player?.play();
|
|
4195
4275
|
}
|
|
4196
4276
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiSnackBarComponent, isStandalone: true, selector: "rtui-snack-bar", host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "progressTplRef", first: true, predicate: ["progressTpl"], descendants: true, isSignal: true }], 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 #progressTpl rtElem=\"progress\"></div>\n }\n</ng-container>\n", styles: ["
|
|
4277
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiSnackBarComponent, isStandalone: true, selector: "rtui-snack-bar", host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "progressTplRef", first: true, predicate: ["progressTpl"], descendants: true, isSignal: true }], 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 #progressTpl rtElem=\"progress\"></div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";: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);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)}\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 }); }
|
|
4198
4278
|
}
|
|
4199
4279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSnackBarComponent, decorators: [{
|
|
4200
4280
|
type: Component,
|
|
4201
|
-
args: [{ selector: 'rtui-snack-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton, MatIcon, ElemDirective, BlockDirective, RtIconOutlinedDirective], 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 #progressTpl rtElem=\"progress\"></div>\n }\n</ng-container>\n", styles: ["
|
|
4281
|
+
args: [{ selector: 'rtui-snack-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton, MatIcon, ElemDirective, BlockDirective, RtIconOutlinedDirective], 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 #progressTpl rtElem=\"progress\"></div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";: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);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)}\n"] }]
|
|
4202
4282
|
}], ctorParameters: () => [], propDecorators: { progressTplRef: [{ type: i0.ViewChild, args: ['progressTpl', { isSignal: true }] }], onMouseOver: [{
|
|
4203
4283
|
type: HostListener,
|
|
4204
4284
|
args: ['mouseover']
|
|
@@ -4377,11 +4457,11 @@ class RtuiInfoBadgeComponent {
|
|
|
4377
4457
|
}
|
|
4378
4458
|
}
|
|
4379
4459
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiInfoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, 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 [ngClass]=\"badgeClass\"\n [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\n <div rtElem=\"content\" #content>{{ text() }}</div>\n @if (glyph()) {\n <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n }\n</div>\n", styles: [":host{
|
|
4460
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, 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 [ngClass]=\"badgeClass\"\n [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\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 .size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .mat-icon{width:unset;height:unset}:host .bold{font-weight:var(--rt-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4381
4461
|
}
|
|
4382
4462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiInfoBadgeComponent, decorators: [{
|
|
4383
4463
|
type: Component,
|
|
4384
|
-
args: [{ selector: 'rtui-info-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, NgClass, MatIcon, NgStyle, BlockDirective, ElemDirective], template: "<div\n rtBlock=\"c-info-badge\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"text()\"\n [ngClass]=\"badgeClass\"\n [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\n <div rtElem=\"content\" #content>{{ text() }}</div>\n @if (glyph()) {\n <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n }\n</div>\n", styles: [":host{
|
|
4464
|
+
args: [{ selector: 'rtui-info-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, NgClass, MatIcon, NgStyle, BlockDirective, ElemDirective], template: "<div\n rtBlock=\"c-info-badge\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"text()\"\n [ngClass]=\"badgeClass\"\n [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\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 .size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .mat-icon{width:unset;height:unset}:host .bold{font-weight:var(--rt-font-weight-bold)}\n"] }]
|
|
4385
4465
|
}], 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 }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
|
|
4386
4466
|
|
|
4387
4467
|
var INFO_BADGE_TYPE_ENUM;
|
|
@@ -4421,7 +4501,7 @@ class RtuiFileUploadComponent {
|
|
|
4421
4501
|
}
|
|
4422
4502
|
}
|
|
4423
4503
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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()" } }, 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 rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["
|
|
4504
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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()" } }, 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 rtBlock=\"c-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:
|
|
4425
4505
|
// directives
|
|
4426
4506
|
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 }); }
|
|
4427
4507
|
}
|
|
@@ -4439,7 +4519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4439
4519
|
'(dragover)': 'onDragOver($event)',
|
|
4440
4520
|
'(dragleave)': 'onDragLeave($event)',
|
|
4441
4521
|
'(drop)': 'onDrop($event)',
|
|
4442
|
-
}, 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 rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["
|
|
4522
|
+
}, 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 rtBlock=\"c-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"] }]
|
|
4443
4523
|
}], propDecorators: { isIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconOutlined", required: false }] }], uploadFile: [{ type: i0.Output, args: ["uploadFile"] }] } });
|
|
4444
4524
|
|
|
4445
4525
|
class RtuiImageUploadComponent {
|
|
@@ -4526,13 +4606,13 @@ class RtuiImageUploadComponent {
|
|
|
4526
4606
|
this.save.emit();
|
|
4527
4607
|
}
|
|
4528
4608
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiImageUploadComponent, isStandalone: true, selector: "rtui-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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" }, 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 rtBlock=\"c-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]=\"isMobile() || !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]=\"isMobile()\"\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: ["
|
|
4609
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiImageUploadComponent, isStandalone: true, selector: "rtui-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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" }, 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 rtBlock=\"c-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]=\"isMobile() || !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]=\"isMobile()\"\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:
|
|
4530
4610
|
// material
|
|
4531
4611
|
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:
|
|
4532
4612
|
// cropper
|
|
4533
4613
|
ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "directive", type:
|
|
4534
4614
|
// rt-tools
|
|
4535
|
-
ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { 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 }); }
|
|
4615
|
+
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"] }, { 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 }); }
|
|
4536
4616
|
}
|
|
4537
4617
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiImageUploadComponent, decorators: [{
|
|
4538
4618
|
type: Component,
|
|
@@ -4546,11 +4626,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4546
4626
|
ImageCropperComponent,
|
|
4547
4627
|
// rt-tools
|
|
4548
4628
|
ElemDirective,
|
|
4629
|
+
ModDirective,
|
|
4549
4630
|
BlockDirective,
|
|
4550
4631
|
RtuiSpinnerComponent,
|
|
4551
4632
|
RtuiFileUploadComponent,
|
|
4552
4633
|
RtIconOutlinedDirective,
|
|
4553
|
-
], 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 rtBlock=\"c-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]=\"isMobile() || !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]=\"isMobile()\"\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: ["
|
|
4634
|
+
], 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 rtBlock=\"c-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]=\"isMobile() || !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]=\"isMobile()\"\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"] }]
|
|
4554
4635
|
}], propDecorators: { imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: true }] }, { type: i0.Output, args: ["imageUrlChange"] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isSaveButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSaveButtonShown", required: false }] }], isDownloadButtonEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDownloadButtonEnabled", required: false }] }], isTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTooltipDisabled", required: false }] }], isActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActionsShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], imageQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageQuality", required: false }] }], imageChanged: [{ type: i0.Output, args: ["imageChanged"] }], save: [{ type: i0.Output, args: ["save"] }] } });
|
|
4555
4636
|
|
|
4556
4637
|
var RT_THEME_ENUM;
|
|
@@ -4563,15 +4644,38 @@ const RT_THEME_STORAGE_KEY = 'rt-theme';
|
|
|
4563
4644
|
const RT_DARK_CLASS = 'rt-dark';
|
|
4564
4645
|
const RT_THEME_AUTO_CLASS = 'rt-theme-auto';
|
|
4565
4646
|
const RT_THEME_ATTRIBUTE = 'data-rt-theme';
|
|
4647
|
+
/**
|
|
4648
|
+
* Accent roles whose `--rt-color-{role}-{0..100}` indirection rows a custom
|
|
4649
|
+
* color scheme may override. The semantic accent tier
|
|
4650
|
+
* (`--rt-bg/text/icon/border-accent-*`) derives entirely from these rows.
|
|
4651
|
+
*/
|
|
4652
|
+
var RT_ACCENT_ROLE_ENUM;
|
|
4653
|
+
(function (RT_ACCENT_ROLE_ENUM) {
|
|
4654
|
+
RT_ACCENT_ROLE_ENUM["PRIMARY"] = "primary";
|
|
4655
|
+
RT_ACCENT_ROLE_ENUM["INFO"] = "info";
|
|
4656
|
+
RT_ACCENT_ROLE_ENUM["SUCCESS"] = "success";
|
|
4657
|
+
RT_ACCENT_ROLE_ENUM["WARNING"] = "warning";
|
|
4658
|
+
RT_ACCENT_ROLE_ENUM["DANGER"] = "danger";
|
|
4659
|
+
RT_ACCENT_ROLE_ENUM["BRAND"] = "brand";
|
|
4660
|
+
})(RT_ACCENT_ROLE_ENUM || (RT_ACCENT_ROLE_ENUM = {}));
|
|
4661
|
+
/** `'default'`/`null` clears the active scheme (back to the rt-tools palette). */
|
|
4662
|
+
const RT_DEFAULT_SCHEME = 'default';
|
|
4663
|
+
const RT_COLOR_SCHEME_STORAGE_KEY = 'rt-color-scheme';
|
|
4664
|
+
const RT_SCHEME_ATTRIBUTE = 'data-rt-scheme';
|
|
4566
4665
|
|
|
4567
4666
|
/**
|
|
4568
|
-
* Global theme switcher for the rt-tools design tokens.
|
|
4667
|
+
* Global theme + color-scheme switcher for the rt-tools design tokens.
|
|
4569
4668
|
*
|
|
4570
|
-
*
|
|
4571
|
-
* (`--rt-*`) adapt through `color-scheme` + `light-dark()`.
|
|
4572
|
-
*
|
|
4669
|
+
* **Theme** (`light`/`dark`/`auto`): applies `.rt-dark` / `.rt-theme-auto` to
|
|
4670
|
+
* `<html>`; semantic tokens (`--rt-*`) adapt through `color-scheme` + `light-dark()`.
|
|
4671
|
+
* Persisted to localStorage (`rt-theme`). `auto` follows the OS preference.
|
|
4573
4672
|
*
|
|
4574
|
-
*
|
|
4673
|
+
* **Color scheme** (brand palette): toggles `data-rt-scheme="<name>"` on `<html>`,
|
|
4674
|
+
* which activates a `[data-rt-scheme]` block (emitted by the `rt.color-scheme` Sass
|
|
4675
|
+
* mixin or injected at runtime via {@link registerColorScheme}). It overrides only
|
|
4676
|
+
* the accent-role rows `--rt-color-{role}-{N}`, so the whole accent layer recolors
|
|
4677
|
+
* while semantic token names stay stable. Orthogonal to light/dark; persisted to
|
|
4678
|
+
* localStorage (`rt-color-scheme`).
|
|
4575
4679
|
*/
|
|
4576
4680
|
class RtThemeService {
|
|
4577
4681
|
#document;
|
|
@@ -4579,16 +4683,22 @@ class RtThemeService {
|
|
|
4579
4683
|
// falls back to the native localStorage when the app does not call provideRtStorage()
|
|
4580
4684
|
#storage;
|
|
4581
4685
|
#theme;
|
|
4686
|
+
#colorScheme;
|
|
4582
4687
|
constructor() {
|
|
4583
4688
|
this.#document = inject(DOCUMENT);
|
|
4584
4689
|
this.#platformService = inject(PlatformService);
|
|
4585
4690
|
// falls back to the native localStorage when the app does not call provideRtStorage()
|
|
4586
4691
|
this.#storage = inject(LOCAL_STORAGE, { optional: true }) ?? this.#document.defaultView?.localStorage ?? null;
|
|
4587
4692
|
this.#theme = signal(this.#restore(), { ...(ngDevMode ? { debugName: "#theme" } : {}) });
|
|
4693
|
+
this.#colorScheme = signal(this.#restoreScheme(), { ...(ngDevMode ? { debugName: "#colorScheme" } : {}) });
|
|
4588
4694
|
this.theme = this.#theme.asReadonly();
|
|
4695
|
+
this.colorScheme = this.#colorScheme.asReadonly();
|
|
4589
4696
|
effect(() => {
|
|
4590
4697
|
this.#apply(this.#theme());
|
|
4591
4698
|
});
|
|
4699
|
+
effect(() => {
|
|
4700
|
+
this.#applyScheme(this.#colorScheme());
|
|
4701
|
+
});
|
|
4592
4702
|
}
|
|
4593
4703
|
setTheme(theme) {
|
|
4594
4704
|
this.#theme.set(theme);
|
|
@@ -4600,6 +4710,42 @@ class RtThemeService {
|
|
|
4600
4710
|
toggle() {
|
|
4601
4711
|
this.setTheme(this.#isDarkApplied() ? RT_THEME_ENUM.LIGHT : RT_THEME_ENUM.DARK);
|
|
4602
4712
|
}
|
|
4713
|
+
/**
|
|
4714
|
+
* Activates a registered color scheme by name, or clears it with `null`/`'default'`.
|
|
4715
|
+
* Orthogonal to the light/dark theme; persisted to localStorage.
|
|
4716
|
+
*/
|
|
4717
|
+
setColorScheme(name) {
|
|
4718
|
+
const normalized = !name || name === RT_DEFAULT_SCHEME ? null : name;
|
|
4719
|
+
this.#colorScheme.set(normalized);
|
|
4720
|
+
if (this.#platformService.isPlatformBrowser && this.#storage) {
|
|
4721
|
+
if (normalized) {
|
|
4722
|
+
this.#storage.setItem(RT_COLOR_SCHEME_STORAGE_KEY, normalized);
|
|
4723
|
+
}
|
|
4724
|
+
else {
|
|
4725
|
+
this.#storage.removeItem(RT_COLOR_SCHEME_STORAGE_KEY);
|
|
4726
|
+
}
|
|
4727
|
+
}
|
|
4728
|
+
}
|
|
4729
|
+
/**
|
|
4730
|
+
* Injects (or replaces) a color scheme's `[data-rt-scheme]` block at runtime —
|
|
4731
|
+
* the JS twin of the `rt.color-scheme` Sass mixin. Browser-only (no-op on server;
|
|
4732
|
+
* for SSR/brand-critical schemes prefer the Sass path). Does not activate the
|
|
4733
|
+
* scheme — call {@link setColorScheme} afterwards.
|
|
4734
|
+
*/
|
|
4735
|
+
registerColorScheme(name, ramp) {
|
|
4736
|
+
this.#validateRamp(name, ramp);
|
|
4737
|
+
if (!this.#platformService.isPlatformBrowser) {
|
|
4738
|
+
return;
|
|
4739
|
+
}
|
|
4740
|
+
const id = `rt-color-scheme-${name}`;
|
|
4741
|
+
const existing = this.#document.getElementById(id);
|
|
4742
|
+
const style = existing ?? this.#document.createElement('style');
|
|
4743
|
+
style.id = id;
|
|
4744
|
+
style.textContent = this.#buildSchemeCss(name, ramp);
|
|
4745
|
+
if (!existing) {
|
|
4746
|
+
this.#document.head.appendChild(style);
|
|
4747
|
+
}
|
|
4748
|
+
}
|
|
4603
4749
|
#restore() {
|
|
4604
4750
|
if (!this.#platformService.isPlatformBrowser || !this.#storage) {
|
|
4605
4751
|
return RT_THEME_ENUM.LIGHT;
|
|
@@ -4607,6 +4753,13 @@ class RtThemeService {
|
|
|
4607
4753
|
const stored = this.#storage.getItem(RT_THEME_STORAGE_KEY);
|
|
4608
4754
|
return Object.values(RT_THEME_ENUM).includes(stored) ? stored : RT_THEME_ENUM.LIGHT;
|
|
4609
4755
|
}
|
|
4756
|
+
#restoreScheme() {
|
|
4757
|
+
if (!this.#platformService.isPlatformBrowser || !this.#storage) {
|
|
4758
|
+
return null;
|
|
4759
|
+
}
|
|
4760
|
+
const stored = this.#storage.getItem(RT_COLOR_SCHEME_STORAGE_KEY);
|
|
4761
|
+
return stored && stored !== RT_DEFAULT_SCHEME ? stored : null;
|
|
4762
|
+
}
|
|
4610
4763
|
#apply(theme) {
|
|
4611
4764
|
if (!this.#platformService.isPlatformBrowser) {
|
|
4612
4765
|
return;
|
|
@@ -4615,6 +4768,47 @@ class RtThemeService {
|
|
|
4615
4768
|
classList.toggle(RT_DARK_CLASS, theme === RT_THEME_ENUM.DARK);
|
|
4616
4769
|
classList.toggle(RT_THEME_AUTO_CLASS, theme === RT_THEME_ENUM.AUTO);
|
|
4617
4770
|
}
|
|
4771
|
+
#applyScheme(name) {
|
|
4772
|
+
if (!this.#platformService.isPlatformBrowser) {
|
|
4773
|
+
return;
|
|
4774
|
+
}
|
|
4775
|
+
const root = this.#document.documentElement;
|
|
4776
|
+
if (name) {
|
|
4777
|
+
root.setAttribute(RT_SCHEME_ATTRIBUTE, name);
|
|
4778
|
+
}
|
|
4779
|
+
else {
|
|
4780
|
+
root.removeAttribute(RT_SCHEME_ATTRIBUTE);
|
|
4781
|
+
}
|
|
4782
|
+
}
|
|
4783
|
+
/**
|
|
4784
|
+
* Validates a ramp the same way the `rt.color-scheme` Sass mixin does — unknown
|
|
4785
|
+
* role or out-of-range tone (must be an integer 0–100) throws. Keeps the JS twin
|
|
4786
|
+
* at parity with the build-time generator instead of silently emitting bad rows.
|
|
4787
|
+
*/
|
|
4788
|
+
#validateRamp(name, ramp) {
|
|
4789
|
+
if (!name || name === RT_DEFAULT_SCHEME) {
|
|
4790
|
+
throw new Error(`registerColorScheme: name must be a non-empty string other than '${RT_DEFAULT_SCHEME}'.`);
|
|
4791
|
+
}
|
|
4792
|
+
const roles = Object.values(RT_ACCENT_ROLE_ENUM);
|
|
4793
|
+
for (const role of Object.keys(ramp)) {
|
|
4794
|
+
if (!roles.includes(role)) {
|
|
4795
|
+
throw new Error(`registerColorScheme("${name}"): unknown role "${role}". Allowed roles: ${roles.join(', ')}.`);
|
|
4796
|
+
}
|
|
4797
|
+
for (const tone of Object.keys(ramp[role] ?? {})) {
|
|
4798
|
+
const step = Number(tone);
|
|
4799
|
+
if (!Number.isInteger(step) || step < 0 || step > 100) {
|
|
4800
|
+
throw new Error(`registerColorScheme("${name}"): role "${role}" tone "${tone}" must be an integer 0–100.`);
|
|
4801
|
+
}
|
|
4802
|
+
}
|
|
4803
|
+
}
|
|
4804
|
+
}
|
|
4805
|
+
/** Builds the `:root[data-rt-scheme="<name>"] { --rt-color-{role}-{N}: … }` block (mirrors the Sass mixin). */
|
|
4806
|
+
#buildSchemeCss(name, ramp) {
|
|
4807
|
+
const declarations = Object.entries(ramp)
|
|
4808
|
+
.flatMap(([role, tones]) => Object.entries(tones ?? {}).map(([tone, value]) => `--rt-color-${role}-${tone}:${value};`))
|
|
4809
|
+
.join('');
|
|
4810
|
+
return `:root[${RT_SCHEME_ATTRIBUTE}="${name}"]{${declarations}}`;
|
|
4811
|
+
}
|
|
4618
4812
|
#isDarkApplied() {
|
|
4619
4813
|
if (this.#theme() === RT_THEME_ENUM.AUTO) {
|
|
4620
4814
|
return this.#platformService.isPlatformBrowser && this.#document.defaultView
|
|
@@ -4672,5 +4866,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4672
4866
|
* Generated bundle index. Do not edit.
|
|
4673
4867
|
*/
|
|
4674
4868
|
|
|
4675
|
-
export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef,
|
|
4869
|
+
export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, 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, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
|
|
4676
4870
|
//# sourceMappingURL=rt-tools-ui-kit.mjs.map
|