@rt-tools/ui-kit 0.0.26 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +171 -92
- package/fesm2022/rt-tools-ui-kit.mjs +791 -608
- package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
- package/package.json +18 -18
- package/rt-tools-ui-kit-0.0.28.tgz +0 -0
- package/rt-tools-ui-kit-0.0.26.tgz +0 -0
|
@@ -80,14 +80,14 @@ class RtuiModalComponent {
|
|
|
80
80
|
message: Boolean(this.control) ? this.control?.value : null,
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
84
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
83
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
84
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type:
|
|
85
85
|
// material
|
|
86
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:
|
|
87
87
|
// BEM
|
|
88
88
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: SanitizePipe, name: "sanitize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
89
89
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiModalComponent, decorators: [{
|
|
91
91
|
type: Component,
|
|
92
92
|
args: [{ selector: 'rtui-modal', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rtui-modal' }, imports: [
|
|
93
93
|
NgStyle,
|
|
@@ -151,38 +151,38 @@ class RtModalService {
|
|
|
151
151
|
on: (predicate) => result$.pipe(filter((answer) => predicate(answer))),
|
|
152
152
|
};
|
|
153
153
|
}
|
|
154
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
155
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
154
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
155
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtModalService }); }
|
|
156
156
|
}
|
|
157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtModalService, decorators: [{
|
|
158
158
|
type: Injectable
|
|
159
159
|
}] });
|
|
160
160
|
|
|
161
161
|
class RtuiScrollableContainerHeaderDirective {
|
|
162
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
163
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
162
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
163
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiScrollableContainerHeaderDirective, isStandalone: true, selector: "[rtuiScrollableHeader]", ngImport: i0 }); }
|
|
164
164
|
}
|
|
165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, decorators: [{
|
|
166
166
|
type: Directive,
|
|
167
167
|
args: [{
|
|
168
168
|
selector: '[rtuiScrollableHeader]',
|
|
169
169
|
}]
|
|
170
170
|
}] });
|
|
171
171
|
class RtuiScrollableContainerContentDirective {
|
|
172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
173
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
173
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiScrollableContainerContentDirective, isStandalone: true, selector: "[rtuiScrollableContent]", ngImport: i0 }); }
|
|
174
174
|
}
|
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerContentDirective, decorators: [{
|
|
176
176
|
type: Directive,
|
|
177
177
|
args: [{
|
|
178
178
|
selector: '[rtuiScrollableContent]',
|
|
179
179
|
}]
|
|
180
180
|
}] });
|
|
181
181
|
class RtuiScrollableContainerFooterDirective {
|
|
182
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
183
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
182
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
183
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiScrollableContainerFooterDirective, isStandalone: true, selector: "[rtuiScrollableFooter]", ngImport: i0 }); }
|
|
184
184
|
}
|
|
185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerFooterDirective, decorators: [{
|
|
186
186
|
type: Directive,
|
|
187
187
|
args: [{
|
|
188
188
|
selector: '[rtuiScrollableFooter]',
|
|
@@ -190,14 +190,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
190
190
|
}] });
|
|
191
191
|
class RtuiScrollableContainerComponent {
|
|
192
192
|
constructor() {
|
|
193
|
-
this.headerTpl = contentChild(RtuiScrollableContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : {}), read: TemplateRef });
|
|
194
|
-
this.contentTpl = contentChild(RtuiScrollableContainerContentDirective, { ...(ngDevMode ? { debugName: "contentTpl" } : {}), read: TemplateRef });
|
|
195
|
-
this.footerTpl = contentChild(RtuiScrollableContainerFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : {}), read: TemplateRef });
|
|
193
|
+
this.headerTpl = contentChild(RtuiScrollableContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
194
|
+
this.contentTpl = contentChild(RtuiScrollableContainerContentDirective, { ...(ngDevMode ? { debugName: "contentTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
195
|
+
this.footerTpl = contentChild(RtuiScrollableContainerFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
196
196
|
}
|
|
197
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
197
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
199
199
|
}
|
|
200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerComponent, decorators: [{
|
|
201
201
|
type: Component,
|
|
202
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"] }]
|
|
203
203
|
}], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerHeaderDirective), { ...{
|
|
@@ -211,12 +211,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
211
211
|
class RtuiSideMenuSubItemComponent {
|
|
212
212
|
constructor() {
|
|
213
213
|
this.menuRef = inject(RtuiSideMenuComponent);
|
|
214
|
-
this.item = input.required(
|
|
215
|
-
|
|
216
|
-
this.
|
|
217
|
-
this.
|
|
218
|
-
this.
|
|
219
|
-
this.
|
|
214
|
+
this.item = input.required(/* @ts-ignore */
|
|
215
|
+
...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
216
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
217
|
+
this.isSubMenuXScrollEnabled = input(false, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
218
|
+
this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
219
|
+
this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
220
|
+
this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
220
221
|
this.clickSubMenuAction = output();
|
|
221
222
|
this.clickSubMenuAdditionalAction = output();
|
|
222
223
|
}
|
|
@@ -226,8 +227,8 @@ class RtuiSideMenuSubItemComponent {
|
|
|
226
227
|
onClickSubMenuAdditional(data, event) {
|
|
227
228
|
this.clickSubMenuAdditionalAction.emit({ data, event });
|
|
228
229
|
}
|
|
229
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
230
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuSubItemComponent, isStandalone: true, selector: "rtui-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, providers: [
|
|
231
232
|
{
|
|
232
233
|
provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
|
|
233
234
|
useValue: {
|
|
@@ -238,7 +239,7 @@ class RtuiSideMenuSubItemComponent {
|
|
|
238
239
|
// directives
|
|
239
240
|
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 }); }
|
|
240
241
|
}
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuSubItemComponent, decorators: [{
|
|
242
243
|
type: Component,
|
|
243
244
|
args: [{ selector: 'rtui-side-menu-sub-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
244
245
|
NgTemplateOutlet,
|
|
@@ -266,20 +267,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
266
267
|
}], 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"] }] } });
|
|
267
268
|
|
|
268
269
|
class RtuiSideMenuHeaderDirective {
|
|
269
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
270
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
270
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
271
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiSideMenuHeaderDirective, isStandalone: true, selector: "[rtuiSideMenuHeader]", ngImport: i0 }); }
|
|
271
272
|
}
|
|
272
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuHeaderDirective, decorators: [{
|
|
273
274
|
type: Directive,
|
|
274
275
|
args: [{
|
|
275
276
|
selector: '[rtuiSideMenuHeader]',
|
|
276
277
|
}]
|
|
277
278
|
}] });
|
|
278
279
|
class RtuiSideMenuFooterDirective {
|
|
279
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
280
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
280
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
281
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiSideMenuFooterDirective, isStandalone: true, selector: "[rtuiSideMenuFooter]", ngImport: i0 }); }
|
|
281
282
|
}
|
|
282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuFooterDirective, decorators: [{
|
|
283
284
|
type: Directive,
|
|
284
285
|
args: [{
|
|
285
286
|
selector: '[rtuiSideMenuFooter]',
|
|
@@ -287,23 +288,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
287
288
|
}] });
|
|
288
289
|
class RtuiSideMenuComponent {
|
|
289
290
|
constructor() {
|
|
290
|
-
this.headerTpl = contentChild(RtuiSideMenuHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : {}), read: TemplateRef });
|
|
291
|
-
this.footerTpl = contentChild(RtuiSideMenuFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : {}), read: TemplateRef });
|
|
292
|
-
this.subMenuRef = viewChild(MatDrawer,
|
|
293
|
-
|
|
294
|
-
this.
|
|
295
|
-
|
|
296
|
-
this.
|
|
297
|
-
|
|
298
|
-
this.
|
|
299
|
-
|
|
300
|
-
this.
|
|
301
|
-
|
|
302
|
-
this.
|
|
303
|
-
this.
|
|
291
|
+
this.headerTpl = contentChild(RtuiSideMenuHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
292
|
+
this.footerTpl = contentChild(RtuiSideMenuFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
293
|
+
this.subMenuRef = viewChild(MatDrawer, /* @ts-ignore */
|
|
294
|
+
...(ngDevMode ? [{ debugName: "subMenuRef" }] : /* istanbul ignore next */ []));
|
|
295
|
+
this.backToMainMenuButton = signal({ id: 0, icon: 'arrow_back', name: 'Main Menu', link: ' ' }, /* @ts-ignore */
|
|
296
|
+
...(ngDevMode ? [{ debugName: "backToMainMenuButton" }] : /* istanbul ignore next */ []));
|
|
297
|
+
this.selectedItem = signal(null, /* @ts-ignore */
|
|
298
|
+
...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
299
|
+
this.selectedSubMenu = signal(null, /* @ts-ignore */
|
|
300
|
+
...(ngDevMode ? [{ debugName: "selectedSubMenu" }] : /* istanbul ignore next */ []));
|
|
301
|
+
this.activeMenuIds = input.required(/* @ts-ignore */
|
|
302
|
+
...(ngDevMode ? [{ debugName: "activeMenuIds" }] : /* istanbul ignore next */ []));
|
|
303
|
+
this.menuItems = input([], { ...(ngDevMode ? { debugName: "menuItems" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
304
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
305
|
+
this.isSubMenuXScrollEnabled = input(true, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
306
|
+
this.isMainMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isMainMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
307
|
+
this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
308
|
+
this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
309
|
+
this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
304
310
|
this.activeMenuId = computed(() => {
|
|
305
311
|
return this.activeMenuIds()?.length ? this.activeMenuIds()[this.activeMenuIds()?.length - 1] : '';
|
|
306
|
-
},
|
|
312
|
+
}, /* @ts-ignore */
|
|
313
|
+
...(ngDevMode ? [{ debugName: "activeMenuId" }] : /* istanbul ignore next */ []));
|
|
307
314
|
this.closeMobileMenuAction = output();
|
|
308
315
|
this.clickSubMenuAction = output();
|
|
309
316
|
this.clickSubMenuAdditionalAction = output();
|
|
@@ -360,14 +367,14 @@ class RtuiSideMenuComponent {
|
|
|
360
367
|
#openSubMenu() {
|
|
361
368
|
this.subMenuRef()?.open().then();
|
|
362
369
|
}
|
|
363
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
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:
|
|
370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, 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:
|
|
365
372
|
// directives
|
|
366
373
|
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:
|
|
367
374
|
// components
|
|
368
375
|
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 }); }
|
|
369
376
|
}
|
|
370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, decorators: [{
|
|
371
378
|
type: Component,
|
|
372
379
|
args: [{ selector: 'rtui-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
373
380
|
NgTemplateOutlet,
|
|
@@ -398,14 +405,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
398
405
|
|
|
399
406
|
class RtuiSpinnerComponent {
|
|
400
407
|
constructor() {
|
|
401
|
-
this.diameter = input(32, { ...(ngDevMode ? { debugName: "diameter" } : {}), transform: numberAttribute });
|
|
402
|
-
this.showBox = input(true, { ...(ngDevMode ? { debugName: "showBox" } : {}), transform: booleanAttribute });
|
|
403
|
-
this.showBackground = input(false, { ...(ngDevMode ? { debugName: "showBackground" } : {}), transform: booleanAttribute });
|
|
408
|
+
this.diameter = input(32, { ...(ngDevMode ? { debugName: "diameter" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
409
|
+
this.showBox = input(true, { ...(ngDevMode ? { debugName: "showBox" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
410
|
+
this.showBackground = input(false, { ...(ngDevMode ? { debugName: "showBackground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
404
411
|
}
|
|
405
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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 }); }
|
|
407
414
|
}
|
|
408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSpinnerComponent, decorators: [{
|
|
409
416
|
type: Component,
|
|
410
417
|
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"] }]
|
|
411
418
|
}], 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 }] }] } });
|
|
@@ -467,8 +474,8 @@ class RtuiAsidePanelComponent {
|
|
|
467
474
|
});
|
|
468
475
|
return new ComponentPortal(asideRef.component, null, injector);
|
|
469
476
|
}
|
|
470
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
477
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", 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: [
|
|
472
479
|
trigger('aside', [
|
|
473
480
|
state('enter-left', style({ transform: 'none' })),
|
|
474
481
|
transition('* => enter-left', [
|
|
@@ -483,11 +490,11 @@ class RtuiAsidePanelComponent {
|
|
|
483
490
|
]),
|
|
484
491
|
transition('enter-right => *', animate('200ms ease-in', style({ transform: 'translateX(100%)' }))),
|
|
485
492
|
]),
|
|
486
|
-
], encapsulation: i0.ViewEncapsulation.None }); }
|
|
493
|
+
], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
487
494
|
}
|
|
488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsidePanelComponent, decorators: [{
|
|
489
496
|
type: Component,
|
|
490
|
-
args: [{ selector: 'rtui-aside-panel', encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, PortalModule], animations: [
|
|
497
|
+
args: [{ selector: 'rtui-aside-panel', encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, PortalModule], changeDetection: ChangeDetectionStrategy.Eager, animations: [
|
|
491
498
|
trigger('aside', [
|
|
492
499
|
state('enter-left', style({ transform: 'none' })),
|
|
493
500
|
transition('* => enter-left', [
|
|
@@ -598,38 +605,38 @@ class RtAsideService {
|
|
|
598
605
|
});
|
|
599
606
|
return new ComponentPortal(RtuiAsidePanelComponent, null, injector);
|
|
600
607
|
}
|
|
601
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
602
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
608
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
609
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideService }); }
|
|
603
610
|
}
|
|
604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideService, decorators: [{
|
|
605
612
|
type: Injectable
|
|
606
613
|
}] });
|
|
607
614
|
|
|
608
615
|
class RtuiToolbarLeftDirective {
|
|
609
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
610
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
616
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
617
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiToolbarLeftDirective, isStandalone: true, selector: "[rtuiToolbarLeft]", ngImport: i0 }); }
|
|
611
618
|
}
|
|
612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarLeftDirective, decorators: [{
|
|
613
620
|
type: Directive,
|
|
614
621
|
args: [{
|
|
615
622
|
selector: '[rtuiToolbarLeft]',
|
|
616
623
|
}]
|
|
617
624
|
}] });
|
|
618
625
|
class RtuiToolbarCenterDirective {
|
|
619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
620
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
626
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
627
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiToolbarCenterDirective, isStandalone: true, selector: "[rtuiToolbarCenter]", ngImport: i0 }); }
|
|
621
628
|
}
|
|
622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarCenterDirective, decorators: [{
|
|
623
630
|
type: Directive,
|
|
624
631
|
args: [{
|
|
625
632
|
selector: '[rtuiToolbarCenter]',
|
|
626
633
|
}]
|
|
627
634
|
}] });
|
|
628
635
|
class RtuiToolbarRightDirective {
|
|
629
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
630
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
636
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
637
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiToolbarRightDirective, isStandalone: true, selector: "[rtuiToolbarRight]", ngImport: i0 }); }
|
|
631
638
|
}
|
|
632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
639
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarRightDirective, decorators: [{
|
|
633
640
|
type: Directive,
|
|
634
641
|
args: [{
|
|
635
642
|
selector: '[rtuiToolbarRight]',
|
|
@@ -637,16 +644,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
637
644
|
}] });
|
|
638
645
|
class RtuiToolbarComponent {
|
|
639
646
|
constructor() {
|
|
640
|
-
this.isVisibleToolbar = input(true,
|
|
641
|
-
|
|
642
|
-
this.
|
|
643
|
-
this.
|
|
644
|
-
this.
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
static { this.ɵ
|
|
647
|
+
this.isVisibleToolbar = input(true, /* @ts-ignore */
|
|
648
|
+
...(ngDevMode ? [{ debugName: "isVisibleToolbar" }] : /* istanbul ignore next */ []));
|
|
649
|
+
this.leftToolTpl = contentChild(RtuiToolbarLeftDirective, { ...(ngDevMode ? { debugName: "leftToolTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
650
|
+
this.centerToolTpl = contentChild(RtuiToolbarCenterDirective, { ...(ngDevMode ? { debugName: "centerToolTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
651
|
+
this.rightToolTpl = contentChild(RtuiToolbarRightDirective, { ...(ngDevMode ? { debugName: "rightToolTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
652
|
+
this.sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
653
|
+
}
|
|
654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
655
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
648
656
|
}
|
|
649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarComponent, decorators: [{
|
|
650
658
|
type: Component,
|
|
651
659
|
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"] }]
|
|
652
660
|
}], propDecorators: { isVisibleToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisibleToolbar", required: false }] }], leftToolTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiToolbarLeftDirective), { ...{
|
|
@@ -660,8 +668,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
660
668
|
class AsideErrorBoxComponent {
|
|
661
669
|
constructor() {
|
|
662
670
|
this.#clipboard = inject(Clipboard);
|
|
663
|
-
this.error = input.required(
|
|
664
|
-
|
|
671
|
+
this.error = input.required(/* @ts-ignore */
|
|
672
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
673
|
+
this.isErrorCopied = signal(false, /* @ts-ignore */
|
|
674
|
+
...(ngDevMode ? [{ debugName: "isErrorCopied" }] : /* istanbul ignore next */ []));
|
|
665
675
|
}
|
|
666
676
|
#clipboard;
|
|
667
677
|
onCopyToClipboard() {
|
|
@@ -670,12 +680,12 @@ class AsideErrorBoxComponent {
|
|
|
670
680
|
this.isErrorCopied.set(true);
|
|
671
681
|
setTimeout(() => this.isErrorCopied.set(false), 1000);
|
|
672
682
|
}
|
|
673
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
683
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
684
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
675
685
|
// bem
|
|
676
686
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
677
687
|
}
|
|
678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AsideErrorBoxComponent, decorators: [{
|
|
679
689
|
type: Component,
|
|
680
690
|
args: [{ selector: 'rtui-aside-error-box', imports: [
|
|
681
691
|
MatIcon,
|
|
@@ -687,10 +697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
687
697
|
}], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }] } });
|
|
688
698
|
|
|
689
699
|
class RtuiAsideContainerHeaderDirective {
|
|
690
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
691
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
701
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiAsideContainerHeaderDirective, isStandalone: true, selector: "[rtuiAsideHeader]", ngImport: i0 }); }
|
|
692
702
|
}
|
|
693
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerHeaderDirective, decorators: [{
|
|
694
704
|
type: Directive,
|
|
695
705
|
args: [{
|
|
696
706
|
selector: '[rtuiAsideHeader]',
|
|
@@ -698,21 +708,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
698
708
|
}] });
|
|
699
709
|
class RtuiAsideContainerComponent {
|
|
700
710
|
constructor() {
|
|
701
|
-
this.title = input(null,
|
|
702
|
-
|
|
703
|
-
this.
|
|
704
|
-
this.
|
|
705
|
-
this.
|
|
706
|
-
this.
|
|
707
|
-
this.
|
|
708
|
-
this.
|
|
709
|
-
this.
|
|
710
|
-
|
|
711
|
-
this.
|
|
711
|
+
this.title = input(null, /* @ts-ignore */
|
|
712
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
713
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
714
|
+
this.isSubmitButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isSubmitButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
715
|
+
this.isFooterShown = input(true, { ...(ngDevMode ? { debugName: "isFooterShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
716
|
+
this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
717
|
+
this.isRequestErrorShown = input(false, { ...(ngDevMode ? { debugName: "isRequestErrorShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
718
|
+
this.headerActionsButtons = input([], { ...(ngDevMode ? { debugName: "headerActionsButtons" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
719
|
+
this.requestError = input(null, /* @ts-ignore */
|
|
720
|
+
...(ngDevMode ? [{ debugName: "requestError" }] : /* istanbul ignore next */ []));
|
|
721
|
+
this.submitButtonTitle = input('Save', /* @ts-ignore */
|
|
722
|
+
...(ngDevMode ? [{ debugName: "submitButtonTitle" }] : /* istanbul ignore next */ []));
|
|
723
|
+
this.cancelButtonTitle = input('Discard Changes', /* @ts-ignore */
|
|
724
|
+
...(ngDevMode ? [{ debugName: "cancelButtonTitle" }] : /* istanbul ignore next */ []));
|
|
725
|
+
this.submitButtonTooltip = input('', /* @ts-ignore */
|
|
726
|
+
...(ngDevMode ? [{ debugName: "submitButtonTooltip" }] : /* istanbul ignore next */ []));
|
|
712
727
|
this.submitAction = output();
|
|
713
728
|
this.cancelAction = output();
|
|
714
729
|
this.headerAction = output();
|
|
715
|
-
this.headerTpl = contentChild(RtuiAsideContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : {}), read: TemplateRef });
|
|
730
|
+
this.headerTpl = contentChild(RtuiAsideContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
716
731
|
}
|
|
717
732
|
onSubmit() {
|
|
718
733
|
this.submitAction.emit();
|
|
@@ -723,8 +738,8 @@ class RtuiAsideContainerComponent {
|
|
|
723
738
|
onHeaderActionClick(buttonName) {
|
|
724
739
|
this.headerAction.emit(buttonName);
|
|
725
740
|
}
|
|
726
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
727
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
741
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
742
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiAsideContainerComponent, isStandalone: true, selector: "rtui-aside-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, isSubmitButtonDisabled: { classPropertyName: "isSubmitButtonDisabled", publicName: "isSubmitButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isFooterShown: { classPropertyName: "isFooterShown", publicName: "isFooterShown", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, isRequestErrorShown: { classPropertyName: "isRequestErrorShown", publicName: "isRequestErrorShown", isSignal: true, isRequired: false, transformFunction: null }, headerActionsButtons: { classPropertyName: "headerActionsButtons", publicName: "headerActionsButtons", isSignal: true, isRequired: false, transformFunction: null }, requestError: { classPropertyName: "requestError", publicName: "requestError", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTitle: { classPropertyName: "submitButtonTitle", publicName: "submitButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonTitle: { classPropertyName: "cancelButtonTitle", publicName: "cancelButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTooltip: { classPropertyName: "submitButtonTooltip", publicName: "submitButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", cancelAction: "cancelAction", headerAction: "headerAction" }, host: { classAttribute: "c-aside" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiAsideContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (pending()) {\n <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <ng-container *rtuiScrollableHeader>\n <div rtBlock=\"c-aside-header\">\n <rtui-toolbar>\n <ng-container *rtuiToolbarLeft>\n <button\n rtBlock=\"back-button\"\n aria-label=\"Icon-button\"\n mat-icon-button\n matTooltip=\"Go back\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n [matTooltipDisabled]=\"isMobile()\"\n [disableRipple]=\"true\"\n (click)=\"onCancel()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n </ng-container>\n\n <ng-container *rtuiToolbarCenter>\n <div rtBlock=\"c-aside-title\">\n @if (headerTpl()) {\n <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n } @else {\n {{ title() }}\n }\n </div>\n </ng-container>\n\n <ng-container *rtuiToolbarRight>\n <div rtBlock=\"c-aside-actions\">\n @if (headerActionsButtons()?.length) {\n @for (button of headerActionsButtons(); track button) {\n <button\n rtElem=\"action\"\n aria-label=\"Icon-button\"\n mat-icon-button\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"left\"\n [matTooltip]=\"button.tooltip\"\n [matTooltipDisabled]=\"isMobile()\"\n [disableRipple]=\"true\"\n [disabled]=\"button?.disabled\"\n (click)=\"onHeaderActionClick(button.name)\">\n <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n </button>\n }\n }\n </div>\n </ng-container>\n </rtui-toolbar>\n\n @if (isRequestErrorShown()) {\n <rtui-aside-error-box [error]=\"requestError()\" />\n }\n </div>\n </ng-container>\n\n <ng-container *rtuiScrollableContent>\n <div rtBlock=\"c-aside-content\">\n <ng-content />\n </div>\n </ng-container>\n\n @if (isFooterShown()) {\n <ng-container *rtuiScrollableFooter>\n <div rtBlock=\"c-aside-footer\">\n <div rtBlock=\"c-aside-footer-btn\">\n <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n {{ cancelButtonTitle() }}\n </button>\n </div>\n\n <div rtBlock=\"c-aside-footer-btn\">\n <button\n mat-flat-button\n type=\"button\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"left\"\n [matTooltip]=\"submitButtonTooltip()\"\n [matTooltipDisabled]=\"!isSubmitButtonDisabled() || isMobile()\"\n [disabled]=\"isSubmitButtonDisabled()\"\n (click)=\"onSubmit()\">\n <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n </button>\n </div>\n </div>\n </ng-container>\n }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
728
743
|
// material
|
|
729
744
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type:
|
|
730
745
|
// standalone components
|
|
@@ -734,7 +749,7 @@ class RtuiAsideContainerComponent {
|
|
|
734
749
|
// bem
|
|
735
750
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
736
751
|
}
|
|
737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
752
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerComponent, decorators: [{
|
|
738
753
|
type: Component,
|
|
739
754
|
args: [{ selector: 'rtui-aside-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
740
755
|
RouterLink,
|
|
@@ -796,7 +811,8 @@ const RT_UI_CONFIG = new InjectionToken('RT_UI_CONFIG', {
|
|
|
796
811
|
});
|
|
797
812
|
|
|
798
813
|
const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
|
|
799
|
-
const fontLoaded = signal(false,
|
|
814
|
+
const fontLoaded = signal(false, /* @ts-ignore */
|
|
815
|
+
...(ngDevMode ? [{ debugName: "fontLoaded" }] : /* istanbul ignore next */ []));
|
|
800
816
|
class RtuiIconComponent {
|
|
801
817
|
#document;
|
|
802
818
|
constructor() {
|
|
@@ -811,12 +827,15 @@ class RtuiIconComponent {
|
|
|
811
827
|
classes.push('rtui-icon--loading');
|
|
812
828
|
}
|
|
813
829
|
return classes.join(' ');
|
|
814
|
-
},
|
|
815
|
-
|
|
816
|
-
this.
|
|
817
|
-
|
|
818
|
-
this.
|
|
819
|
-
|
|
830
|
+
}, /* @ts-ignore */
|
|
831
|
+
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
832
|
+
this.size = input('md', /* @ts-ignore */
|
|
833
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
834
|
+
this.theme = input('inherit', /* @ts-ignore */
|
|
835
|
+
...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
836
|
+
this.glyph = input('', { ...(ngDevMode ? { debugName: "glyph" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
837
|
+
this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
838
|
+
this.rotate = input(false, { ...(ngDevMode ? { debugName: "rotate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
820
839
|
if (!fontLoaded()) {
|
|
821
840
|
this.#checkFontLoaded();
|
|
822
841
|
}
|
|
@@ -831,14 +850,14 @@ class RtuiIconComponent {
|
|
|
831
850
|
fontLoaded.set(true);
|
|
832
851
|
});
|
|
833
852
|
}
|
|
834
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
835
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
853
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
854
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
836
855
|
// material
|
|
837
856
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
838
857
|
// directives
|
|
839
858
|
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
840
859
|
}
|
|
841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiIconComponent, decorators: [{
|
|
842
861
|
type: Component,
|
|
843
862
|
args: [{ selector: 'rtui-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
844
863
|
// material
|
|
@@ -862,10 +881,14 @@ class RtuiButtonComponent {
|
|
|
862
881
|
this.#config = inject(RT_UI_CONFIG);
|
|
863
882
|
this.#buttonConfig = this.#config.components?.button;
|
|
864
883
|
/** Design system the button renders with — see {@link RtUiDesign}. */
|
|
865
|
-
this.resolvedDesign = computed(() => this.design() ?? this.#buttonConfig?.design ?? this.#config.global?.design ?? 'custom',
|
|
866
|
-
|
|
867
|
-
this.
|
|
868
|
-
|
|
884
|
+
this.resolvedDesign = computed(() => this.design() ?? this.#buttonConfig?.design ?? this.#config.global?.design ?? 'custom', /* @ts-ignore */
|
|
885
|
+
...(ngDevMode ? [{ debugName: "resolvedDesign" }] : /* istanbul ignore next */ []));
|
|
886
|
+
this.resolvedSize = computed(() => this.size() ?? this.#buttonConfig?.size ?? 'md', /* @ts-ignore */
|
|
887
|
+
...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
|
|
888
|
+
this.resolvedRadius = computed(() => this.radius() ?? this.#buttonConfig?.radius ?? 'full', /* @ts-ignore */
|
|
889
|
+
...(ngDevMode ? [{ debugName: "resolvedRadius" }] : /* istanbul ignore next */ []));
|
|
890
|
+
this.resolvedAppearance = computed(() => this.appearance() ?? this.#buttonConfig?.appearance, /* @ts-ignore */
|
|
891
|
+
...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
|
|
869
892
|
/** Native Material button appearance the pill renders with under `design: 'material'`. */
|
|
870
893
|
this.materialAppearance = computed(() => {
|
|
871
894
|
const appearanceMap = {
|
|
@@ -875,7 +898,8 @@ class RtuiButtonComponent {
|
|
|
875
898
|
text: 'text',
|
|
876
899
|
};
|
|
877
900
|
return appearanceMap[this.resolvedAppearance() ?? 'solid'];
|
|
878
|
-
},
|
|
901
|
+
}, /* @ts-ignore */
|
|
902
|
+
...(ngDevMode ? [{ debugName: "materialAppearance" }] : /* istanbul ignore next */ []));
|
|
879
903
|
this.resolvedIconSize = computed(() => {
|
|
880
904
|
const iconSize = this.iconSize();
|
|
881
905
|
if (iconSize) {
|
|
@@ -888,7 +912,8 @@ class RtuiButtonComponent {
|
|
|
888
912
|
lg: 'md',
|
|
889
913
|
};
|
|
890
914
|
return sizeMap[this.resolvedSize()];
|
|
891
|
-
},
|
|
915
|
+
}, /* @ts-ignore */
|
|
916
|
+
...(ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []));
|
|
892
917
|
this.spinnerSize = computed(() => {
|
|
893
918
|
const sizeMap = {
|
|
894
919
|
xs: 12,
|
|
@@ -897,7 +922,8 @@ class RtuiButtonComponent {
|
|
|
897
922
|
lg: 24,
|
|
898
923
|
};
|
|
899
924
|
return this.spinnerDiameter() ?? sizeMap[this.resolvedSize()];
|
|
900
|
-
},
|
|
925
|
+
}, /* @ts-ignore */
|
|
926
|
+
...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
|
|
901
927
|
this.modifiers = computed(() => ({
|
|
902
928
|
[`type-${this.type()}`]: true,
|
|
903
929
|
[`design-${this.resolvedDesign()}`]: true,
|
|
@@ -907,22 +933,32 @@ class RtuiButtonComponent {
|
|
|
907
933
|
[`appearance-${this.resolvedAppearance()}`]: !!this.resolvedAppearance(),
|
|
908
934
|
loading: this.loading(),
|
|
909
935
|
disabled: this.disabled(),
|
|
910
|
-
}),
|
|
911
|
-
|
|
912
|
-
this.
|
|
913
|
-
|
|
914
|
-
this.
|
|
915
|
-
|
|
916
|
-
this.
|
|
917
|
-
|
|
918
|
-
this.
|
|
919
|
-
|
|
920
|
-
this.
|
|
921
|
-
|
|
922
|
-
this.
|
|
923
|
-
|
|
924
|
-
this.
|
|
925
|
-
this.
|
|
936
|
+
}), /* @ts-ignore */
|
|
937
|
+
...(ngDevMode ? [{ debugName: "modifiers" }] : /* istanbul ignore next */ []));
|
|
938
|
+
this.type = input('icon', /* @ts-ignore */
|
|
939
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
940
|
+
this.design = input(/* @ts-ignore */
|
|
941
|
+
...(ngDevMode ? [undefined, { debugName: "design" }] : /* istanbul ignore next */ []));
|
|
942
|
+
this.variant = input('default', /* @ts-ignore */
|
|
943
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
944
|
+
this.appearance = input(/* @ts-ignore */
|
|
945
|
+
...(ngDevMode ? [undefined, { debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
946
|
+
this.size = input(/* @ts-ignore */
|
|
947
|
+
...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
|
|
948
|
+
this.radius = input(/* @ts-ignore */
|
|
949
|
+
...(ngDevMode ? [undefined, { debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
950
|
+
this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
951
|
+
this.iconPosition = input('start', /* @ts-ignore */
|
|
952
|
+
...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
|
|
953
|
+
this.iconSize = input(/* @ts-ignore */
|
|
954
|
+
...(ngDevMode ? [undefined, { debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
955
|
+
this.text = input('', { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
956
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
957
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
958
|
+
this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
959
|
+
this.fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
960
|
+
this.spinnerDiameter = input(/* @ts-ignore */
|
|
961
|
+
...(ngDevMode ? [undefined, { debugName: "spinnerDiameter" }] : /* istanbul ignore next */ []));
|
|
926
962
|
this.clicked = output();
|
|
927
963
|
}
|
|
928
964
|
/** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
|
|
@@ -933,8 +969,8 @@ class RtuiButtonComponent {
|
|
|
933
969
|
this.clicked.emit();
|
|
934
970
|
}
|
|
935
971
|
}
|
|
936
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
937
|
-
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 }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n <ng-content />\n</ng-template>\n\n@switch (type()) {\n @case ('pill') {\n @if (resolvedDesign() === 'material') {\n <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n <button\n type=\"button\"\n class=\"rtui-button-material\"\n [matButton]=\"materialAppearance()\"\n [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n } @else {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n }\n @default {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button 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{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.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)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"], dependencies: [{ kind: "directive", type:
|
|
972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
973
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n <ng-content />\n</ng-template>\n\n@switch (type()) {\n @case ('pill') {\n @if (resolvedDesign() === 'material') {\n <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n <button\n type=\"button\"\n class=\"rtui-button-material\"\n [matButton]=\"materialAppearance()\"\n [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n } @else {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n }\n @default {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button 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{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.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)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"], dependencies: [{ kind: "directive", type:
|
|
938
974
|
// angular
|
|
939
975
|
NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type:
|
|
940
976
|
// rt-tools
|
|
@@ -944,7 +980,7 @@ class RtuiButtonComponent {
|
|
|
944
980
|
// material
|
|
945
981
|
MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
946
982
|
}
|
|
947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiButtonComponent, decorators: [{
|
|
948
984
|
type: Component,
|
|
949
985
|
args: [{ selector: 'rtui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
950
986
|
// angular
|
|
@@ -976,8 +1012,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
976
1012
|
|
|
977
1013
|
class RtuiMultiButtonComponent {
|
|
978
1014
|
constructor() {
|
|
979
|
-
this.actions = input([], { ...(ngDevMode ? { debugName: "actions" } : {}), transform: (value) => transformArrayInput(value) });
|
|
980
|
-
this.activeAction = model('',
|
|
1015
|
+
this.actions = input([], { ...(ngDevMode ? { debugName: "actions" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
1016
|
+
this.activeAction = model('', /* @ts-ignore */
|
|
1017
|
+
...(ngDevMode ? [{ debugName: "activeAction" }] : /* istanbul ignore next */ []));
|
|
981
1018
|
this.changeActiveAction = output();
|
|
982
1019
|
}
|
|
983
1020
|
onSetActiveAction(action) {
|
|
@@ -986,14 +1023,14 @@ class RtuiMultiButtonComponent {
|
|
|
986
1023
|
this.changeActiveAction.emit(this.activeAction());
|
|
987
1024
|
}
|
|
988
1025
|
}
|
|
989
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
990
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1026
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
991
1028
|
// rt-tools
|
|
992
1029
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type:
|
|
993
1030
|
// pipes
|
|
994
1031
|
TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
995
1032
|
}
|
|
996
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiButtonComponent, decorators: [{
|
|
997
1034
|
type: Component,
|
|
998
1035
|
args: [{ selector: 'rtui-multi-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
999
1036
|
// pipes
|
|
@@ -1006,30 +1043,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1006
1043
|
}], 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"] }] } });
|
|
1007
1044
|
|
|
1008
1045
|
class RtuiHeaderLeftDirective {
|
|
1009
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1010
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1046
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1047
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiHeaderLeftDirective, isStandalone: true, selector: "[rtuiHeaderLeft]", ngImport: i0 }); }
|
|
1011
1048
|
}
|
|
1012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderLeftDirective, decorators: [{
|
|
1013
1050
|
type: Directive,
|
|
1014
1051
|
args: [{
|
|
1015
1052
|
selector: '[rtuiHeaderLeft]',
|
|
1016
1053
|
}]
|
|
1017
1054
|
}] });
|
|
1018
1055
|
class RtuiHeaderCenterDirective {
|
|
1019
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1020
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1057
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiHeaderCenterDirective, isStandalone: true, selector: "[rtuiHeaderCenter]", ngImport: i0 }); }
|
|
1021
1058
|
}
|
|
1022
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderCenterDirective, decorators: [{
|
|
1023
1060
|
type: Directive,
|
|
1024
1061
|
args: [{
|
|
1025
1062
|
selector: '[rtuiHeaderCenter]',
|
|
1026
1063
|
}]
|
|
1027
1064
|
}] });
|
|
1028
1065
|
class RtuiHeaderRightDirective {
|
|
1029
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1030
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1066
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1067
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiHeaderRightDirective, isStandalone: true, selector: "[rtuiHeaderRight]", ngImport: i0 }); }
|
|
1031
1068
|
}
|
|
1032
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1069
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderRightDirective, decorators: [{
|
|
1033
1070
|
type: Directive,
|
|
1034
1071
|
args: [{
|
|
1035
1072
|
selector: '[rtuiHeaderRight]',
|
|
@@ -1037,11 +1074,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1037
1074
|
}] });
|
|
1038
1075
|
class RtuiHeaderComponent {
|
|
1039
1076
|
constructor() {
|
|
1040
|
-
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
1041
|
-
this.isMobileMenuButtonShown = input(true, { ...(ngDevMode ? { debugName: "isMobileMenuButtonShown" } : {}), transform: booleanAttribute });
|
|
1042
|
-
this.leftHeaderTpl = contentChild(RtuiHeaderLeftDirective, { ...(ngDevMode ? { debugName: "leftHeaderTpl" } : {}), read: TemplateRef });
|
|
1043
|
-
this.centerHeaderTpl = contentChild(RtuiHeaderCenterDirective, { ...(ngDevMode ? { debugName: "centerHeaderTpl" } : {}), read: TemplateRef });
|
|
1044
|
-
this.rightHeaderTpl = contentChild(RtuiHeaderRightDirective, { ...(ngDevMode ? { debugName: "rightHeaderTpl" } : {}), read: TemplateRef });
|
|
1077
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1078
|
+
this.isMobileMenuButtonShown = input(true, { ...(ngDevMode ? { debugName: "isMobileMenuButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1079
|
+
this.leftHeaderTpl = contentChild(RtuiHeaderLeftDirective, { ...(ngDevMode ? { debugName: "leftHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
1080
|
+
this.centerHeaderTpl = contentChild(RtuiHeaderCenterDirective, { ...(ngDevMode ? { debugName: "centerHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
1081
|
+
this.rightHeaderTpl = contentChild(RtuiHeaderRightDirective, { ...(ngDevMode ? { debugName: "rightHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
1045
1082
|
this.openMobileMenuAction = output();
|
|
1046
1083
|
}
|
|
1047
1084
|
openSideMenu() {
|
|
@@ -1049,14 +1086,14 @@ class RtuiHeaderComponent {
|
|
|
1049
1086
|
this.openMobileMenuAction.emit();
|
|
1050
1087
|
}
|
|
1051
1088
|
}
|
|
1052
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1053
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1089
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1090
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiHeaderComponent, isStandalone: true, selector: "rtui-header", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuButtonShown: { classPropertyName: "isMobileMenuButtonShown", publicName: "isMobileMenuButtonShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openMobileMenuAction: "openMobileMenuAction" }, queries: [{ propertyName: "leftHeaderTpl", first: true, predicate: RtuiHeaderLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerHeaderTpl", first: true, predicate: RtuiHeaderCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightHeaderTpl", first: true, predicate: RtuiHeaderRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<rtui-toolbar>\n <ng-container *rtuiToolbarLeft>\n @if (isMobile() && isMobileMenuButtonShown()) {\n <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n\n @if (leftHeaderTpl()) {\n <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n }\n </ng-container>\n\n @if (centerHeaderTpl()) {\n <ng-container *rtuiToolbarCenter>\n <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n </ng-container>\n }\n\n @if (rightHeaderTpl()) {\n <ng-container *rtuiToolbarRight>\n <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n </ng-container>\n }\n</rtui-toolbar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
1054
1091
|
// BEM
|
|
1055
1092
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type:
|
|
1056
1093
|
// Ui-kit
|
|
1057
1094
|
RtuiToolbarComponent, selector: "rtui-toolbar", inputs: ["isVisibleToolbar", "sticky"] }, { kind: "directive", type: RtuiToolbarLeftDirective, selector: "[rtuiToolbarLeft]" }, { kind: "directive", type: RtuiToolbarCenterDirective, selector: "[rtuiToolbarCenter]" }, { kind: "directive", type: RtuiToolbarRightDirective, selector: "[rtuiToolbarRight]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1058
1095
|
}
|
|
1059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderComponent, decorators: [{
|
|
1060
1097
|
type: Component,
|
|
1061
1098
|
args: [{ selector: 'rtui-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1062
1099
|
NgTemplateOutlet,
|
|
@@ -1084,10 +1121,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1084
1121
|
class RtuiClearButtonComponent {
|
|
1085
1122
|
constructor() {
|
|
1086
1123
|
this.#defaultTooltipPosition = 'above';
|
|
1087
|
-
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
1088
|
-
this.isButtonShown = input(true, { ...(ngDevMode ? { debugName: "isButtonShown" } : {}), transform: booleanAttribute });
|
|
1089
|
-
this.tooltip = input(null, { ...(ngDevMode ? { debugName: "tooltip" } : {}), transform: (value) => (isString(value) ? value.trim() : '') });
|
|
1090
|
-
this.tooltipPosition = input(this.#defaultTooltipPosition,
|
|
1124
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1125
|
+
this.isButtonShown = input(true, { ...(ngDevMode ? { debugName: "isButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1126
|
+
this.tooltip = input(null, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value.trim() : '') });
|
|
1127
|
+
this.tooltipPosition = input(this.#defaultTooltipPosition, /* @ts-ignore */
|
|
1128
|
+
...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
1091
1129
|
this.keydownAction = output();
|
|
1092
1130
|
this.clickAction = output();
|
|
1093
1131
|
}
|
|
@@ -1098,14 +1136,14 @@ class RtuiClearButtonComponent {
|
|
|
1098
1136
|
onClick() {
|
|
1099
1137
|
this.clickAction.emit();
|
|
1100
1138
|
}
|
|
1101
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1102
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1139
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1140
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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:
|
|
1103
1141
|
// Material
|
|
1104
1142
|
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:
|
|
1105
1143
|
// BEM
|
|
1106
1144
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1107
1145
|
}
|
|
1108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiClearButtonComponent, decorators: [{
|
|
1109
1147
|
type: Component,
|
|
1110
1148
|
args: [{ selector: 'rtui-clear-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1111
1149
|
// Material
|
|
@@ -1135,28 +1173,36 @@ class RtuiPaginationComponent {
|
|
|
1135
1173
|
this.#fb = inject(FormBuilder);
|
|
1136
1174
|
this.#windowRef = inject(WINDOW);
|
|
1137
1175
|
/** Current Page Model */
|
|
1138
|
-
this.currentPageModel = input.required(
|
|
1176
|
+
this.currentPageModel = input.required(/* @ts-ignore */
|
|
1177
|
+
...(ngDevMode ? [{ debugName: "currentPageModel" }] : /* istanbul ignore next */ []));
|
|
1139
1178
|
/** Indicates is mobile view */
|
|
1140
|
-
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
1179
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1141
1180
|
/** Output action when Page Model changed */
|
|
1142
1181
|
this.pageModelChange = output();
|
|
1143
1182
|
/** Form control for selected page size */
|
|
1144
1183
|
this.control = this.#fb.nonNullable.control(DEFAULT_PAGE_SIZE);
|
|
1145
|
-
this.divider = signal('...',
|
|
1184
|
+
this.divider = signal('...', /* @ts-ignore */
|
|
1185
|
+
...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
|
|
1146
1186
|
/** Page size options */
|
|
1147
1187
|
this.pageSizes = computed(() => {
|
|
1148
1188
|
return [10, 20, 40, 50].filter((el) => el / 2 <= this.currentPageModel()?.totalCount || el === this.currentPageModel()?.pageSize);
|
|
1149
|
-
},
|
|
1189
|
+
}, /* @ts-ignore */
|
|
1190
|
+
...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
|
|
1150
1191
|
/** Array of current page numbers */
|
|
1151
|
-
this.numbers = signal([],
|
|
1192
|
+
this.numbers = signal([], /* @ts-ignore */
|
|
1193
|
+
...(ngDevMode ? [{ debugName: "numbers" }] : /* istanbul ignore next */ []));
|
|
1152
1194
|
/** Page Model for compare */
|
|
1153
|
-
this.previousPageModel = signal(null,
|
|
1195
|
+
this.previousPageModel = signal(null, /* @ts-ignore */
|
|
1196
|
+
...(ngDevMode ? [{ debugName: "previousPageModel" }] : /* istanbul ignore next */ []));
|
|
1154
1197
|
/** Value of full content width */
|
|
1155
|
-
this.minContentFitWidth = signal(0,
|
|
1198
|
+
this.minContentFitWidth = signal(0, /* @ts-ignore */
|
|
1199
|
+
...(ngDevMode ? [{ debugName: "minContentFitWidth" }] : /* istanbul ignore next */ []));
|
|
1156
1200
|
/** Indicates is content clipped */
|
|
1157
|
-
this.isContentClipped = signal(false,
|
|
1201
|
+
this.isContentClipped = signal(false, /* @ts-ignore */
|
|
1202
|
+
...(ngDevMode ? [{ debugName: "isContentClipped" }] : /* istanbul ignore next */ []));
|
|
1158
1203
|
/** Container template ref */
|
|
1159
|
-
this.containerRef = viewChild('containerRef',
|
|
1204
|
+
this.containerRef = viewChild('containerRef', /* @ts-ignore */
|
|
1205
|
+
...(ngDevMode ? [{ debugName: "containerRef" }] : /* istanbul ignore next */ []));
|
|
1160
1206
|
}
|
|
1161
1207
|
#injector;
|
|
1162
1208
|
#destroyRef;
|
|
@@ -1255,10 +1301,10 @@ class RtuiPaginationComponent {
|
|
|
1255
1301
|
this.minContentFitWidth.set(currentContainerWidth);
|
|
1256
1302
|
}
|
|
1257
1303
|
}
|
|
1258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1259
|
-
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 }); }
|
|
1304
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null }, 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]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1260
1306
|
}
|
|
1261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPaginationComponent, decorators: [{
|
|
1262
1308
|
type: Component,
|
|
1263
1309
|
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"] }]
|
|
1264
1310
|
}], 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: [{
|
|
@@ -1304,7 +1350,8 @@ class RtTableConfigService {
|
|
|
1304
1350
|
isVerticalScrollbarShown: false,
|
|
1305
1351
|
isHorizontalScrollbarShown: false,
|
|
1306
1352
|
columns: [],
|
|
1307
|
-
},
|
|
1353
|
+
}, /* @ts-ignore */
|
|
1354
|
+
...(ngDevMode ? [{ debugName: "#tableConfig" }] : /* istanbul ignore next */ []));
|
|
1308
1355
|
this.tableConfig = this.#tableConfig.asReadonly();
|
|
1309
1356
|
}
|
|
1310
1357
|
#destroyRef;
|
|
@@ -1371,27 +1418,29 @@ class RtTableConfigService {
|
|
|
1371
1418
|
defaultConfig.length === savedConfig.length &&
|
|
1372
1419
|
areArraysEqual(defaultConfig.map((el) => el.propName).sort(), savedConfig.map((el) => el.propName).sort()));
|
|
1373
1420
|
}
|
|
1374
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1375
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1421
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1422
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigService }); }
|
|
1376
1423
|
}
|
|
1377
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigService, decorators: [{
|
|
1378
1425
|
type: Injectable
|
|
1379
1426
|
}] });
|
|
1380
1427
|
|
|
1381
1428
|
class RtCommonSelectorsDirective {
|
|
1382
1429
|
constructor() {
|
|
1383
1430
|
/** Indicates is multiselect available */
|
|
1384
|
-
this.isMultiSelect = input(true, { ...(ngDevMode ? { debugName: "isMultiSelect" } : {}), transform: booleanAttribute });
|
|
1431
|
+
this.isMultiSelect = input(true, { ...(ngDevMode ? { debugName: "isMultiSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1385
1432
|
/** Indicates is 'Select all' checkbox shown */
|
|
1386
|
-
this.isSelectorColumnShown = input(false, { ...(ngDevMode ? { debugName: "isSelectorColumnShown" } : {}), transform: booleanAttribute });
|
|
1433
|
+
this.isSelectorColumnShown = input(false, { ...(ngDevMode ? { debugName: "isSelectorColumnShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1387
1434
|
/** Indicates is selectors column disabled */
|
|
1388
|
-
this.isSelectorsColumnDisabled = input(false, { ...(ngDevMode ? { debugName: "isSelectorsColumnDisabled" } : {}), transform: booleanAttribute });
|
|
1435
|
+
this.isSelectorsColumnDisabled = input(false, { ...(ngDevMode ? { debugName: "isSelectorsColumnDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1389
1436
|
/** Selected entities Ids on init */
|
|
1390
|
-
this.selectedEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "selectedEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
|
|
1437
|
+
this.selectedEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "selectedEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
1391
1438
|
/** Key of ENTITY_TYPE for compare entities */
|
|
1392
|
-
this.keyExp = signal('id',
|
|
1439
|
+
this.keyExp = signal('id', /* @ts-ignore */
|
|
1440
|
+
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
1393
1441
|
/** Current list of entities */
|
|
1394
|
-
this.entities = signal([],
|
|
1442
|
+
this.entities = signal([], /* @ts-ignore */
|
|
1443
|
+
...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
|
|
1395
1444
|
}
|
|
1396
1445
|
/** Add page entities to list exclude duplicates */
|
|
1397
1446
|
addPageEntitiesToListExcludeDuplicates(list) {
|
|
@@ -1412,10 +1461,10 @@ class RtCommonSelectorsDirective {
|
|
|
1412
1461
|
isAllExistOnPage(selectedEntitiesIds) {
|
|
1413
1462
|
return !this.entities().find((el) => !selectedEntitiesIds.includes(el[this.keyExp()]));
|
|
1414
1463
|
}
|
|
1415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1416
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCommonSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1465
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtCommonSelectorsDirective, isStandalone: true, inputs: { isMultiSelect: { classPropertyName: "isMultiSelect", publicName: "isMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, isSelectorColumnShown: { classPropertyName: "isSelectorColumnShown", publicName: "isSelectorColumnShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectorsColumnDisabled: { classPropertyName: "isSelectorsColumnDisabled", publicName: "isSelectorsColumnDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectedEntitiesKeys: { classPropertyName: "selectedEntitiesKeys", publicName: "selectedEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1417
1466
|
}
|
|
1418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCommonSelectorsDirective, decorators: [{
|
|
1419
1468
|
type: Directive
|
|
1420
1469
|
}], propDecorators: { isMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiSelect", required: false }] }], isSelectorColumnShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorColumnShown", required: false }] }], isSelectorsColumnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorsColumnDisabled", required: false }] }], selectedEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntitiesKeys", required: false }] }] } });
|
|
1421
1470
|
|
|
@@ -1426,21 +1475,27 @@ class RtDynamicListSelectorsDirective extends RtCommonSelectorsDirective {
|
|
|
1426
1475
|
this.#injector = inject(Injector);
|
|
1427
1476
|
this.#dynamicListRef = inject(RtuiDynamicListComponent);
|
|
1428
1477
|
/** Indicates is multiselect extended mod available (use selected and excluded lists) */
|
|
1429
|
-
this.isMultiSelectExtendedMod = input(true, { ...(ngDevMode ? { debugName: "isMultiSelectExtendedMod" } : {}), transform: booleanAttribute });
|
|
1478
|
+
this.isMultiSelectExtendedMod = input(true, { ...(ngDevMode ? { debugName: "isMultiSelectExtendedMod" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1430
1479
|
/** Indicates is 'Select all' checkbox shown */
|
|
1431
|
-
this.isSelectAllSelectorShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllSelectorShown" } : {}), transform: booleanAttribute });
|
|
1480
|
+
this.isSelectAllSelectorShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllSelectorShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1432
1481
|
/** List of selected entities for processing */
|
|
1433
|
-
this.#selectedEntities = signal([],
|
|
1482
|
+
this.#selectedEntities = signal([], /* @ts-ignore */
|
|
1483
|
+
...(ngDevMode ? [{ debugName: "#selectedEntities" }] : /* istanbul ignore next */ []));
|
|
1434
1484
|
/** List of excluded entities for processing */
|
|
1435
|
-
this.#excludedEntities = signal([],
|
|
1485
|
+
this.#excludedEntities = signal([], /* @ts-ignore */
|
|
1486
|
+
...(ngDevMode ? [{ debugName: "#excludedEntities" }] : /* istanbul ignore next */ []));
|
|
1436
1487
|
/** Indicates is 'Select all' checkbox selected for processing */
|
|
1437
|
-
this.#isAllEntitiesSelected = signal(false,
|
|
1488
|
+
this.#isAllEntitiesSelected = signal(false, /* @ts-ignore */
|
|
1489
|
+
...(ngDevMode ? [{ debugName: "#isAllEntitiesSelected" }] : /* istanbul ignore next */ []));
|
|
1438
1490
|
/** Indicates is all page entities checkbox selected for processing */
|
|
1439
|
-
this.#isPageEntitiesSelected = signal(false,
|
|
1491
|
+
this.#isPageEntitiesSelected = signal(false, /* @ts-ignore */
|
|
1492
|
+
...(ngDevMode ? [{ debugName: "#isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
|
|
1440
1493
|
/** Indicates is page entities checkbox indeterminate for processing */
|
|
1441
|
-
this.#isPageEntitiesIndeterminate = signal(false,
|
|
1494
|
+
this.#isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
|
|
1495
|
+
...(ngDevMode ? [{ debugName: "#isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
|
|
1442
1496
|
/** Indicates is multi select extended mod enabled for processing */
|
|
1443
|
-
this.#isMultiSelectExtendedModEnabled = signal(false,
|
|
1497
|
+
this.#isMultiSelectExtendedModEnabled = signal(false, /* @ts-ignore */
|
|
1498
|
+
...(ngDevMode ? [{ debugName: "#isMultiSelectExtendedModEnabled" }] : /* istanbul ignore next */ []));
|
|
1444
1499
|
/** List of selected entities */
|
|
1445
1500
|
this.selectedEntities = this.#selectedEntities.asReadonly();
|
|
1446
1501
|
/** List of excluded entities */
|
|
@@ -1448,11 +1503,13 @@ class RtDynamicListSelectorsDirective extends RtCommonSelectorsDirective {
|
|
|
1448
1503
|
/** List of selected entities ids */
|
|
1449
1504
|
this.selectedEntitiesIds = computed(() => {
|
|
1450
1505
|
return this.selectedEntities().map((el) => el[this.keyExp()]);
|
|
1451
|
-
},
|
|
1506
|
+
}, /* @ts-ignore */
|
|
1507
|
+
...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
|
|
1452
1508
|
/** List of excluded entities ids */
|
|
1453
1509
|
this.excludedEntitiesIds = computed(() => {
|
|
1454
1510
|
return this.excludedEntities().map((el) => el[this.keyExp()]);
|
|
1455
|
-
},
|
|
1511
|
+
}, /* @ts-ignore */
|
|
1512
|
+
...(ngDevMode ? [{ debugName: "excludedEntitiesIds" }] : /* istanbul ignore next */ []));
|
|
1456
1513
|
/** Indicates is 'Select All' checkbox selected */
|
|
1457
1514
|
this.isAllEntitiesSelected = this.#isAllEntitiesSelected.asReadonly();
|
|
1458
1515
|
/** Indicates is all page entities checkbox selected */
|
|
@@ -1675,10 +1732,10 @@ class RtDynamicListSelectorsDirective extends RtCommonSelectorsDirective {
|
|
|
1675
1732
|
this.#isPageEntitiesSelected.set(this.isAllExistOnPage(this.selectedEntitiesIds()));
|
|
1676
1733
|
this.#isPageEntitiesIndeterminate.set(this.isOneExistOnPage(this.selectedEntitiesIds()));
|
|
1677
1734
|
}
|
|
1678
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1679
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1735
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtDynamicListSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1736
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtDynamicListSelectorsDirective, isStandalone: true, selector: "rtui-dynamic-list[rtDynamicListSelectorsDirective]", inputs: { isMultiSelectExtendedMod: { classPropertyName: "isMultiSelectExtendedMod", publicName: "isMultiSelectExtendedMod", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllSelectorShown: { classPropertyName: "isSelectAllSelectorShown", publicName: "isSelectAllSelectorShown", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1680
1737
|
}
|
|
1681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtDynamicListSelectorsDirective, decorators: [{
|
|
1682
1739
|
type: Directive,
|
|
1683
1740
|
args: [{
|
|
1684
1741
|
selector: 'rtui-dynamic-list[rtDynamicListSelectorsDirective]',
|
|
@@ -1692,18 +1749,22 @@ class RtTableSelectorsDirective extends RtCommonSelectorsDirective {
|
|
|
1692
1749
|
this.#injector = inject(Injector);
|
|
1693
1750
|
this.#tableRef = inject(RtuiTableComponent);
|
|
1694
1751
|
/** List of selected entities for processing */
|
|
1695
|
-
this.#selectedEntities = signal([],
|
|
1752
|
+
this.#selectedEntities = signal([], /* @ts-ignore */
|
|
1753
|
+
...(ngDevMode ? [{ debugName: "#selectedEntities" }] : /* istanbul ignore next */ []));
|
|
1696
1754
|
/** List of excluded entities for processing */
|
|
1697
1755
|
/** Indicates is all page entities checkbox selected for processing */
|
|
1698
|
-
this.#isPageEntitiesSelected = signal(false,
|
|
1756
|
+
this.#isPageEntitiesSelected = signal(false, /* @ts-ignore */
|
|
1757
|
+
...(ngDevMode ? [{ debugName: "#isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
|
|
1699
1758
|
/** Indicates is page entities checkbox indeterminate for processing */
|
|
1700
|
-
this.#isPageEntitiesIndeterminate = signal(false,
|
|
1759
|
+
this.#isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
|
|
1760
|
+
...(ngDevMode ? [{ debugName: "#isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
|
|
1701
1761
|
/** List of selected entities */
|
|
1702
1762
|
this.selectedEntities = this.#selectedEntities.asReadonly();
|
|
1703
1763
|
/** List of selected entities ids */
|
|
1704
1764
|
this.selectedEntitiesIds = computed(() => {
|
|
1705
1765
|
return this.selectedEntities().map((el) => el[this.keyExp()]);
|
|
1706
|
-
},
|
|
1766
|
+
}, /* @ts-ignore */
|
|
1767
|
+
...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
|
|
1707
1768
|
/** Indicates is all page entities checkbox selected */
|
|
1708
1769
|
this.isPageEntitiesSelected = this.#isPageEntitiesSelected.asReadonly();
|
|
1709
1770
|
/** Indicates is page entities checkbox indeterminate */
|
|
@@ -1822,10 +1883,10 @@ class RtTableSelectorsDirective extends RtCommonSelectorsDirective {
|
|
|
1822
1883
|
this.#isPageEntitiesSelected.set(this.isAllExistOnPage(this.selectedEntitiesIds()));
|
|
1823
1884
|
this.#isPageEntitiesIndeterminate.set(this.isOneExistOnPage(this.selectedEntitiesIds()));
|
|
1824
1885
|
}
|
|
1825
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1826
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1886
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1887
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtTableSelectorsDirective, isStandalone: true, selector: "rtui-table[rtTableSelectorsDirective]", usesInheritance: true, ngImport: i0 }); }
|
|
1827
1888
|
}
|
|
1828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableSelectorsDirective, decorators: [{
|
|
1829
1890
|
type: Directive,
|
|
1830
1891
|
args: [{
|
|
1831
1892
|
selector: 'rtui-table[rtTableSelectorsDirective]',
|
|
@@ -1841,17 +1902,24 @@ class TableBaseCellComponent {
|
|
|
1841
1902
|
this.cellValue = computed(() => {
|
|
1842
1903
|
const transformFn = this.column()?.transform;
|
|
1843
1904
|
return transformFn ? transformFn(this.row()[this.column().propName]) : this.row()[this.column().propName];
|
|
1844
|
-
},
|
|
1905
|
+
}, /* @ts-ignore */
|
|
1906
|
+
...(ngDevMode ? [{ debugName: "cellValue" }] : /* istanbul ignore next */ []));
|
|
1845
1907
|
this.cellIconStyle = computed(() => {
|
|
1846
1908
|
const transformFn = this.column()?.iconTransform;
|
|
1847
1909
|
return transformFn ? this.#sanitizer.bypassSecurityTrustStyle(transformFn(this.row()[this.column().propName])) : undefined;
|
|
1848
|
-
},
|
|
1849
|
-
|
|
1850
|
-
this.
|
|
1851
|
-
|
|
1852
|
-
this.
|
|
1853
|
-
|
|
1854
|
-
this.
|
|
1910
|
+
}, /* @ts-ignore */
|
|
1911
|
+
...(ngDevMode ? [{ debugName: "cellIconStyle" }] : /* istanbul ignore next */ []));
|
|
1912
|
+
this.tooltipValue = computed(() => this.#covertCellValueToString(this.cellValue()), /* @ts-ignore */
|
|
1913
|
+
...(ngDevMode ? [{ debugName: "tooltipValue" }] : /* istanbul ignore next */ []));
|
|
1914
|
+
this.isMouseOver = signal(false, /* @ts-ignore */
|
|
1915
|
+
...(ngDevMode ? [{ debugName: "isMouseOver" }] : /* istanbul ignore next */ []));
|
|
1916
|
+
this.isCopied = signal(false, /* @ts-ignore */
|
|
1917
|
+
...(ngDevMode ? [{ debugName: "isCopied" }] : /* istanbul ignore next */ []));
|
|
1918
|
+
this.row = input.required(/* @ts-ignore */
|
|
1919
|
+
...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
|
|
1920
|
+
this.column = input.required(/* @ts-ignore */
|
|
1921
|
+
...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
|
|
1922
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1855
1923
|
}
|
|
1856
1924
|
#clipboard;
|
|
1857
1925
|
#sanitizer;
|
|
@@ -1893,8 +1961,8 @@ class TableBaseCellComponent {
|
|
|
1893
1961
|
return JSON.stringify(value);
|
|
1894
1962
|
}
|
|
1895
1963
|
}
|
|
1896
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1897
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1964
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableBaseCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1965
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
1898
1966
|
// material
|
|
1899
1967
|
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:
|
|
1900
1968
|
// directives
|
|
@@ -1902,7 +1970,7 @@ class TableBaseCellComponent {
|
|
|
1902
1970
|
// pipes
|
|
1903
1971
|
EmptyToDashPipe, name: "emptyToDash" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1904
1972
|
}
|
|
1905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableBaseCellComponent, decorators: [{
|
|
1906
1974
|
type: Component,
|
|
1907
1975
|
args: [{ selector: 'rtui-table-base-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1908
1976
|
// material
|
|
@@ -1932,16 +2000,20 @@ class RtuiTableHeaderCellComponent {
|
|
|
1932
2000
|
constructor() {
|
|
1933
2001
|
this.#sanitizer = inject(DomSanitizer);
|
|
1934
2002
|
this.sortOrderTypes = LIST_SORT_ORDER_ENUM;
|
|
1935
|
-
this.headerModel = input.required(
|
|
1936
|
-
|
|
1937
|
-
this.
|
|
1938
|
-
|
|
2003
|
+
this.headerModel = input.required(/* @ts-ignore */
|
|
2004
|
+
...(ngDevMode ? [{ debugName: "headerModel" }] : /* istanbul ignore next */ []));
|
|
2005
|
+
this.sortModel = input.required(/* @ts-ignore */
|
|
2006
|
+
...(ngDevMode ? [{ debugName: "sortModel" }] : /* istanbul ignore next */ []));
|
|
2007
|
+
this.currentSortModel = input.required(/* @ts-ignore */
|
|
2008
|
+
...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
|
|
2009
|
+
this.headerDataEllipsisMaxLines = input(1, { ...(ngDevMode ? { debugName: "headerDataEllipsisMaxLines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
1939
2010
|
this.sortChange = output();
|
|
1940
2011
|
this.active = computed(() => {
|
|
1941
2012
|
return (!!this.currentSortModel()?.propertyName &&
|
|
1942
2013
|
!!this.sortModel()?.propertyName &&
|
|
1943
2014
|
this.currentSortModel()?.propertyName === this.sortModel()?.propertyName);
|
|
1944
|
-
},
|
|
2015
|
+
}, /* @ts-ignore */
|
|
2016
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
1945
2017
|
}
|
|
1946
2018
|
#sanitizer;
|
|
1947
2019
|
get style() {
|
|
@@ -1962,8 +2034,8 @@ class RtuiTableHeaderCellComponent {
|
|
|
1962
2034
|
}
|
|
1963
2035
|
return LIST_SORT_ORDER_ENUM.ASC;
|
|
1964
2036
|
}
|
|
1965
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2037
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2038
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
1967
2039
|
// Material
|
|
1968
2040
|
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:
|
|
1969
2041
|
// Bem
|
|
@@ -1971,7 +2043,7 @@ class RtuiTableHeaderCellComponent {
|
|
|
1971
2043
|
// Directives
|
|
1972
2044
|
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1973
2045
|
}
|
|
1974
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2046
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderCellComponent, decorators: [{
|
|
1975
2047
|
type: Component,
|
|
1976
2048
|
args: [{ selector: 'rtui-table-header-cell', imports: [
|
|
1977
2049
|
NgClass,
|
|
@@ -2002,28 +2074,31 @@ class RtuiTableHeaderFilterCellComponent {
|
|
|
2002
2074
|
this.filterTypes = TABLE_COLUMN_FILTER_TYPES_ENUM;
|
|
2003
2075
|
this.filterOperatorTypes = FILTER_OPERATOR_TYPE_ENUM;
|
|
2004
2076
|
/** Current elements appearance */
|
|
2005
|
-
this.appearance = input.required(
|
|
2077
|
+
this.appearance = input.required(/* @ts-ignore */
|
|
2078
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2006
2079
|
/** Filter property */
|
|
2007
|
-
this.filterProperty = input.required({ ...(ngDevMode ? { debugName: "filterProperty" } : {}), transform: (value) => (isString(value) ? value : value?.toString) });
|
|
2080
|
+
this.filterProperty = input.required({ ...(ngDevMode ? { debugName: "filterProperty" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value : value?.toString) });
|
|
2008
2081
|
/** Filter cell type */
|
|
2009
|
-
this.filterType = input.required(
|
|
2082
|
+
this.filterType = input.required(/* @ts-ignore */
|
|
2083
|
+
...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
|
|
2010
2084
|
/** Current filter model from store */
|
|
2011
|
-
this.filterModel = input.required({ ...(ngDevMode ? { debugName: "filterModel" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2085
|
+
this.filterModel = input.required({ ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2012
2086
|
/** Filter property */
|
|
2013
|
-
this.defaultFilterOperator = input.required({ ...(ngDevMode ? { debugName: "defaultFilterOperator" } : {}), transform: (value) => value && FILTER_OPERATORS.includes(value) ? value : FILTER_OPERATOR_TYPE_ENUM.EQUALS });
|
|
2087
|
+
this.defaultFilterOperator = input.required({ ...(ngDevMode ? { debugName: "defaultFilterOperator" } : /* istanbul ignore next */ {}), transform: (value) => value && FILTER_OPERATORS.includes(value) ? value : FILTER_OPERATOR_TYPE_ENUM.EQUALS });
|
|
2014
2088
|
/** Available filter operators */
|
|
2015
|
-
this.filterOperators = input([], { ...(ngDevMode ? { debugName: "filterOperators" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2089
|
+
this.filterOperators = input([], { ...(ngDevMode ? { debugName: "filterOperators" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2016
2090
|
/** List of selected filter models */
|
|
2017
|
-
this.filterSelectOptions = input([], { ...(ngDevMode ? { debugName: "filterSelectOptions" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2091
|
+
this.filterSelectOptions = input([], { ...(ngDevMode ? { debugName: "filterSelectOptions" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2018
2092
|
/** Indicates is mobile view */
|
|
2019
|
-
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
2093
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2020
2094
|
/** Filter change output action */
|
|
2021
2095
|
this.filterChange = output();
|
|
2022
2096
|
this.currentFilter = signal({
|
|
2023
2097
|
propertyName: '',
|
|
2024
2098
|
operatorType: FILTER_OPERATOR_TYPE_ENUM.EQUALS,
|
|
2025
2099
|
value: '',
|
|
2026
|
-
},
|
|
2100
|
+
}, /* @ts-ignore */
|
|
2101
|
+
...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
|
|
2027
2102
|
}
|
|
2028
2103
|
#injector;
|
|
2029
2104
|
#destroyRef;
|
|
@@ -2098,8 +2173,8 @@ class RtuiTableHeaderFilterCellComponent {
|
|
|
2098
2173
|
}
|
|
2099
2174
|
this.currentFilter.update((filter) => ({ ...filter, operatorType }));
|
|
2100
2175
|
}
|
|
2101
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2102
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2176
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2177
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type:
|
|
2103
2178
|
// Material
|
|
2104
2179
|
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:
|
|
2105
2180
|
// Directives
|
|
@@ -2109,7 +2184,7 @@ class RtuiTableHeaderFilterCellComponent {
|
|
|
2109
2184
|
// Pipes
|
|
2110
2185
|
TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2111
2186
|
}
|
|
2112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, decorators: [{
|
|
2113
2188
|
type: Component,
|
|
2114
2189
|
args: [{ selector: 'rtui-table-header-filter-cell', changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], imports: [
|
|
2115
2190
|
FormsModule,
|
|
@@ -2147,10 +2222,10 @@ class RtuiStopTableRowClickDirective {
|
|
|
2147
2222
|
this.#elementRef.nativeElement.setAttribute(RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, '');
|
|
2148
2223
|
}
|
|
2149
2224
|
}
|
|
2150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2151
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2225
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiStopTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2226
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiStopTableRowClickDirective, isStandalone: true, selector: "[rtStopTableRowClick]", ngImport: i0 }); }
|
|
2152
2227
|
}
|
|
2153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiStopTableRowClickDirective, decorators: [{
|
|
2154
2229
|
type: Directive,
|
|
2155
2230
|
args: [{
|
|
2156
2231
|
standalone: true,
|
|
@@ -2162,9 +2237,9 @@ class RtuiTableRowClickDirective {
|
|
|
2162
2237
|
constructor() {
|
|
2163
2238
|
this.#tableComponent = inject(RTUI_TABLE_COMPONENT_TOKEN);
|
|
2164
2239
|
/** Row entity */
|
|
2165
|
-
this.entity = input.required({ ...(ngDevMode ? { debugName: "entity" } : {}), alias: 'rtuiTableRowClickDirective' });
|
|
2240
|
+
this.entity = input.required({ ...(ngDevMode ? { debugName: "entity" } : /* istanbul ignore next */ {}), alias: 'rtuiTableRowClickDirective' });
|
|
2166
2241
|
/** Enabled flag */
|
|
2167
|
-
this.isTableRowClickable = input(true, { ...(ngDevMode ? { debugName: "isTableRowClickable" } : {}), transform: booleanAttribute });
|
|
2242
|
+
this.isTableRowClickable = input(true, { ...(ngDevMode ? { debugName: "isTableRowClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2168
2243
|
}
|
|
2169
2244
|
#tableComponent;
|
|
2170
2245
|
onMouseDown(event) {
|
|
@@ -2181,10 +2256,10 @@ class RtuiTableRowClickDirective {
|
|
|
2181
2256
|
}
|
|
2182
2257
|
this.#tableComponent.onRowDoubleClick(this.entity());
|
|
2183
2258
|
}
|
|
2184
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2185
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2260
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiTableRowClickDirective, isStandalone: true, selector: "[rtuiTableRowClickDirective]", inputs: { entity: { classPropertyName: "entity", publicName: "rtuiTableRowClickDirective", isSignal: true, isRequired: true, transformFunction: null }, isTableRowClickable: { classPropertyName: "isTableRowClickable", publicName: "isTableRowClickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMouseDown($event)", "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
|
|
2186
2261
|
}
|
|
2187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowClickDirective, decorators: [{
|
|
2188
2263
|
type: Directive,
|
|
2189
2264
|
args: [{
|
|
2190
2265
|
selector: '[rtuiTableRowClickDirective]',
|
|
@@ -2200,15 +2275,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2200
2275
|
/** Directive for custom table cells */
|
|
2201
2276
|
class RtuiCustomTableCellsDirective {
|
|
2202
2277
|
constructor() {
|
|
2203
|
-
this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : {}), alias: 'rtuiCustomTableCellsDirective' });
|
|
2278
|
+
this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : /* istanbul ignore next */ {}), alias: 'rtuiCustomTableCellsDirective' });
|
|
2204
2279
|
}
|
|
2205
2280
|
getTemplateByPropName(propName) {
|
|
2206
2281
|
return this.cellsTemplates()[propName];
|
|
2207
2282
|
}
|
|
2208
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2209
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2283
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2284
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiCustomTableCellsDirective, isStandalone: true, selector: "[rtuiCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
2210
2285
|
}
|
|
2211
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2286
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiCustomTableCellsDirective, decorators: [{
|
|
2212
2287
|
type: Directive,
|
|
2213
2288
|
args: [{
|
|
2214
2289
|
selector: '[rtuiCustomTableCellsDirective]',
|
|
@@ -2216,10 +2291,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2216
2291
|
}], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtuiCustomTableCellsDirective", required: true }] }] } });
|
|
2217
2292
|
/** Directive for row actions located inside a row menu button */
|
|
2218
2293
|
class RtuiTableRowActionsDirective {
|
|
2219
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2220
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2294
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2295
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableRowActionsDirective, isStandalone: true, selector: "[rtuiTabletRowActionsDirective]", ngImport: i0 }); }
|
|
2221
2296
|
}
|
|
2222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowActionsDirective, decorators: [{
|
|
2223
2298
|
type: Directive,
|
|
2224
2299
|
args: [{
|
|
2225
2300
|
selector: '[rtuiTabletRowActionsDirective]',
|
|
@@ -2227,10 +2302,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2227
2302
|
}] });
|
|
2228
2303
|
/** Directive for row actions located outside a row menu button */
|
|
2229
2304
|
class RtuiTableAdditionalRowActionsDirective {
|
|
2230
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2231
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2305
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2306
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableAdditionalRowActionsDirective, isStandalone: true, selector: "[rtuiTableAdditionalRowActionsDirective]", ngImport: i0 }); }
|
|
2232
2307
|
}
|
|
2233
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, decorators: [{
|
|
2234
2309
|
type: Directive,
|
|
2235
2310
|
args: [{
|
|
2236
2311
|
selector: '[rtuiTableAdditionalRowActionsDirective]',
|
|
@@ -2238,30 +2313,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2238
2313
|
}] });
|
|
2239
2314
|
class RtuiTableComponent {
|
|
2240
2315
|
constructor() {
|
|
2241
|
-
this.rowActions = viewChild('rowActions',
|
|
2242
|
-
|
|
2243
|
-
this.
|
|
2316
|
+
this.rowActions = viewChild('rowActions', /* @ts-ignore */
|
|
2317
|
+
...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
|
|
2318
|
+
this.rowActionsHeaderPaddingHelper = viewChild('rowActionsHeaderPaddingHelper', /* @ts-ignore */
|
|
2319
|
+
...(ngDevMode ? [{ debugName: "rowActionsHeaderPaddingHelper" }] : /* istanbul ignore next */ []));
|
|
2320
|
+
this.rowActionsPaddingHelper = viewChild('rowActionsRowPaddingHelper', /* @ts-ignore */
|
|
2321
|
+
...(ngDevMode ? [{ debugName: "rowActionsPaddingHelper" }] : /* istanbul ignore next */ []));
|
|
2244
2322
|
this.#tableConfigService = inject(RtTableConfigService);
|
|
2245
2323
|
this.columnTypes = TABLE_COLUMN_TYPES_ENUM;
|
|
2246
2324
|
this.filterOperators = FILTER_OPERATOR_TYPE_ENUM;
|
|
2247
2325
|
/** Indicates is mobile view */
|
|
2248
|
-
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
2326
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2249
2327
|
/** Indicates are table rows clickable */
|
|
2250
|
-
this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : {}), transform: booleanAttribute });
|
|
2328
|
+
this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2251
2329
|
/** Key of ENTITY_TYPE for compare entities */
|
|
2252
|
-
this.keyExp = input('id',
|
|
2330
|
+
this.keyExp = input('id', /* @ts-ignore */
|
|
2331
|
+
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
2253
2332
|
/** List of entities */
|
|
2254
|
-
this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2333
|
+
this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2255
2334
|
/** Current page model from store */
|
|
2256
|
-
this.currentSortModel = input.required(
|
|
2335
|
+
this.currentSortModel = input.required(/* @ts-ignore */
|
|
2336
|
+
...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
|
|
2257
2337
|
/** Current elements appearance */
|
|
2258
|
-
this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
|
|
2338
|
+
this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
|
|
2259
2339
|
/** Filter inputs appearance */
|
|
2260
|
-
this.filterAppearance = input('outline',
|
|
2340
|
+
this.filterAppearance = input('outline', /* @ts-ignore */
|
|
2341
|
+
...(ngDevMode ? [{ debugName: "filterAppearance" }] : /* istanbul ignore next */ []));
|
|
2261
2342
|
/** Current filter model from store */
|
|
2262
|
-
this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2343
|
+
this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2263
2344
|
/** Indicates is filters shown */
|
|
2264
|
-
this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : {}), transform: booleanAttribute });
|
|
2345
|
+
this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2265
2346
|
/** Row click output action */
|
|
2266
2347
|
this.rowClick = output();
|
|
2267
2348
|
/** Row doubleClick output action */
|
|
@@ -2273,28 +2354,37 @@ class RtuiTableComponent {
|
|
|
2273
2354
|
/** Columns config for table */
|
|
2274
2355
|
this.columns = computed(() => {
|
|
2275
2356
|
return this.#tableConfigService.tableConfig().columns;
|
|
2276
|
-
},
|
|
2357
|
+
}, /* @ts-ignore */
|
|
2358
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
2277
2359
|
/** Custom cells template */
|
|
2278
|
-
this.customCellsTpl = contentChild(RtuiCustomTableCellsDirective,
|
|
2360
|
+
this.customCellsTpl = contentChild(RtuiCustomTableCellsDirective, /* @ts-ignore */
|
|
2361
|
+
...(ngDevMode ? [{ debugName: "customCellsTpl" }] : /* istanbul ignore next */ []));
|
|
2279
2362
|
/** Row actions template */
|
|
2280
|
-
this.rowActionsTpl = contentChild(RtuiTableRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : {}), read: TemplateRef });
|
|
2363
|
+
this.rowActionsTpl = contentChild(RtuiTableRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
2281
2364
|
/** Additional row actions template */
|
|
2282
|
-
this.additionalRowActionsTpl = contentChild(RtuiTableAdditionalRowActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : {}), read: TemplateRef });
|
|
2365
|
+
this.additionalRowActionsTpl = contentChild(RtuiTableAdditionalRowActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
2283
2366
|
/** Fields specified by the directive */
|
|
2284
2367
|
/** List of selected entities ids */
|
|
2285
|
-
this.selectedEntitiesIds = signal([],
|
|
2368
|
+
this.selectedEntitiesIds = signal([], /* @ts-ignore */
|
|
2369
|
+
...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
|
|
2286
2370
|
/** Indicates are all page entities selected */
|
|
2287
|
-
this.isPageEntitiesSelected = signal(false,
|
|
2371
|
+
this.isPageEntitiesSelected = signal(false, /* @ts-ignore */
|
|
2372
|
+
...(ngDevMode ? [{ debugName: "isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
|
|
2288
2373
|
/** Indicates are some page entities selected */
|
|
2289
|
-
this.isPageEntitiesIndeterminate = signal(false,
|
|
2374
|
+
this.isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
|
|
2375
|
+
...(ngDevMode ? [{ debugName: "isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
|
|
2290
2376
|
/** Indicates is multiselect mod enabled */
|
|
2291
|
-
this.isMultiSelect = signal(true,
|
|
2377
|
+
this.isMultiSelect = signal(true, /* @ts-ignore */
|
|
2378
|
+
...(ngDevMode ? [{ debugName: "isMultiSelect" }] : /* istanbul ignore next */ []));
|
|
2292
2379
|
/** Indicates is selectors column shown */
|
|
2293
|
-
this.isSelectorsColumnShown = signal(false,
|
|
2380
|
+
this.isSelectorsColumnShown = signal(false, /* @ts-ignore */
|
|
2381
|
+
...(ngDevMode ? [{ debugName: "isSelectorsColumnShown" }] : /* istanbul ignore next */ []));
|
|
2294
2382
|
/** Indicates is selectors column disabled */
|
|
2295
|
-
this.isSelectorsColumnDisabled = signal(false,
|
|
2383
|
+
this.isSelectorsColumnDisabled = signal(false, /* @ts-ignore */
|
|
2384
|
+
...(ngDevMode ? [{ debugName: "isSelectorsColumnDisabled" }] : /* istanbul ignore next */ []));
|
|
2296
2385
|
/** Current row index */
|
|
2297
|
-
this.activeRowIndex = signal(null,
|
|
2386
|
+
this.activeRowIndex = signal(null, /* @ts-ignore */
|
|
2387
|
+
...(ngDevMode ? [{ debugName: "activeRowIndex" }] : /* istanbul ignore next */ []));
|
|
2298
2388
|
/** Empty methods set in selectors directive */
|
|
2299
2389
|
this.onToggleEntity = () => {
|
|
2300
2390
|
return;
|
|
@@ -2354,8 +2444,8 @@ class RtuiTableComponent {
|
|
|
2354
2444
|
}
|
|
2355
2445
|
}
|
|
2356
2446
|
}
|
|
2357
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2447
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableComponent, isStandalone: true, selector: "rtui-table", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, providers: [
|
|
2359
2449
|
{
|
|
2360
2450
|
provide: RTUI_TABLE_COMPONENT_TOKEN,
|
|
2361
2451
|
useExisting: forwardRef(() => RtuiTableComponent),
|
|
@@ -2368,7 +2458,7 @@ class RtuiTableComponent {
|
|
|
2368
2458
|
// components
|
|
2369
2459
|
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 }); }
|
|
2370
2460
|
}
|
|
2371
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableComponent, decorators: [{
|
|
2372
2462
|
type: Component,
|
|
2373
2463
|
args: [{ selector: 'rtui-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2374
2464
|
NgTemplateOutlet,
|
|
@@ -2403,10 +2493,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2403
2493
|
|
|
2404
2494
|
class RtuiDynamicSelectorListActionsComponent {
|
|
2405
2495
|
constructor() {
|
|
2406
|
-
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
2407
|
-
this.isResetButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isResetButtonDisabled" } : {}), transform: booleanAttribute });
|
|
2408
|
-
this.isClearButtonDisabled = input(false, { ...(ngDevMode ? { debugName: "isClearButtonDisabled" } : {}), transform: booleanAttribute });
|
|
2409
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
2496
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2497
|
+
this.isResetButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isResetButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2498
|
+
this.isClearButtonDisabled = input(false, { ...(ngDevMode ? { debugName: "isClearButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2499
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2410
2500
|
this.resetAction = output();
|
|
2411
2501
|
this.clearAction = output();
|
|
2412
2502
|
}
|
|
@@ -2416,10 +2506,10 @@ class RtuiDynamicSelectorListActionsComponent {
|
|
|
2416
2506
|
onClear() {
|
|
2417
2507
|
this.clearAction.emit();
|
|
2418
2508
|
}
|
|
2419
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2509
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2510
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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 }); }
|
|
2421
2511
|
}
|
|
2422
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, decorators: [{
|
|
2423
2513
|
type: Component,
|
|
2424
2514
|
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"] }]
|
|
2425
2515
|
}], 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"] }] } });
|
|
@@ -2427,33 +2517,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2427
2517
|
class RtuiDynamicSelectorsDirective {
|
|
2428
2518
|
constructor() {
|
|
2429
2519
|
/** Indicates if mobile view */
|
|
2430
|
-
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
2520
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2431
2521
|
/** Selections control button title */
|
|
2432
|
-
this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : {}), transform: transformStringInput });
|
|
2522
|
+
this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
2433
2523
|
/** Indicates if only one option can be chosen */
|
|
2434
|
-
this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : {}), transform: booleanAttribute });
|
|
2524
|
+
this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2435
2525
|
/** Indicates is selector disabled */
|
|
2436
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
2526
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2437
2527
|
/** Indicates is break string pipe used */
|
|
2438
|
-
this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : {}), transform: booleanAttribute });
|
|
2528
|
+
this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2439
2529
|
/** Indicates is title case pipe used */
|
|
2440
|
-
this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : {}), transform: booleanAttribute });
|
|
2441
|
-
this.isPlaceholderIconOutlined = input(true, { ...(ngDevMode ? { debugName: "isPlaceholderIconOutlined" } : {}), transform: booleanAttribute });
|
|
2530
|
+
this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2531
|
+
this.isPlaceholderIconOutlined = input(true, { ...(ngDevMode ? { debugName: "isPlaceholderIconOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2442
2532
|
/** Indicates is delete entity button from the selected list shown */
|
|
2443
|
-
this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : {}), transform: booleanAttribute });
|
|
2533
|
+
this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2444
2534
|
/** Indicates is list of items draggable */
|
|
2445
|
-
this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : {}), transform: booleanAttribute });
|
|
2535
|
+
this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2446
2536
|
/** Placeholder icon */
|
|
2447
|
-
this.placeholderIcon = input('', { ...(ngDevMode ? { debugName: "placeholderIcon" } : {}), transform: transformStringInput });
|
|
2537
|
+
this.placeholderIcon = input('', { ...(ngDevMode ? { debugName: "placeholderIcon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
2448
2538
|
/** Placeholder description */
|
|
2449
|
-
this.placeholderDescription = input('', { ...(ngDevMode ? { debugName: "placeholderDescription" } : {}), transform: transformStringInput });
|
|
2539
|
+
this.placeholderDescription = input('', { ...(ngDevMode ? { debugName: "placeholderDescription" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
2450
2540
|
/** Material elements appearance */
|
|
2451
|
-
this.appearance = input('fill',
|
|
2541
|
+
this.appearance = input('fill', /* @ts-ignore */
|
|
2542
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2452
2543
|
}
|
|
2453
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2454
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2545
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorsDirective, isStandalone: true, inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderIconOutlined: { classPropertyName: "isPlaceholderIconOutlined", publicName: "isPlaceholderIconOutlined", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderDescription: { classPropertyName: "placeholderDescription", publicName: "placeholderDescription", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
2455
2546
|
}
|
|
2456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorsDirective, decorators: [{
|
|
2457
2548
|
type: Directive
|
|
2458
2549
|
}], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], useTitleCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTitleCase", required: false }] }], isPlaceholderIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderIconOutlined", required: false }] }], isDeleteButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeleteButtonShown", required: false }] }], isListDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isListDraggable", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderDescription", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
|
|
2459
2550
|
|
|
@@ -2470,12 +2561,16 @@ class RtuiToggleComponent {
|
|
|
2470
2561
|
this.#destroyRef = inject(DestroyRef);
|
|
2471
2562
|
this.#breakpointService = inject(BreakpointService);
|
|
2472
2563
|
this.formControl = new FormControl(false, { nonNullable: true });
|
|
2473
|
-
this.label = input(
|
|
2474
|
-
|
|
2475
|
-
this.
|
|
2476
|
-
|
|
2477
|
-
this.
|
|
2478
|
-
|
|
2564
|
+
this.label = input(/* @ts-ignore */
|
|
2565
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2566
|
+
this.tooltip = input('', /* @ts-ignore */
|
|
2567
|
+
...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
2568
|
+
this.size = input(TOGGLE_SIZE_TYPE_ENUM.MD, /* @ts-ignore */
|
|
2569
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2570
|
+
this.tooltipPosition = input('above', /* @ts-ignore */
|
|
2571
|
+
...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
2572
|
+
this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2573
|
+
this.tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2479
2574
|
this.isMobile = this.#breakpointService.isMobile;
|
|
2480
2575
|
this.#onTouched = noop;
|
|
2481
2576
|
this.#onChanged = noop;
|
|
@@ -2521,19 +2616,19 @@ class RtuiToggleComponent {
|
|
|
2521
2616
|
}
|
|
2522
2617
|
this.#cdr.markForCheck();
|
|
2523
2618
|
}
|
|
2524
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2525
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiToggleComponent, isStandalone: true, selector: "rtui-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
2526
2621
|
{
|
|
2527
2622
|
provide: NG_VALUE_ACCESSOR,
|
|
2528
2623
|
useExisting: forwardRef(() => RtuiToggleComponent),
|
|
2529
2624
|
multi: true,
|
|
2530
2625
|
},
|
|
2531
2626
|
BreakpointService,
|
|
2532
|
-
], 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:
|
|
2627
|
+
], 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]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[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:
|
|
2533
2628
|
// directives
|
|
2534
2629
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2535
2630
|
}
|
|
2536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToggleComponent, decorators: [{
|
|
2537
2632
|
type: Component,
|
|
2538
2633
|
args: [{ selector: 'rtui-toggle', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2539
2634
|
{
|
|
@@ -2559,38 +2654,44 @@ class RtuiMultiSelectorPopupComponent {
|
|
|
2559
2654
|
this.#deviceService = inject(DeviceDetectorService);
|
|
2560
2655
|
this.oSTypes = OSTypes;
|
|
2561
2656
|
/** Indicates is mobile view */
|
|
2562
|
-
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
2563
|
-
this.entitiesToSelect = input.required({ ...(ngDevMode ? { debugName: "entitiesToSelect" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2657
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2658
|
+
this.entitiesToSelect = input.required({ ...(ngDevMode ? { debugName: "entitiesToSelect" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2564
2659
|
/** Material elements appearance */
|
|
2565
|
-
this.appearance = input.required(
|
|
2660
|
+
this.appearance = input.required(/* @ts-ignore */
|
|
2661
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2566
2662
|
/** A model's field which should be used for http-requests */
|
|
2567
|
-
this.keyExp = input.required(
|
|
2663
|
+
this.keyExp = input.required(/* @ts-ignore */
|
|
2664
|
+
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
2568
2665
|
/** A model's field which should be shown in ui */
|
|
2569
|
-
this.displayExp = input.required(
|
|
2666
|
+
this.displayExp = input.required(/* @ts-ignore */
|
|
2667
|
+
...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
|
|
2570
2668
|
/** Init search term value */
|
|
2571
|
-
this.searchTerm = input('',
|
|
2669
|
+
this.searchTerm = input('', /* @ts-ignore */
|
|
2670
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
2572
2671
|
/** Navigation button title */
|
|
2573
|
-
this.navigateButtonTitle = input('',
|
|
2672
|
+
this.navigateButtonTitle = input('', /* @ts-ignore */
|
|
2673
|
+
...(ngDevMode ? [{ debugName: "navigateButtonTitle" }] : /* istanbul ignore next */ []));
|
|
2574
2674
|
/** Navigation button link */
|
|
2575
|
-
this.navigateLink = input('',
|
|
2675
|
+
this.navigateLink = input('', /* @ts-ignore */
|
|
2676
|
+
...(ngDevMode ? [{ debugName: "navigateLink" }] : /* istanbul ignore next */ []));
|
|
2576
2677
|
/** Indicates if only one option can be chosen */
|
|
2577
|
-
this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : {}), transform: booleanAttribute });
|
|
2678
|
+
this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2578
2679
|
/** Indicates is change multi select mode toggle shown */
|
|
2579
|
-
this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : {}), transform: booleanAttribute });
|
|
2680
|
+
this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2580
2681
|
/** Indicates is Select all button shown */
|
|
2581
|
-
this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : {}), transform: booleanAttribute });
|
|
2682
|
+
this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2582
2683
|
/** Indicates that a list of entities is being loading */
|
|
2583
|
-
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
2684
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2584
2685
|
/** Indicates that a list of entities is being fetching */
|
|
2585
|
-
this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
|
|
2686
|
+
this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2586
2687
|
/** Indicates is BreakStringPipe used */
|
|
2587
|
-
this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : {}), transform: booleanAttribute });
|
|
2688
|
+
this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2588
2689
|
/** Indicates lazy loading is used */
|
|
2589
|
-
this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : {}), transform: booleanAttribute });
|
|
2690
|
+
this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2590
2691
|
/** Indicates local search is used */
|
|
2591
|
-
this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : {}), transform: booleanAttribute });
|
|
2692
|
+
this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2592
2693
|
/** Keys of a pinned group kept at the top of the list — a trailing divider is drawn after the last visible one */
|
|
2593
|
-
this.pinnedKeys = input([], { ...(ngDevMode ? { debugName: "pinnedKeys" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2694
|
+
this.pinnedKeys = input([], { ...(ngDevMode ? { debugName: "pinnedKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2594
2695
|
/** Send output selected entities ids */
|
|
2595
2696
|
this.submitAction = output();
|
|
2596
2697
|
/** Close popup action */
|
|
@@ -2602,21 +2703,27 @@ class RtuiMultiSelectorPopupComponent {
|
|
|
2602
2703
|
/** Output temporary selection action, needed for store values */
|
|
2603
2704
|
this.temporarySelectAction = output();
|
|
2604
2705
|
/** Search input Ref for set focus on init */
|
|
2605
|
-
this.searchInputRef = viewChild('searchInputTpl',
|
|
2706
|
+
this.searchInputRef = viewChild('searchInputTpl', /* @ts-ignore */
|
|
2707
|
+
...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
|
|
2606
2708
|
/** Form control for search */
|
|
2607
2709
|
this.searchControl = new FormControl('');
|
|
2608
2710
|
/** Form control for select */
|
|
2609
2711
|
this.selectionControl = new FormControl([], { nonNullable: true });
|
|
2610
2712
|
/** Entities filtered by local search */
|
|
2611
|
-
this.filteredEntities = signal([],
|
|
2713
|
+
this.filteredEntities = signal([], /* @ts-ignore */
|
|
2714
|
+
...(ngDevMode ? [{ debugName: "filteredEntities" }] : /* istanbul ignore next */ []));
|
|
2612
2715
|
/** Selected entities */
|
|
2613
|
-
this.selectedEntities = signal([],
|
|
2716
|
+
this.selectedEntities = signal([], /* @ts-ignore */
|
|
2717
|
+
...(ngDevMode ? [{ debugName: "selectedEntities" }] : /* istanbul ignore next */ []));
|
|
2614
2718
|
/** Indicates is all available entities has been selected */
|
|
2615
|
-
this.isAllSelected = signal(false,
|
|
2719
|
+
this.isAllSelected = signal(false, /* @ts-ignore */
|
|
2720
|
+
...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
|
|
2616
2721
|
/** Indicates is multi selection mode enabled */
|
|
2617
|
-
this.isMultiSelection = signal(true,
|
|
2722
|
+
this.isMultiSelection = signal(true, /* @ts-ignore */
|
|
2723
|
+
...(ngDevMode ? [{ debugName: "isMultiSelection" }] : /* istanbul ignore next */ []));
|
|
2618
2724
|
/** Indicates is macOS used */
|
|
2619
|
-
this.isMacOS = signal(this.#deviceService.getOS() === this.oSTypes.MAC_OS,
|
|
2725
|
+
this.isMacOS = signal(this.#deviceService.getOS() === this.oSTypes.MAC_OS, /* @ts-ignore */
|
|
2726
|
+
...(ngDevMode ? [{ debugName: "isMacOS" }] : /* istanbul ignore next */ []));
|
|
2620
2727
|
/** Key of the last visible pinned option — its row gets a trailing divider */
|
|
2621
2728
|
this.lastSeparatedKey = computed(() => {
|
|
2622
2729
|
const keys = this.pinnedKeys();
|
|
@@ -2631,7 +2738,8 @@ class RtuiMultiSelectorPopupComponent {
|
|
|
2631
2738
|
}
|
|
2632
2739
|
}
|
|
2633
2740
|
return null;
|
|
2634
|
-
},
|
|
2741
|
+
}, /* @ts-ignore */
|
|
2742
|
+
...(ngDevMode ? [{ debugName: "lastSeparatedKey" }] : /* istanbul ignore next */ []));
|
|
2635
2743
|
}
|
|
2636
2744
|
#destroyRef;
|
|
2637
2745
|
#injector;
|
|
@@ -2769,16 +2877,16 @@ class RtuiMultiSelectorPopupComponent {
|
|
|
2769
2877
|
scroll() {
|
|
2770
2878
|
this.scrollAction.emit();
|
|
2771
2879
|
}
|
|
2772
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2773
|
-
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 }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", 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 [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-radio-button>\n } @else {\n <mat-checkbox\n rtElem=\"item\"\n [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-checkbox>\n }\n }\n }\n\n @if (fetching()) {\n <div rtElem=\"loader\">\n <mat-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n} @else {\n <div rtBlock=\"rtui-multi-selector-placeholder\">\n @if (loading()) {\n <rtui-spinner />\n } @else {\n <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n <div rtElem=\"title\">No Results</div>\n }\n </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n @if (navigateLink() && navigateButtonTitle()) {\n <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n }\n\n <div rtElem=\"base-actions\">\n <button mat-button type=\"button\" 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:
|
|
2880
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2881
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", 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 [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-radio-button>\n } @else {\n <mat-checkbox\n rtElem=\"item\"\n [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n <div rtElem=\"item-title\">\n @if (useNameBreaking()) {\n {{ entity[displayExp()] | entityToString | breakString }}\n } @else {\n {{ entity[displayExp()] }}\n }\n </div>\n </mat-checkbox>\n }\n }\n }\n\n @if (fetching()) {\n <div rtElem=\"loader\">\n <mat-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n} @else {\n <div rtBlock=\"rtui-multi-selector-placeholder\">\n @if (loading()) {\n <rtui-spinner />\n } @else {\n <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n <div rtElem=\"title\">No Results</div>\n }\n </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n @if (navigateLink() && navigateButtonTitle()) {\n <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n }\n\n <div rtElem=\"base-actions\">\n <button mat-button type=\"button\" 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:
|
|
2774
2882
|
// Material
|
|
2775
|
-
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:
|
|
2883
|
+
MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type:
|
|
2776
2884
|
// directives
|
|
2777
2885
|
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:
|
|
2778
2886
|
// components
|
|
2779
2887
|
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 }); }
|
|
2780
2888
|
}
|
|
2781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiSelectorPopupComponent, decorators: [{
|
|
2782
2890
|
type: Component,
|
|
2783
2891
|
args: [{ selector: 'rtui-multi-selector-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2784
2892
|
// Material
|
|
@@ -2812,31 +2920,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2812
2920
|
|
|
2813
2921
|
class RtuiDynamicSelectorPlaceholderComponent {
|
|
2814
2922
|
constructor() {
|
|
2815
|
-
this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : {}), transform: transformStringInput });
|
|
2816
|
-
this.description = input('', { ...(ngDevMode ? { debugName: "description" } : {}), transform: transformStringInput });
|
|
2817
|
-
this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : {}), transform: transformStringInput });
|
|
2818
|
-
this.isButtonShow = input(true, { ...(ngDevMode ? { debugName: "isButtonShow" } : {}), transform: booleanAttribute });
|
|
2819
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
2820
|
-
this.isIconOutlined = input(false, { ...(ngDevMode ? { debugName: "isIconOutlined" } : {}), transform: booleanAttribute });
|
|
2923
|
+
this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
2924
|
+
this.description = input('', { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
2925
|
+
this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
2926
|
+
this.isButtonShow = input(true, { ...(ngDevMode ? { debugName: "isButtonShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2927
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2928
|
+
this.isIconOutlined = input(false, { ...(ngDevMode ? { debugName: "isIconOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2821
2929
|
this.submitAction = output();
|
|
2822
2930
|
}
|
|
2823
2931
|
onSubmit(trigger) {
|
|
2824
2932
|
this.submitAction.emit(trigger);
|
|
2825
2933
|
}
|
|
2826
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2934
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
2828
2936
|
}
|
|
2829
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2937
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, decorators: [{
|
|
2830
2938
|
type: Component,
|
|
2831
2939
|
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"] }]
|
|
2832
2940
|
}], 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"] }] } });
|
|
2833
2941
|
|
|
2834
2942
|
/** Directive for row actions located outside a row menu button */
|
|
2835
2943
|
class RtuiDynamicSelectorItemAdditionalControlDirective {
|
|
2836
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2837
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2944
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2945
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorItemAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]", ngImport: i0 }); }
|
|
2838
2946
|
}
|
|
2839
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, decorators: [{
|
|
2840
2948
|
type: Directive,
|
|
2841
2949
|
args: [{
|
|
2842
2950
|
selector: '[rtuiDynamicSelectorItemAdditionalControlDirective]',
|
|
@@ -2844,10 +2952,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2844
2952
|
}] });
|
|
2845
2953
|
/** Directive for custom item title template */
|
|
2846
2954
|
class RtuiDynamicSelectorItemTitleDirective {
|
|
2847
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2848
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2955
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2956
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorItemTitleDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleDirective]", ngImport: i0 }); }
|
|
2849
2957
|
}
|
|
2850
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, decorators: [{
|
|
2851
2959
|
type: Directive,
|
|
2852
2960
|
args: [{
|
|
2853
2961
|
selector: '[rtuiDynamicSelectorItemTitleDirective]',
|
|
@@ -2855,37 +2963,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2855
2963
|
}] });
|
|
2856
2964
|
class RtuiDynamicSelectorSelectedListComponent {
|
|
2857
2965
|
constructor() {
|
|
2858
|
-
this.editedItemIndex = signal(null,
|
|
2859
|
-
|
|
2966
|
+
this.editedItemIndex = signal(null, /* @ts-ignore */
|
|
2967
|
+
...(ngDevMode ? [{ debugName: "editedItemIndex" }] : /* istanbul ignore next */ []));
|
|
2968
|
+
this.inputRef = viewChild(MatInput, /* @ts-ignore */
|
|
2969
|
+
...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
|
|
2860
2970
|
/** Indicates if mobile view */
|
|
2861
|
-
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
2971
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2862
2972
|
/** A model's field, which should be used for http-requests */
|
|
2863
|
-
this.keyExp = input.required(
|
|
2973
|
+
this.keyExp = input.required(/* @ts-ignore */
|
|
2974
|
+
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
2864
2975
|
/** A model's field, which should be shown in ui */
|
|
2865
|
-
this.displayExp = input.required(
|
|
2976
|
+
this.displayExp = input.required(/* @ts-ignore */
|
|
2977
|
+
...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
|
|
2866
2978
|
/** Array of selected entities */
|
|
2867
|
-
this.selectedEntities = input.required({ ...(ngDevMode ? { debugName: "selectedEntities" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2979
|
+
this.selectedEntities = input.required({ ...(ngDevMode ? { debugName: "selectedEntities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2868
2980
|
/** Entity keys that can't be changed */
|
|
2869
|
-
this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
|
|
2981
|
+
this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2870
2982
|
/** Indicates is a list of items draggable */
|
|
2871
|
-
this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : {}), transform: booleanAttribute });
|
|
2983
|
+
this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2872
2984
|
/** Indicates is break string pipe used */
|
|
2873
|
-
this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : {}), transform: booleanAttribute });
|
|
2985
|
+
this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2874
2986
|
/** Indicates is title case pipe used */
|
|
2875
|
-
this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : {}), transform: booleanAttribute });
|
|
2987
|
+
this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2876
2988
|
/** Indicates is deleting entity button from the selected list shown */
|
|
2877
|
-
this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : {}), transform: booleanAttribute });
|
|
2989
|
+
this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2878
2990
|
/** Indicates is items editable */
|
|
2879
|
-
this.isItemsEditable = input(false, { ...(ngDevMode ? { debugName: "isItemsEditable" } : {}), transform: booleanAttribute });
|
|
2991
|
+
this.isItemsEditable = input(false, { ...(ngDevMode ? { debugName: "isItemsEditable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2880
2992
|
/** Material elements appearance */
|
|
2881
|
-
this.appearance = input('fill',
|
|
2993
|
+
this.appearance = input('fill', /* @ts-ignore */
|
|
2994
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2882
2995
|
this.deleteFromSelectedAction = output();
|
|
2883
2996
|
this.dropAction = output();
|
|
2884
2997
|
this.changeValueAction = output();
|
|
2885
2998
|
/** Additional control for entity */
|
|
2886
|
-
this.additionalControlTpl = contentChild(RtuiDynamicSelectorItemAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
|
|
2999
|
+
this.additionalControlTpl = contentChild(RtuiDynamicSelectorItemAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
2887
3000
|
/** Custom item title template */
|
|
2888
|
-
this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : {}), read: TemplateRef });
|
|
3001
|
+
this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
2889
3002
|
}
|
|
2890
3003
|
onDelete(value) {
|
|
2891
3004
|
this.deleteFromSelectedAction.emit(value);
|
|
@@ -2902,8 +3015,8 @@ class RtuiDynamicSelectorSelectedListComponent {
|
|
|
2902
3015
|
setEditModState(index) {
|
|
2903
3016
|
this.editedItemIndex.set(index);
|
|
2904
3017
|
}
|
|
2905
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2906
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3018
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
2907
3020
|
// material
|
|
2908
3021
|
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:
|
|
2909
3022
|
// drag and drop
|
|
@@ -2913,7 +3026,7 @@ class RtuiDynamicSelectorSelectedListComponent {
|
|
|
2913
3026
|
// pipes
|
|
2914
3027
|
EntityToStringPipe, name: "entityToString" }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2915
3028
|
}
|
|
2916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3029
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, decorators: [{
|
|
2917
3030
|
type: Component,
|
|
2918
3031
|
args: [{ selector: 'rtui-dynamic-selector-selected-list', imports: [
|
|
2919
3032
|
NgTemplateOutlet,
|
|
@@ -2948,10 +3061,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2948
3061
|
|
|
2949
3062
|
/** Directive for row actions located outside a row menu button */
|
|
2950
3063
|
class RtuiDynamicSelectorAdditionalControlDirective {
|
|
2951
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2952
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3064
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3065
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorAdditionalControlDirective]", ngImport: i0 }); }
|
|
2953
3066
|
}
|
|
2954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3067
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, decorators: [{
|
|
2955
3068
|
type: Directive,
|
|
2956
3069
|
args: [{
|
|
2957
3070
|
selector: '[rtuiDynamicSelectorAdditionalControlDirective]',
|
|
@@ -2959,10 +3072,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2959
3072
|
}] });
|
|
2960
3073
|
/** Directive for custom item title template, projected from rtui-dynamic-selector down to selected-list */
|
|
2961
3074
|
class RtuiDynamicSelectorItemTitleProjectionDirective {
|
|
2962
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2963
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3075
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3076
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorItemTitleProjectionDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleProjectionDirective]", ngImport: i0 }); }
|
|
2964
3077
|
}
|
|
2965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3078
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, decorators: [{
|
|
2966
3079
|
type: Directive,
|
|
2967
3080
|
args: [{
|
|
2968
3081
|
selector: '[rtuiDynamicSelectorItemTitleProjectionDirective]',
|
|
@@ -2982,45 +3095,53 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
2982
3095
|
/** Target element for overlay selector */
|
|
2983
3096
|
this.selectedOverlayTrigger = null;
|
|
2984
3097
|
/** A model's field which should be used for http-requests */
|
|
2985
|
-
this.keyExp = input.required(
|
|
3098
|
+
this.keyExp = input.required(/* @ts-ignore */
|
|
3099
|
+
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
2986
3100
|
/** A model's field which should be shown in ui */
|
|
2987
|
-
this.displayExp = input.required(
|
|
3101
|
+
this.displayExp = input.required(/* @ts-ignore */
|
|
3102
|
+
...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
|
|
2988
3103
|
/** All entities available entities */
|
|
2989
|
-
this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : {}), transform: (value) => transformArrayInput(value) });
|
|
3104
|
+
this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2990
3105
|
/** Navigation button title for popup actions */
|
|
2991
|
-
this.navigateButtonTitle = input('',
|
|
3106
|
+
this.navigateButtonTitle = input('', /* @ts-ignore */
|
|
3107
|
+
...(ngDevMode ? [{ debugName: "navigateButtonTitle" }] : /* istanbul ignore next */ []));
|
|
2992
3108
|
/** Navigation button link for popup actions */
|
|
2993
|
-
this.navigateLink = input('',
|
|
3109
|
+
this.navigateLink = input('', /* @ts-ignore */
|
|
3110
|
+
...(ngDevMode ? [{ debugName: "navigateLink" }] : /* istanbul ignore next */ []));
|
|
2994
3111
|
/** Entity keys that can't be changed */
|
|
2995
|
-
this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
|
|
3112
|
+
this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
2996
3113
|
/** Selected entities */
|
|
2997
|
-
this.chosenEntities = model([],
|
|
3114
|
+
this.chosenEntities = model([], /* @ts-ignore */
|
|
3115
|
+
...(ngDevMode ? [{ debugName: "chosenEntities" }] : /* istanbul ignore next */ []));
|
|
2998
3116
|
/** Indicates is selection available */
|
|
2999
|
-
this.isSelectionAvailable = input(true, { ...(ngDevMode ? { debugName: "isSelectionAvailable" } : {}), transform: booleanAttribute });
|
|
3117
|
+
this.isSelectionAvailable = input(true, { ...(ngDevMode ? { debugName: "isSelectionAvailable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3000
3118
|
/** Indicates is placeholder shown */
|
|
3001
|
-
this.isPlaceholderShown = input(false, { ...(ngDevMode ? { debugName: "isPlaceholderShown" } : {}), transform: booleanAttribute });
|
|
3119
|
+
this.isPlaceholderShown = input(false, { ...(ngDevMode ? { debugName: "isPlaceholderShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3002
3120
|
/** Indicates that a list of entities is being loading */
|
|
3003
|
-
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
3121
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3004
3122
|
/** Indicates that a list of entities is being pending */
|
|
3005
|
-
this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : {}), transform: booleanAttribute });
|
|
3123
|
+
this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3006
3124
|
/** Indicates that a list of entities is being fetching */
|
|
3007
|
-
this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
|
|
3125
|
+
this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3008
3126
|
/** Indicates lazy loading is used */
|
|
3009
|
-
this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : {}), transform: booleanAttribute });
|
|
3127
|
+
this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3010
3128
|
/** Indicates local search is used */
|
|
3011
|
-
this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : {}), transform: booleanAttribute });
|
|
3129
|
+
this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3012
3130
|
/** Indicates is change multi select mode toggle shown */
|
|
3013
|
-
this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : {}), transform: booleanAttribute });
|
|
3131
|
+
this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3014
3132
|
/** Indicates is Select all button shown */
|
|
3015
|
-
this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : {}), transform: booleanAttribute });
|
|
3133
|
+
this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3016
3134
|
/** Indicates is Open popup button shown */
|
|
3017
|
-
this.isOpenPopupButtonShown = input(true, { ...(ngDevMode ? { debugName: "isOpenPopupButtonShown" } : {}), transform: booleanAttribute });
|
|
3135
|
+
this.isOpenPopupButtonShown = input(true, { ...(ngDevMode ? { debugName: "isOpenPopupButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3018
3136
|
/** Init search term value */
|
|
3019
|
-
this.searchTerm = input('',
|
|
3137
|
+
this.searchTerm = input('', /* @ts-ignore */
|
|
3138
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
3020
3139
|
/** Indicates that an additional control has been changed */
|
|
3021
|
-
this.additionalControlChanged = input(false,
|
|
3140
|
+
this.additionalControlChanged = input(false, /* @ts-ignore */
|
|
3141
|
+
...(ngDevMode ? [{ debugName: "additionalControlChanged" }] : /* istanbul ignore next */ []));
|
|
3022
3142
|
/** Custom sort function for entities list in popup */
|
|
3023
|
-
this.sortFn = input(null,
|
|
3143
|
+
this.sortFn = input(null, /* @ts-ignore */
|
|
3144
|
+
...(ngDevMode ? [{ debugName: "sortFn" }] : /* istanbul ignore next */ []));
|
|
3024
3145
|
/** Output search action */
|
|
3025
3146
|
this.searchAction = output();
|
|
3026
3147
|
/** Output scroll action, needed for lazy loading */
|
|
@@ -3032,32 +3153,41 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3032
3153
|
/** Output selection change action */
|
|
3033
3154
|
this.selectionChangeAction = output();
|
|
3034
3155
|
/** List of entities for local processing */
|
|
3035
|
-
this.#entities = signal([],
|
|
3036
|
-
|
|
3156
|
+
this.#entities = signal([], /* @ts-ignore */
|
|
3157
|
+
...(ngDevMode ? [{ debugName: "#entities" }] : /* istanbul ignore next */ []));
|
|
3158
|
+
this.#autocompleteControlValue = signal('', /* @ts-ignore */
|
|
3159
|
+
...(ngDevMode ? [{ debugName: "#autocompleteControlValue" }] : /* istanbul ignore next */ []));
|
|
3037
3160
|
/** Initial entities ids */
|
|
3038
|
-
this.#initialEntityIds = signal([],
|
|
3161
|
+
this.#initialEntityIds = signal([], /* @ts-ignore */
|
|
3162
|
+
...(ngDevMode ? [{ debugName: "#initialEntityIds" }] : /* istanbul ignore next */ []));
|
|
3039
3163
|
/** Current selected entities ids */
|
|
3040
|
-
this.#selectedEntityIds = signal([],
|
|
3164
|
+
this.#selectedEntityIds = signal([], /* @ts-ignore */
|
|
3165
|
+
...(ngDevMode ? [{ debugName: "#selectedEntityIds" }] : /* istanbul ignore next */ []));
|
|
3041
3166
|
/** Current selected entities */
|
|
3042
3167
|
this.selectedEntities = computed(() => {
|
|
3043
3168
|
return this.#selectedEntityIds()
|
|
3044
3169
|
.map((id) => this.entities().find((el) => id === el[this.keyExp()]))
|
|
3045
3170
|
.filter((el) => !!el);
|
|
3046
|
-
},
|
|
3171
|
+
}, /* @ts-ignore */
|
|
3172
|
+
...(ngDevMode ? [{ debugName: "selectedEntities" }] : /* istanbul ignore next */ []));
|
|
3047
3173
|
/** Indicates is popup selector visible */
|
|
3048
|
-
this.isSelectionControlShown = signal(false,
|
|
3174
|
+
this.isSelectionControlShown = signal(false, /* @ts-ignore */
|
|
3175
|
+
...(ngDevMode ? [{ debugName: "isSelectionControlShown" }] : /* istanbul ignore next */ []));
|
|
3049
3176
|
/** Indicates is no data */
|
|
3050
3177
|
this.isNoDataPlaceholderShown = computed(() => {
|
|
3051
3178
|
return !this.selectedEntities().length && !this.searchTerm() && (!this.entitiesToSelect()?.length || !this.isSelectionAvailable());
|
|
3052
|
-
},
|
|
3179
|
+
}, /* @ts-ignore */
|
|
3180
|
+
...(ngDevMode ? [{ debugName: "isNoDataPlaceholderShown" }] : /* istanbul ignore next */ []));
|
|
3053
3181
|
/** Indicates reset selected button is disabled */
|
|
3054
3182
|
this.isResetButtonDisabled = computed(() => {
|
|
3055
3183
|
return areArraysEqual(this.#selectedEntityIds(), this.#initialEntityIds()) && !this.additionalControlChanged();
|
|
3056
|
-
},
|
|
3184
|
+
}, /* @ts-ignore */
|
|
3185
|
+
...(ngDevMode ? [{ debugName: "isResetButtonDisabled" }] : /* istanbul ignore next */ []));
|
|
3057
3186
|
/** Indicates clear selected button is disabled */
|
|
3058
3187
|
this.isClearButtonDisabled = computed(() => {
|
|
3059
3188
|
return areArraysEqualUnordered(this.#selectedEntityIds(), this.readonlyEntitiesKeys()) && !this.additionalControlChanged();
|
|
3060
|
-
},
|
|
3189
|
+
}, /* @ts-ignore */
|
|
3190
|
+
...(ngDevMode ? [{ debugName: "isClearButtonDisabled" }] : /* istanbul ignore next */ []));
|
|
3061
3191
|
/** Entities can be chosen, except selected on init */
|
|
3062
3192
|
this.entitiesToSelect = computed(() => {
|
|
3063
3193
|
return this.#entities()
|
|
@@ -3069,11 +3199,12 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3069
3199
|
.sort((a, b) => {
|
|
3070
3200
|
return this.sortFn() ? this.sortFn()(a, b) : sortByAlphabet(a, b, this.displayExp());
|
|
3071
3201
|
});
|
|
3072
|
-
},
|
|
3202
|
+
}, /* @ts-ignore */
|
|
3203
|
+
...(ngDevMode ? [{ debugName: "entitiesToSelect" }] : /* istanbul ignore next */ []));
|
|
3073
3204
|
/** Additional control for entity */
|
|
3074
|
-
this.additionalControlTpl = contentChild(RtuiDynamicSelectorAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
|
|
3205
|
+
this.additionalControlTpl = contentChild(RtuiDynamicSelectorAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3075
3206
|
/** Custom item title template */
|
|
3076
|
-
this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleProjectionDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : {}), read: TemplateRef });
|
|
3207
|
+
this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleProjectionDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3077
3208
|
/** Selected entities ids for compare */
|
|
3078
3209
|
this.#selectedEntityIdsForCompare = [];
|
|
3079
3210
|
/** Indicates is selector init */
|
|
@@ -3257,8 +3388,8 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3257
3388
|
this.#onChanged(selectedEntityIds);
|
|
3258
3389
|
}
|
|
3259
3390
|
}
|
|
3260
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3261
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3391
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, providers: [
|
|
3262
3393
|
{
|
|
3263
3394
|
provide: NG_VALUE_ACCESSOR,
|
|
3264
3395
|
useExisting: forwardRef(() => RtuiDynamicSelectorComponent),
|
|
@@ -3275,7 +3406,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3275
3406
|
// components
|
|
3276
3407
|
RtuiMultiSelectorPopupComponent, selector: "rtui-multi-selector-popup", inputs: ["isMobile", "entitiesToSelect", "appearance", "keyExp", "displayExp", "searchTerm", "navigateButtonTitle", "navigateLink", "isSingleSelection", "isMultiToggleShown", "isSelectAllButtonShown", "loading", "fetching", "useNameBreaking", "isLazyLoad", "isLocalSearch", "pinnedKeys"], outputs: ["submitAction", "closeAction", "searchAction", "scrollAction", "temporarySelectAction"] }, { kind: "component", type: RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isMobile", "isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["isMobile", "keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3277
3408
|
}
|
|
3278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorComponent, decorators: [{
|
|
3279
3410
|
type: Component,
|
|
3280
3411
|
args: [{ selector: 'rtui-dynamic-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3281
3412
|
ReactiveFormsModule,
|
|
@@ -3313,10 +3444,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3313
3444
|
|
|
3314
3445
|
/** Directive for row actions located outside a row menu button */
|
|
3315
3446
|
class RtuiDynamicInputAdditionalControlDirective {
|
|
3316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3317
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3447
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3448
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicInputAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicInputAdditionalControlDirective]", ngImport: i0 }); }
|
|
3318
3449
|
}
|
|
3319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3450
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, decorators: [{
|
|
3320
3451
|
type: Directive,
|
|
3321
3452
|
args: [{
|
|
3322
3453
|
selector: '[rtuiDynamicInputAdditionalControlDirective]',
|
|
@@ -3332,25 +3463,30 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3332
3463
|
controlForUi: this.#fb.control(null), // used only for UI
|
|
3333
3464
|
});
|
|
3334
3465
|
/** Indicates is placeholder shown */
|
|
3335
|
-
this.isPlaceholderShown = model(true,
|
|
3466
|
+
this.isPlaceholderShown = model(true, /* @ts-ignore */
|
|
3467
|
+
...(ngDevMode ? [{ debugName: "isPlaceholderShown" }] : /* istanbul ignore next */ []));
|
|
3336
3468
|
/** Indicates is inputs-editable */
|
|
3337
|
-
this.isInputsEditable = input(false, { ...(ngDevMode ? { debugName: "isInputsEditable" } : {}), transform: booleanAttribute });
|
|
3469
|
+
this.isInputsEditable = input(false, { ...(ngDevMode ? { debugName: "isInputsEditable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3338
3470
|
/** Input label */
|
|
3339
|
-
this.inputLabel = input('', { ...(ngDevMode ? { debugName: "inputLabel" } : {}), transform: transformStringInput });
|
|
3471
|
+
this.inputLabel = input('', { ...(ngDevMode ? { debugName: "inputLabel" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
3340
3472
|
/** Input placeholder */
|
|
3341
|
-
this.inputPlaceholder = input('', { ...(ngDevMode ? { debugName: "inputPlaceholder" } : {}), transform: transformStringInput });
|
|
3473
|
+
this.inputPlaceholder = input('', { ...(ngDevMode ? { debugName: "inputPlaceholder" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
3342
3474
|
/** Entity keys that can't be changed */
|
|
3343
|
-
this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
|
|
3475
|
+
this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
3344
3476
|
/** Array of selected entities */
|
|
3345
|
-
this.selectedEntities = signal([],
|
|
3477
|
+
this.selectedEntities = signal([], /* @ts-ignore */
|
|
3478
|
+
...(ngDevMode ? [{ debugName: "selectedEntities" }] : /* istanbul ignore next */ []));
|
|
3346
3479
|
/** Indicates is input control shown */
|
|
3347
|
-
this.isInputControlShown = signal(false,
|
|
3480
|
+
this.isInputControlShown = signal(false, /* @ts-ignore */
|
|
3481
|
+
...(ngDevMode ? [{ debugName: "isInputControlShown" }] : /* istanbul ignore next */ []));
|
|
3348
3482
|
/** Indicates the reset changes button is disabled */
|
|
3349
|
-
this.isResetButtonDisabled = signal(false,
|
|
3483
|
+
this.isResetButtonDisabled = signal(false, /* @ts-ignore */
|
|
3484
|
+
...(ngDevMode ? [{ debugName: "isResetButtonDisabled" }] : /* istanbul ignore next */ []));
|
|
3350
3485
|
/** Initial entities */
|
|
3351
|
-
this.#initialEntities = signal([],
|
|
3486
|
+
this.#initialEntities = signal([], /* @ts-ignore */
|
|
3487
|
+
...(ngDevMode ? [{ debugName: "#initialEntities" }] : /* istanbul ignore next */ []));
|
|
3352
3488
|
/** Additional control for entity */
|
|
3353
|
-
this.additionalControlTpl = contentChild(RtuiDynamicInputAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
|
|
3489
|
+
this.additionalControlTpl = contentChild(RtuiDynamicInputAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3354
3490
|
this.#onTouched = noop;
|
|
3355
3491
|
this.#onChanged = noop;
|
|
3356
3492
|
}
|
|
@@ -3462,8 +3598,8 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3462
3598
|
#setResetListButtonState(value) {
|
|
3463
3599
|
this.isResetButtonDisabled.set(areArraysEqual(this.#initialEntities(), value));
|
|
3464
3600
|
}
|
|
3465
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3466
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicInputComponent, isStandalone: true, selector: "rtui-dynamic-input", inputs: { isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, isInputsEditable: { classPropertyName: "isInputsEditable", publicName: "isInputsEditable", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPlaceholderShown: "isPlaceholderShownChange" }, providers: [
|
|
3467
3603
|
{
|
|
3468
3604
|
provide: NG_VALUE_ACCESSOR,
|
|
3469
3605
|
useExisting: forwardRef(() => RtuiDynamicInputComponent),
|
|
@@ -3474,7 +3610,7 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3474
3610
|
useExisting: RtuiDynamicInputComponent,
|
|
3475
3611
|
multi: true,
|
|
3476
3612
|
},
|
|
3477
|
-
], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <ng-container rtBlock=\"rtui-dynamic-selector\">\n @if (isPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n [icon]=\"placeholderIcon()\"\n [description]=\"placeholderDescription()\"\n [buttonTitle]=\"buttonTitle()\"\n [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n (submitAction)=\"hidePlaceholder()\" />\n } @else {\n <rtui-dynamic-selector-selected-list\n keyExp=\"id\"\n displayExp=\"id\"\n [appearance]=\"appearance()\"\n [isMobile]=\"isMobile()\"\n [selectedEntities]=\"selectedEntities()\"\n [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n [isListDraggable]=\"isListDraggable()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n [isItemsEditable]=\"isInputsEditable()\"\n (changeValueAction)=\"changeEntity($event)\"\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 </rtui-dynamic-selector-selected-list>\n\n @if (isInputControlShown()) {\n <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n <mat-label>{{ inputLabel() }}</mat-label>\n\n <input\n matInput\n type=\"text\"\n formControlName=\"controlForUi\"\n [placeholder]=\"inputPlaceholder()\"\n (keydown.enter)=\"onAddEntity()\"\n (focusout)=\"onAddEntity()\" />\n </mat-form-field>\n }\n\n <div rtElem=\"actions\">\n @if (!isInputControlShown() && !isSingleSelection()) {\n <button type=\"button\" class=\"c-button c-button--txt-base--size-sm\" (click)=\"showSelectionControl()\">\n {{ buttonTitle() }}\n </button>\n }\n\n <rtui-dynamic-selector-list-actions\n [isMobile]=\"isMobile()\"\n [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n (resetAction)=\"resetList()\"\n (clearAction)=\"clearList()\" />\n </div>\n }\n </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: "component", type:
|
|
3613
|
+
], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <ng-container rtBlock=\"rtui-dynamic-selector\">\n @if (isPlaceholderShown()) {\n <rtui-dynamic-selector-placeholder\n [icon]=\"placeholderIcon()\"\n [description]=\"placeholderDescription()\"\n [buttonTitle]=\"buttonTitle()\"\n [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n (submitAction)=\"hidePlaceholder()\" />\n } @else {\n <rtui-dynamic-selector-selected-list\n keyExp=\"id\"\n displayExp=\"id\"\n [appearance]=\"appearance()\"\n [isMobile]=\"isMobile()\"\n [selectedEntities]=\"selectedEntities()\"\n [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n [isListDraggable]=\"isListDraggable()\"\n [useNameBreaking]=\"useNameBreaking()\"\n [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n [isItemsEditable]=\"isInputsEditable()\"\n (changeValueAction)=\"changeEntity($event)\"\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 </rtui-dynamic-selector-selected-list>\n\n @if (isInputControlShown()) {\n <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n <mat-label>{{ inputLabel() }}</mat-label>\n\n <input\n matInput\n type=\"text\"\n formControlName=\"controlForUi\"\n [placeholder]=\"inputPlaceholder()\"\n (keydown.enter)=\"onAddEntity()\"\n (focusout)=\"onAddEntity()\" />\n </mat-form-field>\n }\n\n <div rtElem=\"actions\">\n @if (!isInputControlShown() && !isSingleSelection()) {\n <button type=\"button\" class=\"c-button c-button--txt-base--size-sm\" (click)=\"showSelectionControl()\">\n {{ buttonTitle() }}\n </button>\n }\n\n <rtui-dynamic-selector-list-actions\n [isMobile]=\"isMobile()\"\n [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n (resetAction)=\"resetList()\"\n (clearAction)=\"clearList()\" />\n </div>\n }\n </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "component", type:
|
|
3478
3614
|
// material
|
|
3479
3615
|
MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { 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:
|
|
3480
3616
|
// directives
|
|
@@ -3482,7 +3618,7 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
|
|
|
3482
3618
|
// components
|
|
3483
3619
|
RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isMobile", "isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["isMobile", "keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3484
3620
|
}
|
|
3485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputComponent, decorators: [{
|
|
3486
3622
|
type: Component,
|
|
3487
3623
|
args: [{ selector: 'rtui-dynamic-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3488
3624
|
NgTemplateOutlet,
|
|
@@ -3526,10 +3662,12 @@ class RtTableConfigAsideComponent {
|
|
|
3526
3662
|
columns: this.#fb.nonNullable.control([]),
|
|
3527
3663
|
});
|
|
3528
3664
|
this.asideRef = inject(ASIDE_REF);
|
|
3529
|
-
this.selectedColumns = signal(this.asideRef.data.columns,
|
|
3665
|
+
this.selectedColumns = signal(this.asideRef.data.columns, /* @ts-ignore */
|
|
3666
|
+
...(ngDevMode ? [{ debugName: "selectedColumns" }] : /* istanbul ignore next */ []));
|
|
3530
3667
|
this.isMobile = computed(() => {
|
|
3531
3668
|
return !!this.#breakpointService.isMobile();
|
|
3532
|
-
},
|
|
3669
|
+
}, /* @ts-ignore */
|
|
3670
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
3533
3671
|
this.isVisibilityChanged = computed(() => {
|
|
3534
3672
|
const initValues = this.asideRef.data.columns
|
|
3535
3673
|
.filter((el) => el.hidden)
|
|
@@ -3538,12 +3676,14 @@ class RtTableConfigAsideComponent {
|
|
|
3538
3676
|
.filter((el) => el.hidden)
|
|
3539
3677
|
.map((el) => el.propName);
|
|
3540
3678
|
return !areArraysEqual(initValues.sort(), currentValues.sort());
|
|
3541
|
-
},
|
|
3679
|
+
}, /* @ts-ignore */
|
|
3680
|
+
...(ngDevMode ? [{ debugName: "isVisibilityChanged" }] : /* istanbul ignore next */ []));
|
|
3542
3681
|
this.isOrderChanged = computed(() => {
|
|
3543
3682
|
const initValues = this.asideRef.data.columns.map((el) => el.propName);
|
|
3544
3683
|
const currentValues = this.selectedColumns().map((el) => el.propName);
|
|
3545
3684
|
return !areArraysEqual(initValues, currentValues);
|
|
3546
|
-
},
|
|
3685
|
+
}, /* @ts-ignore */
|
|
3686
|
+
...(ngDevMode ? [{ debugName: "isOrderChanged" }] : /* istanbul ignore next */ []));
|
|
3547
3687
|
}
|
|
3548
3688
|
#breakpointService;
|
|
3549
3689
|
#destroyRef;
|
|
@@ -3582,14 +3722,14 @@ class RtTableConfigAsideComponent {
|
|
|
3582
3722
|
});
|
|
3583
3723
|
});
|
|
3584
3724
|
}
|
|
3585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3725
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3726
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", 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:
|
|
3587
3727
|
// directives
|
|
3588
3728
|
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:
|
|
3589
3729
|
// standalone components
|
|
3590
3730
|
RtuiAsideContainerComponent, selector: "rtui-aside-container", inputs: ["title", "isMobile", "isSubmitButtonDisabled", "isFooterShown", "pending", "isRequestErrorShown", "headerActionsButtons", "requestError", "submitButtonTitle", "cancelButtonTitle", "submitButtonTooltip"], outputs: ["submitAction", "cancelAction", "headerAction"] }, { kind: "component", type: RtuiDynamicSelectorComponent, selector: "rtui-dynamic-selector", inputs: ["keyExp", "displayExp", "entities", "navigateButtonTitle", "navigateLink", "readonlyEntitiesKeys", "chosenEntities", "isSelectionAvailable", "isPlaceholderShown", "loading", "pending", "fetching", "isLazyLoad", "isLocalSearch", "isMultiToggleShown", "isSelectAllButtonShown", "isOpenPopupButtonShown", "searchTerm", "additionalControlChanged", "sortFn"], outputs: ["chosenEntitiesChange", "searchAction", "scrollAction", "temporarySelectAction", "resetAction", "selectionChangeAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3591
3731
|
}
|
|
3592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigAsideComponent, decorators: [{
|
|
3593
3733
|
type: Component,
|
|
3594
3734
|
args: [{ selector: 'rtui-test-aside', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3595
3735
|
ReactiveFormsModule,
|
|
@@ -3610,20 +3750,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3610
3750
|
}] });
|
|
3611
3751
|
|
|
3612
3752
|
class RtuiTableToolbarSelectorsDirective {
|
|
3613
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3614
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3753
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3754
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiTableToolbarSelectorsDirective]", ngImport: i0 }); }
|
|
3615
3755
|
}
|
|
3616
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3756
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, decorators: [{
|
|
3617
3757
|
type: Directive,
|
|
3618
3758
|
args: [{
|
|
3619
3759
|
selector: '[rtuiTableToolbarSelectorsDirective]',
|
|
3620
3760
|
}]
|
|
3621
3761
|
}] });
|
|
3622
3762
|
class RtuiTableToolbarActionsDirective {
|
|
3623
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3624
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3764
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableToolbarActionsDirective, isStandalone: true, selector: "[rtuiTableToolbarActionsDirective]", ngImport: i0 }); }
|
|
3625
3765
|
}
|
|
3626
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarActionsDirective, decorators: [{
|
|
3627
3767
|
type: Directive,
|
|
3628
3768
|
args: [{
|
|
3629
3769
|
selector: '[rtuiTableToolbarActionsDirective]',
|
|
@@ -3641,37 +3781,41 @@ class RtuiTableContainerComponent {
|
|
|
3641
3781
|
this.#asideService = inject(RtAsideService);
|
|
3642
3782
|
this.#tableConfigService = inject(RtTableConfigService);
|
|
3643
3783
|
this.#style = this.#documentRef?.documentElement?.style;
|
|
3644
|
-
this.appearance = input.required(
|
|
3784
|
+
this.appearance = input.required(/* @ts-ignore */
|
|
3785
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
3645
3786
|
/** Table config storage key */
|
|
3646
|
-
this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : {}), transform: transformStringInput });
|
|
3787
|
+
this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
3647
3788
|
/** Current page model from store */
|
|
3648
|
-
this.pageModel = input.required(
|
|
3789
|
+
this.pageModel = input.required(/* @ts-ignore */
|
|
3790
|
+
...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
|
|
3649
3791
|
/** Indicates is mobile view */
|
|
3650
|
-
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
3792
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3651
3793
|
/** Indicates is loading in progress */
|
|
3652
|
-
this.loading = input.required({ ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
3794
|
+
this.loading = input.required({ ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3653
3795
|
/** Indicates is fetching in progress */
|
|
3654
|
-
this.fetching = input.required({ ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
|
|
3796
|
+
this.fetching = input.required({ ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3655
3797
|
/** Indicates is placeholder shown */
|
|
3656
|
-
this.isPlaceholderShown = input.required({ ...(ngDevMode ? { debugName: "isPlaceholderShown" } : {}), transform: booleanAttribute });
|
|
3798
|
+
this.isPlaceholderShown = input.required({ ...(ngDevMode ? { debugName: "isPlaceholderShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3657
3799
|
/** Indicates is pagination shown */
|
|
3658
|
-
this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : {}), transform: booleanAttribute });
|
|
3800
|
+
this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3659
3801
|
/** Indicates is the refresh button shown */
|
|
3660
|
-
this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : {}), transform: booleanAttribute });
|
|
3802
|
+
this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3661
3803
|
/** Indicates is a table config button shown */
|
|
3662
|
-
this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : {}), transform: booleanAttribute });
|
|
3804
|
+
this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3663
3805
|
/** Indicates is toolbar buttons outlined */
|
|
3664
|
-
this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : {}), transform: booleanAttribute });
|
|
3806
|
+
this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3665
3807
|
/** Indicates is filters shown */
|
|
3666
|
-
this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : {}), transform: booleanAttribute });
|
|
3808
|
+
this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3667
3809
|
/** Indicates is filters empty */
|
|
3668
|
-
this.isFiltersEmpty = input(false, { ...(ngDevMode ? { debugName: "isFiltersEmpty" } : {}), transform: booleanAttribute });
|
|
3810
|
+
this.isFiltersEmpty = input(false, { ...(ngDevMode ? { debugName: "isFiltersEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3669
3811
|
/** Current search term from store */
|
|
3670
|
-
this.searchTerm = input('', { ...(ngDevMode ? { debugName: "searchTerm" } : {}), transform: (value) => (isString(value) ? value.trim() : '') });
|
|
3812
|
+
this.searchTerm = input('', { ...(ngDevMode ? { debugName: "searchTerm" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value.trim() : '') });
|
|
3671
3813
|
/** Current placeholder icon */
|
|
3672
|
-
this.placeholderIcon = input('search',
|
|
3814
|
+
this.placeholderIcon = input('search', /* @ts-ignore */
|
|
3815
|
+
...(ngDevMode ? [{ debugName: "placeholderIcon" }] : /* istanbul ignore next */ []));
|
|
3673
3816
|
/** Current placeholder title */
|
|
3674
|
-
this.placeholderTitle = input('No Data Found',
|
|
3817
|
+
this.placeholderTitle = input('No Data Found', /* @ts-ignore */
|
|
3818
|
+
...(ngDevMode ? [{ debugName: "placeholderTitle" }] : /* istanbul ignore next */ []));
|
|
3675
3819
|
/** Indicates is a small tablet view */
|
|
3676
3820
|
this.isSmallTablet = this.#breakpointService.isSmallTablet;
|
|
3677
3821
|
/** Config for table */
|
|
@@ -3685,22 +3829,28 @@ class RtuiTableContainerComponent {
|
|
|
3685
3829
|
/** Clear filters output action */
|
|
3686
3830
|
this.clearFiltersAction = output();
|
|
3687
3831
|
/** Toolbar selectors template */
|
|
3688
|
-
this.toolbarSelectorsTpl = contentChild(RtuiTableToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : {}), read: TemplateRef });
|
|
3832
|
+
this.toolbarSelectorsTpl = contentChild(RtuiTableToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3689
3833
|
/** Toolbar actions template */
|
|
3690
|
-
this.toolbarActionsTpl = contentChild(RtuiTableToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : {}), read: TemplateRef });
|
|
3834
|
+
this.toolbarActionsTpl = contentChild(RtuiTableToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3691
3835
|
/** Fields specified by the directive */
|
|
3692
3836
|
/** Indicates is multiselect mod enabled */
|
|
3693
|
-
this.isMultiSelect = signal(false,
|
|
3837
|
+
this.isMultiSelect = signal(false, /* @ts-ignore */
|
|
3838
|
+
...(ngDevMode ? [{ debugName: "isMultiSelect" }] : /* istanbul ignore next */ []));
|
|
3694
3839
|
/** Indicates is 'Select All' selector shown */
|
|
3695
|
-
this.isSelectAllSelectorShown = signal(true,
|
|
3840
|
+
this.isSelectAllSelectorShown = signal(true, /* @ts-ignore */
|
|
3841
|
+
...(ngDevMode ? [{ debugName: "isSelectAllSelectorShown" }] : /* istanbul ignore next */ []));
|
|
3696
3842
|
/** Indicates is 'Select All' selector disabled */
|
|
3697
|
-
this.isSelectAllSelectorDisabled = signal(false,
|
|
3843
|
+
this.isSelectAllSelectorDisabled = signal(false, /* @ts-ignore */
|
|
3844
|
+
...(ngDevMode ? [{ debugName: "isSelectAllSelectorDisabled" }] : /* istanbul ignore next */ []));
|
|
3698
3845
|
/** Indicates is all entities selected */
|
|
3699
|
-
this.isAllEntitiesSelected = signal(false,
|
|
3846
|
+
this.isAllEntitiesSelected = signal(false, /* @ts-ignore */
|
|
3847
|
+
...(ngDevMode ? [{ debugName: "isAllEntitiesSelected" }] : /* istanbul ignore next */ []));
|
|
3700
3848
|
/** Indicates is all entities indeterminate */
|
|
3701
|
-
this.isAllEntitiesIndeterminate = signal(false,
|
|
3849
|
+
this.isAllEntitiesIndeterminate = signal(false, /* @ts-ignore */
|
|
3850
|
+
...(ngDevMode ? [{ debugName: "isAllEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
|
|
3702
3851
|
/** Current selected entities count */
|
|
3703
|
-
this.selectedEntitiesCount = signal(0,
|
|
3852
|
+
this.selectedEntitiesCount = signal(0, /* @ts-ignore */
|
|
3853
|
+
...(ngDevMode ? [{ debugName: "selectedEntitiesCount" }] : /* istanbul ignore next */ []));
|
|
3704
3854
|
/** Control for search */
|
|
3705
3855
|
this.searchControl = new FormControl(null);
|
|
3706
3856
|
/** Empty method, set in selectors directive */
|
|
@@ -3776,8 +3926,8 @@ class RtuiTableContainerComponent {
|
|
|
3776
3926
|
this.#style.setProperty('--rt-table-container-content-scrollbar-horizontal-height', safeHorizontalValue);
|
|
3777
3927
|
}
|
|
3778
3928
|
}
|
|
3779
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3780
|
-
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:
|
|
3929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableContainerComponent, isStandalone: true, selector: "rtui-table-container", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
3781
3931
|
// Material
|
|
3782
3932
|
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:
|
|
3783
3933
|
// Standalone components
|
|
@@ -3787,7 +3937,7 @@ class RtuiTableContainerComponent {
|
|
|
3787
3937
|
// Directives
|
|
3788
3938
|
RtuiToolbarRightDirective, selector: "[rtuiToolbarRight]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtuiToolbarLeftDirective, selector: "[rtuiToolbarLeft]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3789
3939
|
}
|
|
3790
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableContainerComponent, decorators: [{
|
|
3791
3941
|
type: Component,
|
|
3792
3942
|
args: [{ selector: 'rtui-table-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3793
3943
|
ReactiveFormsModule,
|
|
@@ -3827,10 +3977,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3827
3977
|
|
|
3828
3978
|
/** Directive for selectors of the toolbar located on the left side */
|
|
3829
3979
|
class RtuiDynamicListToolbarSelectorsDirective {
|
|
3830
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3831
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3980
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3981
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarSelectorsDirective]", ngImport: i0 }); }
|
|
3832
3982
|
}
|
|
3833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, decorators: [{
|
|
3834
3984
|
type: Directive,
|
|
3835
3985
|
args: [{
|
|
3836
3986
|
selector: '[rtuiDynamicListToolbarSelectorsDirective]',
|
|
@@ -3838,10 +3988,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3838
3988
|
}] });
|
|
3839
3989
|
/** Directive for actions of the toolbar located on the right side */
|
|
3840
3990
|
class RtuiDynamicListToolbarActionsDirective {
|
|
3841
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3842
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3991
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3992
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListToolbarActionsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarActionsDirective]", ngImport: i0 }); }
|
|
3843
3993
|
}
|
|
3844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, decorators: [{
|
|
3845
3995
|
type: Directive,
|
|
3846
3996
|
args: [{
|
|
3847
3997
|
selector: '[rtuiDynamicListToolbarActionsDirective]',
|
|
@@ -3850,12 +4000,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3850
4000
|
/** Directive for custom table cells */
|
|
3851
4001
|
class RtuiDynamicListCustomTableCellsDirective {
|
|
3852
4002
|
constructor() {
|
|
3853
|
-
this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : {}), alias: 'rtuiDynamicListCustomTableCellsDirective' });
|
|
4003
|
+
this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : /* istanbul ignore next */ {}), alias: 'rtuiDynamicListCustomTableCellsDirective' });
|
|
3854
4004
|
}
|
|
3855
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3856
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
4005
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4006
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicListCustomTableCellsDirective, isStandalone: true, selector: "[rtuiDynamicListCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiDynamicListCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
3857
4007
|
}
|
|
3858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, decorators: [{
|
|
3859
4009
|
type: Directive,
|
|
3860
4010
|
args: [{
|
|
3861
4011
|
selector: '[rtuiDynamicListCustomTableCellsDirective]',
|
|
@@ -3863,10 +4013,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3863
4013
|
}], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtuiDynamicListCustomTableCellsDirective", required: true }] }] } });
|
|
3864
4014
|
/** Directive for row actions located inside a row menu button */
|
|
3865
4015
|
class RtuiDynamicListRowActionsDirective {
|
|
3866
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3867
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4016
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4017
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListRowActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowActionsDirective]", ngImport: i0 }); }
|
|
3868
4018
|
}
|
|
3869
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowActionsDirective, decorators: [{
|
|
3870
4020
|
type: Directive,
|
|
3871
4021
|
args: [{
|
|
3872
4022
|
selector: '[rtuiDynamicListRowActionsDirective]',
|
|
@@ -3874,10 +4024,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3874
4024
|
}] });
|
|
3875
4025
|
/** Directive for row actions located outside a row menu button */
|
|
3876
4026
|
class RtuiDynamicListRowAdditionalActionsDirective {
|
|
3877
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3878
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4028
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListRowAdditionalActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowAdditionalActionsDirective]", ngImport: i0 }); }
|
|
3879
4029
|
}
|
|
3880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4030
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, decorators: [{
|
|
3881
4031
|
type: Directive,
|
|
3882
4032
|
args: [{
|
|
3883
4033
|
selector: '[rtuiDynamicListRowAdditionalActionsDirective]',
|
|
@@ -3886,41 +4036,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3886
4036
|
class RtuiDynamicListComponent {
|
|
3887
4037
|
constructor() {
|
|
3888
4038
|
/** Table config storage key */
|
|
3889
|
-
this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : {}), transform: transformStringInput });
|
|
4039
|
+
this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
3890
4040
|
/** Indicates is mobile view */
|
|
3891
|
-
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
4041
|
+
this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3892
4042
|
/** Indicates is loading in progress */
|
|
3893
|
-
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
4043
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3894
4044
|
/** Indicates is fetching in progress */
|
|
3895
|
-
this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
|
|
4045
|
+
this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3896
4046
|
/** Indicates are table rows clickable */
|
|
3897
|
-
this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : {}), transform: booleanAttribute });
|
|
4047
|
+
this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3898
4048
|
/** Indicates is pagination shown */
|
|
3899
|
-
this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : {}), transform: booleanAttribute });
|
|
4049
|
+
this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3900
4050
|
/** Indicates is the refresh button shown */
|
|
3901
|
-
this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : {}), transform: booleanAttribute });
|
|
4051
|
+
this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3902
4052
|
/** Indicates is a table config button shown */
|
|
3903
|
-
this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : {}), transform: booleanAttribute });
|
|
4053
|
+
this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3904
4054
|
/** Indicates is toolbar buttons outlined */
|
|
3905
|
-
this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : {}), transform: booleanAttribute });
|
|
4055
|
+
this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3906
4056
|
/** Key of ENTITY_TYPE for compare entities */
|
|
3907
|
-
this.keyExp = input('id',
|
|
4057
|
+
this.keyExp = input('id', /* @ts-ignore */
|
|
4058
|
+
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
3908
4059
|
/** List of entities */
|
|
3909
|
-
this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : {}), transform: (value) => transformArrayInput(value) });
|
|
4060
|
+
this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
3910
4061
|
/** Current page model from store */
|
|
3911
|
-
this.pageModel = input.required(
|
|
4062
|
+
this.pageModel = input.required(/* @ts-ignore */
|
|
4063
|
+
...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
|
|
3912
4064
|
/** Current search term from store */
|
|
3913
|
-
this.searchTerm = input.required(
|
|
4065
|
+
this.searchTerm = input.required(/* @ts-ignore */
|
|
4066
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
3914
4067
|
/** Current sort model from store */
|
|
3915
|
-
this.currentSortModel = input.required(
|
|
4068
|
+
this.currentSortModel = input.required(/* @ts-ignore */
|
|
4069
|
+
...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
|
|
3916
4070
|
/** Inputs appearance */
|
|
3917
|
-
this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
|
|
4071
|
+
this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
|
|
3918
4072
|
/** Filter inputs appearance */
|
|
3919
|
-
this.filterAppearance = input('outline',
|
|
4073
|
+
this.filterAppearance = input('outline', /* @ts-ignore */
|
|
4074
|
+
...(ngDevMode ? [{ debugName: "filterAppearance" }] : /* istanbul ignore next */ []));
|
|
3920
4075
|
/** Current filter model from store */
|
|
3921
|
-
this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : {}), transform: (value) => transformArrayInput(value) });
|
|
4076
|
+
this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
|
|
3922
4077
|
/** Indicates is filters shown */
|
|
3923
|
-
this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : {}), transform: booleanAttribute });
|
|
4078
|
+
this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3924
4079
|
/** Sort model change output action */
|
|
3925
4080
|
this.sortChange = output();
|
|
3926
4081
|
/** Page model change output action */
|
|
@@ -3938,19 +4093,22 @@ class RtuiDynamicListComponent {
|
|
|
3938
4093
|
/** Filter change output action */
|
|
3939
4094
|
this.filterChange = output();
|
|
3940
4095
|
/** Toolbar selectors template */
|
|
3941
|
-
this.toolbarSelectorsTpl = contentChild(RtuiDynamicListToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : {}), read: TemplateRef });
|
|
4096
|
+
this.toolbarSelectorsTpl = contentChild(RtuiDynamicListToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3942
4097
|
/** Toolbar actions template */
|
|
3943
|
-
this.toolbarActionsTpl = contentChild(RtuiDynamicListToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : {}), read: TemplateRef });
|
|
4098
|
+
this.toolbarActionsTpl = contentChild(RtuiDynamicListToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3944
4099
|
/** Custom cells template */
|
|
3945
|
-
this.customCellsTpl = contentChild(RtuiDynamicListCustomTableCellsDirective,
|
|
4100
|
+
this.customCellsTpl = contentChild(RtuiDynamicListCustomTableCellsDirective, /* @ts-ignore */
|
|
4101
|
+
...(ngDevMode ? [{ debugName: "customCellsTpl" }] : /* istanbul ignore next */ []));
|
|
3946
4102
|
/** Row actions template */
|
|
3947
|
-
this.rowActionsTpl = contentChild(RtuiDynamicListRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : {}), read: TemplateRef });
|
|
4103
|
+
this.rowActionsTpl = contentChild(RtuiDynamicListRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3948
4104
|
/** Additional row actions template */
|
|
3949
|
-
this.additionalRowActionsTpl = contentChild(RtuiDynamicListRowAdditionalActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : {}), read: TemplateRef });
|
|
4105
|
+
this.additionalRowActionsTpl = contentChild(RtuiDynamicListRowAdditionalActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
3950
4106
|
/** Table container for selectors directive usage */
|
|
3951
|
-
this.tableContainerTpl = viewChild(RtuiTableContainerComponent,
|
|
4107
|
+
this.tableContainerTpl = viewChild(RtuiTableContainerComponent, /* @ts-ignore */
|
|
4108
|
+
...(ngDevMode ? [{ debugName: "tableContainerTpl" }] : /* istanbul ignore next */ []));
|
|
3952
4109
|
/** Table selector for selectors directive usage */
|
|
3953
|
-
this.tableTpl = viewChild(RtuiTableComponent,
|
|
4110
|
+
this.tableTpl = viewChild(RtuiTableComponent, /* @ts-ignore */
|
|
4111
|
+
...(ngDevMode ? [{ debugName: "tableTpl" }] : /* istanbul ignore next */ []));
|
|
3954
4112
|
}
|
|
3955
4113
|
/** Search change output action */
|
|
3956
4114
|
onSearchChange(value) {
|
|
@@ -3984,14 +4142,14 @@ class RtuiDynamicListComponent {
|
|
|
3984
4142
|
onRowDoubleClick(row) {
|
|
3985
4143
|
this.rowDoubleClick.emit(row);
|
|
3986
4144
|
}
|
|
3987
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3988
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4146
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
3989
4147
|
// Directives
|
|
3990
4148
|
RtuiTableToolbarActionsDirective, selector: "[rtuiTableToolbarActionsDirective]" }, { kind: "directive", type: RtuiTableRowActionsDirective, selector: "[rtuiTabletRowActionsDirective]" }, { kind: "directive", type: RtuiTableToolbarSelectorsDirective, selector: "[rtuiTableToolbarSelectorsDirective]" }, { kind: "directive", type: RtuiTableAdditionalRowActionsDirective, selector: "[rtuiTableAdditionalRowActionsDirective]" }, { kind: "component", type:
|
|
3991
4149
|
// Ui-kit
|
|
3992
4150
|
RtuiTableContainerComponent, selector: "rtui-table-container", inputs: ["appearance", "tableConfigStorageKey", "pageModel", "isMobile", "loading", "fetching", "isPlaceholderShown", "isPaginationShown", "isRefreshButtonShown", "isTableConfigButtonShown", "isToolbarActionsIconsOutlined", "isFiltersShown", "isFiltersEmpty", "searchTerm", "placeholderIcon", "placeholderTitle"], outputs: ["pageModelChange", "searchChange", "refreshAction", "clearFiltersAction"] }, { kind: "component", type: RtuiTableComponent, selector: "rtui-table", inputs: ["isMobile", "isTableRowsClickable", "keyExp", "entities", "currentSortModel", "appearance", "filterAppearance", "filterModel", "isFiltersShown"], outputs: ["rowClick", "rowDoubleClick", "sortChange", "filterChange"] }, { kind: "directive", type: RtuiCustomTableCellsDirective, selector: "[rtuiCustomTableCellsDirective]", inputs: ["rtuiCustomTableCellsDirective"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3993
4151
|
}
|
|
3994
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListComponent, decorators: [{
|
|
3995
4153
|
type: Component,
|
|
3996
4154
|
args: [{ selector: 'rtui-dynamic-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3997
4155
|
NgTemplateOutlet,
|
|
@@ -4018,17 +4176,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4018
4176
|
class RtuiPopoverContainerComponent {
|
|
4019
4177
|
constructor() {
|
|
4020
4178
|
this.#sanitizer = inject(DomSanitizer);
|
|
4021
|
-
this.popoverTemplate = input(undefined, { ...(ngDevMode ? { debugName: "popoverTemplate" } : {}), transform: (value) => value ?? null });
|
|
4022
|
-
this.popoverClass = input(undefined, { ...(ngDevMode ? { debugName: "popoverClass" } : {}), transform: (value) => (isString(value) ? value : undefined) });
|
|
4179
|
+
this.popoverTemplate = input(undefined, { ...(ngDevMode ? { debugName: "popoverTemplate" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
|
|
4180
|
+
this.popoverClass = input(undefined, { ...(ngDevMode ? { debugName: "popoverClass" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value : undefined) });
|
|
4023
4181
|
}
|
|
4024
4182
|
#sanitizer;
|
|
4025
4183
|
get className() {
|
|
4026
4184
|
return this.#sanitizer.sanitize(1, this.popoverClass());
|
|
4027
4185
|
}
|
|
4028
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
4186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPopoverContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4187
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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 }); }
|
|
4030
4188
|
}
|
|
4031
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPopoverContainerComponent, decorators: [{
|
|
4032
4190
|
type: Component,
|
|
4033
4191
|
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"] }]
|
|
4034
4192
|
}], propDecorators: { popoverTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTemplate", required: false }] }], popoverClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverClass", required: false }] }], className: [{
|
|
@@ -4046,11 +4204,11 @@ class RtPopoverDirective {
|
|
|
4046
4204
|
this.#componentFactoryResolver = inject(ViewContainerRef);
|
|
4047
4205
|
this.#hasPopoverHover = false;
|
|
4048
4206
|
this.#hasHostHover = false;
|
|
4049
|
-
this.xOffset = input(0, { ...(ngDevMode ? { debugName: "xOffset" } : {}), transform: numberAttribute });
|
|
4050
|
-
this.yOffset = input(-20, { ...(ngDevMode ? { debugName: "yOffset" } : {}), transform: numberAttribute });
|
|
4051
|
-
this.trigger = input('hover', { ...(ngDevMode ? { debugName: "trigger" } : {}), transform: (value) => (value === 'click' ? 'click' : 'hover') });
|
|
4052
|
-
this.template = input(null, { ...(ngDevMode ? { debugName: "template" } : {}), transform: (value) => value || null });
|
|
4053
|
-
this.isMouseHoverAllowed = input(true, { ...(ngDevMode ? { debugName: "isMouseHoverAllowed" } : {}), transform: booleanAttribute });
|
|
4207
|
+
this.xOffset = input(0, { ...(ngDevMode ? { debugName: "xOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
4208
|
+
this.yOffset = input(-20, { ...(ngDevMode ? { debugName: "yOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
4209
|
+
this.trigger = input('hover', { ...(ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {}), transform: (value) => (value === 'click' ? 'click' : 'hover') });
|
|
4210
|
+
this.template = input(null, { ...(ngDevMode ? { debugName: "template" } : /* istanbul ignore next */ {}), transform: (value) => value || null });
|
|
4211
|
+
this.isMouseHoverAllowed = input(true, { ...(ngDevMode ? { debugName: "isMouseHoverAllowed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4054
4212
|
}
|
|
4055
4213
|
#windowRef;
|
|
4056
4214
|
#injector;
|
|
@@ -4156,10 +4314,10 @@ class RtPopoverDirective {
|
|
|
4156
4314
|
this.#popoverContainerRef = null;
|
|
4157
4315
|
}
|
|
4158
4316
|
}
|
|
4159
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4160
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
4317
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4318
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtPopoverDirective, isStandalone: true, selector: "[rtPopover]", inputs: { xOffset: { classPropertyName: "xOffset", publicName: "xOffset", isSignal: true, isRequired: false, transformFunction: null }, yOffset: { classPropertyName: "yOffset", publicName: "yOffset", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isMouseHoverAllowed: { classPropertyName: "isMouseHoverAllowed", publicName: "isMouseHoverAllowed", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onClick($event.target)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, providers: [PlatformService], ngImport: i0 }); }
|
|
4161
4319
|
}
|
|
4162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtPopoverDirective, decorators: [{
|
|
4163
4321
|
type: Directive,
|
|
4164
4322
|
args: [{
|
|
4165
4323
|
selector: '[rtPopover]',
|
|
@@ -4179,9 +4337,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4179
4337
|
class RtuiActionBarComponent {
|
|
4180
4338
|
constructor() {
|
|
4181
4339
|
this.#breakpointService = inject(BreakpointService);
|
|
4182
|
-
this.config = input.required(
|
|
4340
|
+
this.config = input.required(/* @ts-ignore */
|
|
4341
|
+
...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
4183
4342
|
this.closeAction = output();
|
|
4184
|
-
this.isTablet = computed(() => !!this.#breakpointService.isTablet(),
|
|
4343
|
+
this.isTablet = computed(() => !!this.#breakpointService.isTablet(), /* @ts-ignore */
|
|
4344
|
+
...(ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []));
|
|
4185
4345
|
}
|
|
4186
4346
|
#breakpointService;
|
|
4187
4347
|
onClose() {
|
|
@@ -4193,14 +4353,14 @@ class RtuiActionBarComponent {
|
|
|
4193
4353
|
this.onClose();
|
|
4194
4354
|
}
|
|
4195
4355
|
}
|
|
4196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4356
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
4198
4358
|
// material
|
|
4199
4359
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
4200
4360
|
// rt-tools
|
|
4201
4361
|
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["xOffset", "yOffset", "trigger", "template", "isMouseHoverAllowed"] }, { kind: "pipe", type: EmptyToDashPipe, name: "emptyToDash" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4202
4362
|
}
|
|
4203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4363
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarComponent, decorators: [{
|
|
4204
4364
|
type: Component,
|
|
4205
4365
|
args: [{ selector: 'rtui-action-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4206
4366
|
NgTemplateOutlet,
|
|
@@ -4218,7 +4378,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4218
4378
|
|
|
4219
4379
|
class RtActionBarService {
|
|
4220
4380
|
constructor() {
|
|
4221
|
-
this.config = signal({ buttons: [] },
|
|
4381
|
+
this.config = signal({ buttons: [] }, /* @ts-ignore */
|
|
4382
|
+
...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
4222
4383
|
}
|
|
4223
4384
|
setActions(buttons) {
|
|
4224
4385
|
this.config.set({ buttons });
|
|
@@ -4229,10 +4390,10 @@ class RtActionBarService {
|
|
|
4229
4390
|
closeActionBar() {
|
|
4230
4391
|
this.config.set({ ...this.config(), selected: 0, total: 0 });
|
|
4231
4392
|
}
|
|
4232
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4233
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtActionBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4394
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtActionBarService }); }
|
|
4234
4395
|
}
|
|
4235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtActionBarService, decorators: [{
|
|
4236
4397
|
type: Injectable
|
|
4237
4398
|
}] });
|
|
4238
4399
|
|
|
@@ -4245,8 +4406,8 @@ class RtuiActionBarContainerComponent {
|
|
|
4245
4406
|
closeBar() {
|
|
4246
4407
|
this.#actionBarService.closeActionBar();
|
|
4247
4408
|
}
|
|
4248
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4249
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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: [
|
|
4250
4411
|
trigger('barState', [
|
|
4251
4412
|
state('opened', style({ transform: 'translateY(0)' })),
|
|
4252
4413
|
transition('void => *', [
|
|
@@ -4264,11 +4425,11 @@ class RtuiActionBarContainerComponent {
|
|
|
4264
4425
|
])),
|
|
4265
4426
|
]),
|
|
4266
4427
|
]),
|
|
4267
|
-
] }); }
|
|
4428
|
+
], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4268
4429
|
}
|
|
4269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarContainerComponent, decorators: [{
|
|
4270
4431
|
type: Component,
|
|
4271
|
-
args: [{ selector: 'rtui-action-bar-container', imports: [RtuiActionBarComponent], animations: [
|
|
4432
|
+
args: [{ selector: 'rtui-action-bar-container', imports: [RtuiActionBarComponent], changeDetection: ChangeDetectionStrategy.Eager, animations: [
|
|
4272
4433
|
trigger('barState', [
|
|
4273
4434
|
state('opened', style({ transform: 'translateY(0)' })),
|
|
4274
4435
|
transition('void => *', [
|
|
@@ -4319,7 +4480,8 @@ class RtuiSnackBarComponent {
|
|
|
4319
4480
|
this.data = inject(MAT_SNACK_BAR_DATA);
|
|
4320
4481
|
this.#snackBarRef = inject((MatSnackBarRef));
|
|
4321
4482
|
this.#animationBuilder = inject(AnimationBuilder);
|
|
4322
|
-
this.progressTplRef = viewChild('progressTpl',
|
|
4483
|
+
this.progressTplRef = viewChild('progressTpl', /* @ts-ignore */
|
|
4484
|
+
...(ngDevMode ? [{ debugName: "progressTplRef" }] : /* istanbul ignore next */ []));
|
|
4323
4485
|
afterNextRender(() => {
|
|
4324
4486
|
if (this.data.isProgressBarShown && this.data.duration) {
|
|
4325
4487
|
this.#startAnimation();
|
|
@@ -4356,10 +4518,10 @@ class RtuiSnackBarComponent {
|
|
|
4356
4518
|
#resumeAnimation() {
|
|
4357
4519
|
this.player?.play();
|
|
4358
4520
|
}
|
|
4359
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4360
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4521
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4522
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
4361
4523
|
}
|
|
4362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4524
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSnackBarComponent, decorators: [{
|
|
4363
4525
|
type: Component,
|
|
4364
4526
|
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"] }]
|
|
4365
4527
|
}], ctorParameters: () => [], propDecorators: { progressTplRef: [{ type: i0.ViewChild, args: ['progressTpl', { isSignal: true }] }], onMouseOver: [{
|
|
@@ -4416,10 +4578,10 @@ class RtSnackBarService {
|
|
|
4416
4578
|
dismiss() {
|
|
4417
4579
|
this.#snackBar.dismiss();
|
|
4418
4580
|
}
|
|
4419
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4420
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4582
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSnackBarService, providedIn: 'root' }); }
|
|
4421
4583
|
}
|
|
4422
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSnackBarService, decorators: [{
|
|
4423
4585
|
type: Injectable,
|
|
4424
4586
|
args: [{
|
|
4425
4587
|
providedIn: 'root',
|
|
@@ -4503,14 +4665,21 @@ function getColorBasedOnBackground(backgroundColor) {
|
|
|
4503
4665
|
|
|
4504
4666
|
class RtuiInfoBadgeComponent {
|
|
4505
4667
|
constructor() {
|
|
4506
|
-
this.size = input.required(
|
|
4507
|
-
|
|
4508
|
-
this.
|
|
4509
|
-
|
|
4510
|
-
this.
|
|
4511
|
-
|
|
4512
|
-
this.
|
|
4513
|
-
|
|
4668
|
+
this.size = input.required(/* @ts-ignore */
|
|
4669
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4670
|
+
this.text = input.required(/* @ts-ignore */
|
|
4671
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
4672
|
+
this.glyph = input('', /* @ts-ignore */
|
|
4673
|
+
...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
|
|
4674
|
+
this.iconSide = input(POSITION_ENUM.RIGHT, /* @ts-ignore */
|
|
4675
|
+
...(ngDevMode ? [{ debugName: "iconSide" }] : /* istanbul ignore next */ []));
|
|
4676
|
+
this.isFontBold = input(false, /* @ts-ignore */
|
|
4677
|
+
...(ngDevMode ? [{ debugName: "isFontBold" }] : /* istanbul ignore next */ []));
|
|
4678
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4679
|
+
this.isTitleCollapsed = signal(false, /* @ts-ignore */
|
|
4680
|
+
...(ngDevMode ? [{ debugName: "isTitleCollapsed" }] : /* istanbul ignore next */ []));
|
|
4681
|
+
this.contentRef = viewChild('content', /* @ts-ignore */
|
|
4682
|
+
...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
|
|
4514
4683
|
}
|
|
4515
4684
|
get badgeClass() {
|
|
4516
4685
|
return {
|
|
@@ -4539,10 +4708,10 @@ class RtuiInfoBadgeComponent {
|
|
|
4539
4708
|
}
|
|
4540
4709
|
}
|
|
4541
4710
|
}
|
|
4542
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4543
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4711
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiInfoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
4544
4713
|
}
|
|
4545
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiInfoBadgeComponent, decorators: [{
|
|
4546
4715
|
type: Component,
|
|
4547
4716
|
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"] }]
|
|
4548
4717
|
}], 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 }] }] } });
|
|
@@ -4558,9 +4727,11 @@ var INFO_BADGE_TYPE_ENUM;
|
|
|
4558
4727
|
|
|
4559
4728
|
class RtuiFileUploadComponent {
|
|
4560
4729
|
constructor() {
|
|
4561
|
-
this.isIconOutlined = input(true,
|
|
4730
|
+
this.isIconOutlined = input(true, /* @ts-ignore */
|
|
4731
|
+
...(ngDevMode ? [{ debugName: "isIconOutlined" }] : /* istanbul ignore next */ []));
|
|
4562
4732
|
this.uploadFile = output();
|
|
4563
|
-
this.isDragOver = signal(false,
|
|
4733
|
+
this.isDragOver = signal(false, /* @ts-ignore */
|
|
4734
|
+
...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
|
|
4564
4735
|
}
|
|
4565
4736
|
onDragOver(event) {
|
|
4566
4737
|
event?.preventDefault();
|
|
@@ -4583,12 +4754,12 @@ class RtuiFileUploadComponent {
|
|
|
4583
4754
|
this.uploadFile.emit(input.files[0]);
|
|
4584
4755
|
}
|
|
4585
4756
|
}
|
|
4586
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4587
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
4757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4758
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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:
|
|
4588
4759
|
// directives
|
|
4589
4760
|
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 }); }
|
|
4590
4761
|
}
|
|
4591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiFileUploadComponent, decorators: [{
|
|
4592
4763
|
type: Component,
|
|
4593
4764
|
args: [{ selector: 'rtui-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4594
4765
|
MatButton,
|
|
@@ -4614,26 +4785,35 @@ class RtuiImageUploadComponent {
|
|
|
4614
4785
|
['jpeg']: 'jpeg',
|
|
4615
4786
|
['webp']: 'webp',
|
|
4616
4787
|
};
|
|
4617
|
-
this.#originalMimeType = signal(null,
|
|
4788
|
+
this.#originalMimeType = signal(null, /* @ts-ignore */
|
|
4789
|
+
...(ngDevMode ? [{ debugName: "#originalMimeType" }] : /* istanbul ignore next */ []));
|
|
4618
4790
|
this.imageFormat = computed(() => {
|
|
4619
4791
|
const type = this.#originalMimeType();
|
|
4620
4792
|
return this.#formats[type?.toLowerCase() || ''] || 'png';
|
|
4621
|
-
},
|
|
4622
|
-
|
|
4623
|
-
this.
|
|
4624
|
-
|
|
4625
|
-
this.
|
|
4626
|
-
this.
|
|
4627
|
-
this.
|
|
4628
|
-
this.
|
|
4629
|
-
this.
|
|
4630
|
-
this.
|
|
4631
|
-
this.
|
|
4632
|
-
this.
|
|
4633
|
-
this.
|
|
4634
|
-
|
|
4635
|
-
this.
|
|
4636
|
-
|
|
4793
|
+
}, /* @ts-ignore */
|
|
4794
|
+
...(ngDevMode ? [{ debugName: "imageFormat" }] : /* istanbul ignore next */ []));
|
|
4795
|
+
this.imageUrl = model.required(/* @ts-ignore */
|
|
4796
|
+
...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
4797
|
+
this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4798
|
+
this.fileName = input('image', { ...(ngDevMode ? { debugName: "fileName" } : /* istanbul ignore next */ {}), transform: transformStringInput });
|
|
4799
|
+
this.isActive = input(true, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4800
|
+
this.isSaveButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSaveButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4801
|
+
this.isDownloadButtonEnabled = input(true, { ...(ngDevMode ? { debugName: "isDownloadButtonEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4802
|
+
this.isTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "isTooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4803
|
+
this.isActionsShown = input(true, { ...(ngDevMode ? { debugName: "isActionsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4804
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4805
|
+
this.tooltip = input('', /* @ts-ignore */
|
|
4806
|
+
...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
4807
|
+
this.tooltipPosition = input('above', /* @ts-ignore */
|
|
4808
|
+
...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
4809
|
+
this.imageQuality = input(92, /* @ts-ignore */
|
|
4810
|
+
...(ngDevMode ? [{ debugName: "imageQuality" }] : /* istanbul ignore next */ []));
|
|
4811
|
+
this.originalImage = signal(undefined, /* @ts-ignore */
|
|
4812
|
+
...(ngDevMode ? [{ debugName: "originalImage" }] : /* istanbul ignore next */ []));
|
|
4813
|
+
this.croppedImage = signal(null, /* @ts-ignore */
|
|
4814
|
+
...(ngDevMode ? [{ debugName: "croppedImage" }] : /* istanbul ignore next */ []));
|
|
4815
|
+
this.tempImage = signal(null, /* @ts-ignore */
|
|
4816
|
+
...(ngDevMode ? [{ debugName: "tempImage" }] : /* istanbul ignore next */ []));
|
|
4637
4817
|
this.imageChanged = output();
|
|
4638
4818
|
this.save = output();
|
|
4639
4819
|
}
|
|
@@ -4688,8 +4868,8 @@ class RtuiImageUploadComponent {
|
|
|
4688
4868
|
}
|
|
4689
4869
|
this.save.emit();
|
|
4690
4870
|
}
|
|
4691
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4692
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4871
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4872
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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:
|
|
4693
4873
|
// material
|
|
4694
4874
|
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:
|
|
4695
4875
|
// cropper
|
|
@@ -4697,7 +4877,7 @@ class RtuiImageUploadComponent {
|
|
|
4697
4877
|
// rt-tools
|
|
4698
4878
|
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 }); }
|
|
4699
4879
|
}
|
|
4700
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiImageUploadComponent, decorators: [{
|
|
4701
4881
|
type: Component,
|
|
4702
4882
|
args: [{ selector: 'rtui-image-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4703
4883
|
// material
|
|
@@ -4776,8 +4956,10 @@ class RtThemeService {
|
|
|
4776
4956
|
this.#storage = inject(LOCAL_STORAGE, { optional: true }) ?? this.#document.defaultView?.localStorage ?? null;
|
|
4777
4957
|
// app-wide defaults (provideRtUi(config)); a persisted user choice always wins over them
|
|
4778
4958
|
this.#config = inject(RT_UI_CONFIG);
|
|
4779
|
-
this.#theme = signal(this.#restore(),
|
|
4780
|
-
|
|
4959
|
+
this.#theme = signal(this.#restore(), /* @ts-ignore */
|
|
4960
|
+
...(ngDevMode ? [{ debugName: "#theme" }] : /* istanbul ignore next */ []));
|
|
4961
|
+
this.#colorScheme = signal(this.#restoreScheme(), /* @ts-ignore */
|
|
4962
|
+
...(ngDevMode ? [{ debugName: "#colorScheme" }] : /* istanbul ignore next */ []));
|
|
4781
4963
|
this.theme = this.#theme.asReadonly();
|
|
4782
4964
|
this.colorScheme = this.#colorScheme.asReadonly();
|
|
4783
4965
|
effect(() => {
|
|
@@ -4906,10 +5088,10 @@ class RtThemeService {
|
|
|
4906
5088
|
}
|
|
4907
5089
|
return this.#theme() === RT_THEME_ENUM.DARK;
|
|
4908
5090
|
}
|
|
4909
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4910
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5091
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5092
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeService, providedIn: 'root' }); }
|
|
4911
5093
|
}
|
|
4912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5094
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeService, decorators: [{
|
|
4913
5095
|
type: Injectable,
|
|
4914
5096
|
args: [{ providedIn: 'root' }]
|
|
4915
5097
|
}], ctorParameters: () => [] });
|
|
@@ -4930,12 +5112,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4930
5112
|
*/
|
|
4931
5113
|
class RtThemeDirective {
|
|
4932
5114
|
constructor() {
|
|
4933
|
-
this.rtTheme = input('',
|
|
5115
|
+
this.rtTheme = input('', /* @ts-ignore */
|
|
5116
|
+
...(ngDevMode ? [{ debugName: "rtTheme" }] : /* istanbul ignore next */ []));
|
|
4934
5117
|
}
|
|
4935
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4936
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
5118
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5119
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtThemeDirective, isStandalone: true, selector: "[rtTheme]", inputs: { rtTheme: { classPropertyName: "rtTheme", publicName: "rtTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-rt-theme": "rtTheme() || null" } }, ngImport: i0 }); }
|
|
4937
5120
|
}
|
|
4938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeDirective, decorators: [{
|
|
4939
5122
|
type: Directive,
|
|
4940
5123
|
args: [{
|
|
4941
5124
|
standalone: true,
|