ngx-register-base 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -2
- package/esm2022/lib/components/filters/index.mjs +1 -3
- package/esm2022/lib/components/filters/register-table-filter.component.mjs +3 -3
- package/esm2022/lib/components/inputs/param-text/param-text.component.mjs +4 -9
- package/esm2022/lib/components/inputs/param-textarea/param-textarea.component.mjs +4 -8
- package/esm2022/lib/core/param/index.mjs +3 -1
- package/esm2022/lib/core/param/param-text-base.mjs +25 -0
- package/esm2022/lib/core/param/param.tokens.mjs +4 -0
- package/fesm2022/ngx-register-base.mjs +429 -416
- package/fesm2022/ngx-register-base.mjs.map +1 -1
- package/lib/components/filters/index.d.ts +0 -2
- package/lib/components/inputs/param-text/param-text.component.d.ts +3 -8
- package/lib/components/inputs/param-textarea/param-textarea.component.d.ts +3 -7
- package/lib/core/param/index.d.ts +2 -0
- package/lib/core/param/param-text-base.d.ts +15 -0
- package/lib/core/param/param.tokens.d.ts +3 -0
- package/package.json +1 -1
- package/schematics/migration-collection.json +5 -0
- package/schematics/ng-update/replace-menu-state-token/index.d.ts +2 -0
- package/schematics/ng-update/replace-menu-state-token/index.js +29 -0
- package/schematics/ng-update/replace-menu-state-token/index.js.map +1 -0
- package/schematics/ng-update/update-prefix/index.js +4 -6
- package/schematics/ng-update/update-prefix/index.js.map +1 -1
- package/schematics/utils/utils.d.ts +15 -0
- package/schematics/utils/utils.js +25 -0
- package/schematics/utils/utils.js.map +1 -0
- package/esm2022/lib/components/filters/register-table-filter.consts.mjs +0 -3
- package/esm2022/lib/components/filters/register-table-filter.types.mjs +0 -2
- package/lib/components/filters/register-table-filter.consts.d.ts +0 -3
- package/lib/components/filters/register-table-filter.types.d.ts +0 -8
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, signal, ChangeDetectionStrategy, Component, inject, Injectable, InjectionToken, Optional, DestroyRef, NgZone, afterNextRender, Input, viewChild, TemplateRef, effect, untracked, output, ɵRuntimeError as _RuntimeError, ChangeDetectorRef, forwardRef, Self, Directive, EventEmitter, Output, ViewChild,
|
|
2
|
+
import { input, computed, signal, ChangeDetectionStrategy, Component, inject, Injectable, InjectionToken, Optional, DestroyRef, NgZone, afterNextRender, Input, viewChild, TemplateRef, effect, untracked, output, HostBinding, ɵRuntimeError as _RuntimeError, ChangeDetectorRef, forwardRef, Self, Directive, EventEmitter, Output, ViewChild, contentChildren, runInInjectionContext, Injector, NgModule, Pipe, Inject, HostListener, ElementRef, Renderer2, model, viewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/router';
|
|
4
4
|
import { Router, NavigationStart, RouterLink } from '@angular/router';
|
|
5
5
|
import { BehaviorSubject, Subject, distinctUntilChanged, asyncScheduler, of, filter, map, takeUntil, ReplaySubject, take, skip, fromEvent, debounceTime, tap, switchMap, combineLatest, catchError, throwError, pairwise, delay, mergeMap, iif, expand, from, EMPTY, Observable, animationFrameScheduler } from 'rxjs';
|
|
@@ -11,7 +11,7 @@ import { moveItemInArray, transferArrayItem, CdkDrag, CdkDragPlaceholder, CdkDro
|
|
|
11
11
|
import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
12
12
|
import { WaResizeObserver } from '@ng-web-apis/resize-observer';
|
|
13
13
|
import * as i1$2 from '@angular/common';
|
|
14
|
-
import { NgOptimizedImage, CommonModule, NgIf,
|
|
14
|
+
import { NgOptimizedImage, NgTemplateOutlet, NgClass, AsyncPipe, CommonModule, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, DOCUMENT, NgForOf, NgStyle, DecimalPipe } from '@angular/common';
|
|
15
15
|
import { TuiExpand } from '@taiga-ui/experimental';
|
|
16
16
|
import * as i3 from '@prizm-ui/components';
|
|
17
17
|
import { PrizmDialogService, PrizmOverlayInsidePlacement, PrizmDateTimeRange, PrizmDayRange, PrizmTimeRange, PrizmTime, PrizmDay, PrizmTableModule, PrizmScrollbarModule, PrizmCheckboxComponent, PrizmStickyModule, PrizmButtonComponent, PrizmInputTextModule, PrizmPaginatorComponent, PrizmInputSelectModule, PrizmPanelComponent, PrizmToggleComponent, PrizmTabsModule, PrizmDropdownHostModule, PrizmLoaderComponent, PrizmSelectInputComponent, PrizmInputMultiSelectModule, PrizmInputLayoutDateModule, PrizmInputLayoutDateRangeModule, PrizmDialogComponent, PrizmInputLayoutDateComponent, PrizmColumnSettingsComponent, PrizmSwitcherComponent, PrizmTooltipModule, PrizmInputMultiSelectComponent, PrizmInputLayoutDateRangeComponent, PrizmSidebarComponent, PrizmToastModule, PrizmInputLayoutDateTimeModule, PrizmInputCommonModule, PrizmInputIconButtonComponent, PrizmInputLayoutMonthModule, PrizmHintDirective, PrizmTreeModule, PrizmInputNumberModule, PrizmInputLayoutDateTimeRangeModule, PrizmProgressModule, PrizmInputLayoutTimeModule, PrizmInputLayoutMonthRangeComponent, PrizmInputLayoutDateTimeRangeComponent, PrizmSplitterModule, PrizmCardComponent, PrizmDropdownControllerDirective, PrizmRadioButtonComponent, PrizmBreadcrumbDirective, PrizmBreadcrumbsComponent, PrizmStepperModule, PrizmIndicatorComponent, PrizmScrollbarComponent, PrizmDateTime, PrizmMonth, PrizmMonthRange, PolymorphModule } from '@prizm-ui/components';
|
|
@@ -23,6 +23,7 @@ import * as i2 from '@angular/forms';
|
|
|
23
23
|
import { FormControl, FormGroup, FormArray, Validators, NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
24
24
|
import { observeOn, startWith, shareReplay, map as map$1, filter as filter$1, switchMap as switchMap$1, tap as tap$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
|
|
25
25
|
import _, { isEqual } from 'lodash';
|
|
26
|
+
import { trigger, transition, style, animate } from '@angular/animations';
|
|
26
27
|
import { Apollo } from 'apollo-angular';
|
|
27
28
|
import gql from 'graphql-tag';
|
|
28
29
|
import { ComponentStore } from '@ngrx/component-store';
|
|
@@ -38,7 +39,6 @@ import * as i3$3 from '@taiga-ui/core/components/data-list';
|
|
|
38
39
|
import * as i4 from '@taiga-ui/kit/components/data-list-wrapper';
|
|
39
40
|
import { MaskitoDirective } from '@maskito/angular';
|
|
40
41
|
import { TuiInputSearch } from '@taiga-ui/layout';
|
|
41
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
42
42
|
import * as i1$5 from '@taiga-ui/addon-table';
|
|
43
43
|
import { TuiTable } from '@taiga-ui/addon-table';
|
|
44
44
|
import { coerceNumberProperty } from '@angular/cdk/coercion';
|
|
@@ -1526,140 +1526,423 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1526
1526
|
args: [{ selector: 'sproc-filter-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TuiButton, TuiHint, NgOptimizedImage], template: "<button\n tuiButton\n size=\"m\"\n appearance=\"outline-grayscale\"\n tuiHint\n tuiHintDirection=\"bottom\"\n [class.--indicator]=\"filterApplied()\"\n [disabled]=\"disabled()\"\n (click)=\"filterToggle.emit()\"\n>\n <img ngSrc=\"assets/ngx-register-base/icons/filter.svg\" alt=\"\" height=\"16\" width=\"16\" />\n\n <tui-hint\n *tuiHint\n class=\"filter-button__tooltip\"\n [class.filter-button__tooltip--showed]=\"filterApplied()\"\n >\n <span>\u041A \u0440\u0435\u0435\u0441\u0442\u0440\u0443 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u044B \u0444\u0438\u043B\u044C\u0442\u0440\u044B</span>\n </tui-hint>\n</button>\n", styles: [":host button{width:var(--top-bar-button-width);height:var(--top-bar-button-height);border-radius:2px;padding:10px;position:relative}:host button:disabled{filter:grayscale(100%)!important;cursor:not-allowed}:host button.--indicator:after{content:\"\";display:block;width:8px;height:8px;border-radius:50%;background-color:var(--brand-danger);position:absolute;top:10px;right:6px}.filter-button__tooltip{background-color:var(--brand-danger-light)!important;padding:16px;border:1px solid var(--brand-danger);border-left-width:4px;display:none}.filter-button__tooltip span{font:var(--input-text-12px);color:var(--main-black)}.filter-button__tooltip--showed{display:unset}\n"] }]
|
|
1527
1527
|
}] });
|
|
1528
1528
|
|
|
1529
|
-
const
|
|
1529
|
+
const SIDE_MENU_OPENED_WIDTH = 350;
|
|
1530
|
+
const SIDE_MENU_CLOSED_WIDTH = 48;
|
|
1531
|
+
var EPageMenuIconsSrc;
|
|
1532
|
+
(function (EPageMenuIconsSrc) {
|
|
1533
|
+
EPageMenuIconsSrc["CHEVRON_RIGHT"] = "assets/ngx-register-base/icons/chevron-right.svg";
|
|
1534
|
+
EPageMenuIconsSrc["CHEVRON_UP"] = "assets/ngx-register-base/icons/chevron-up.svg";
|
|
1535
|
+
EPageMenuIconsSrc["MENU_CHEVRON"] = "assets/ngx-register-base/icons/chevron-menu.svg";
|
|
1536
|
+
})(EPageMenuIconsSrc || (EPageMenuIconsSrc = {}));
|
|
1530
1537
|
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
// Structure validation errors
|
|
1534
|
-
ERuntimeErrorCode[ERuntimeErrorCode["NO_CONTROLS"] = 1000] = "NO_CONTROLS";
|
|
1535
|
-
ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL"] = 1001] = "MISSING_CONTROL";
|
|
1536
|
-
ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL_VALUE"] = 1002] = "MISSING_CONTROL_VALUE";
|
|
1537
|
-
})(ERuntimeErrorCode || (ERuntimeErrorCode = {}));
|
|
1538
|
+
const PAGE_MENU_STATE = new InjectionToken('PAGE_MENU_STATE');
|
|
1539
|
+
// export const PAGE_MENU_STORE = new InjectionToken<AbstractMenuStateService>('PAGE_MENU_STATE');
|
|
1538
1540
|
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1541
|
+
class SprocPageMenuComponent {
|
|
1542
|
+
constructor() {
|
|
1543
|
+
this.menuItems = input.required();
|
|
1544
|
+
this.menuIconsSrc = input('');
|
|
1545
|
+
this.openLogoSrc = input('');
|
|
1546
|
+
this.closedLogoSrc = input('');
|
|
1547
|
+
this.findActiveSection = input.required();
|
|
1548
|
+
// TODO Добавить кастомную ширину меню
|
|
1549
|
+
this.menuOpenedWidth = `${SIDE_MENU_OPENED_WIDTH}px`;
|
|
1550
|
+
this.menuClosedWidth = `${SIDE_MENU_CLOSED_WIDTH}px`;
|
|
1551
|
+
this._router = inject(Router);
|
|
1552
|
+
this._state = inject(PAGE_MENU_STATE);
|
|
1553
|
+
this._dr = inject(DestroyRef);
|
|
1554
|
+
this.toggleDisabled$ = this._state.toggleDisabled$;
|
|
1555
|
+
this.menuState = toSignal(this._state.isOpen$);
|
|
1556
|
+
this.selectedSection = signal('register');
|
|
1557
|
+
this.expandedIds = signal(new Set());
|
|
1558
|
+
this.selectedItem = computed(() => this.selectedSection() ? this.codeToItem[this.selectedSection()] : null);
|
|
1559
|
+
// Хранит parent элементы выбранного пункта меню
|
|
1560
|
+
this.parentItems = computed(() => {
|
|
1561
|
+
const item = this.selectedItem();
|
|
1562
|
+
if (!item) {
|
|
1563
|
+
return [];
|
|
1564
|
+
}
|
|
1565
|
+
const parents = [];
|
|
1566
|
+
let current = item.parent;
|
|
1567
|
+
while (current) {
|
|
1568
|
+
parents.push(current);
|
|
1569
|
+
current = current.parent;
|
|
1570
|
+
}
|
|
1571
|
+
return parents;
|
|
1572
|
+
});
|
|
1573
|
+
this.parentItemCodes = computed(() => {
|
|
1574
|
+
const parentItems = this.parentItems();
|
|
1575
|
+
return new Set(parentItems.map((val) => val.code ?? ''));
|
|
1576
|
+
});
|
|
1577
|
+
this.navigationHierarchy = signal([]);
|
|
1578
|
+
this.codeToItem = {};
|
|
1579
|
+
this.isOpenServiceVersionInfo = false;
|
|
1580
|
+
this.ICONS_SRC = EPageMenuIconsSrc;
|
|
1581
|
+
// Построить меню и найти активную секцию
|
|
1582
|
+
effect(() => {
|
|
1583
|
+
const menuItems = this.menuItems();
|
|
1584
|
+
this.buildMenu(menuItems);
|
|
1585
|
+
this._findActiveSection();
|
|
1586
|
+
}, { allowSignalWrites: true });
|
|
1554
1587
|
}
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
if (
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1588
|
+
addMenuScrollbar(id) {
|
|
1589
|
+
setTimeout(() => {
|
|
1590
|
+
// TODO Меню второго уровня есть скролл,третьего нет
|
|
1591
|
+
const collapsedMenu = document.querySelector(`[id="${id}"]`);
|
|
1592
|
+
const sideMenu = collapsedMenu?.querySelector('#side-menu__subitems');
|
|
1593
|
+
const sideMenuLevelTwo = sideMenu?.querySelector('#side-menu__subitems');
|
|
1594
|
+
const subitem = sideMenuLevelTwo
|
|
1595
|
+
? sideMenuLevelTwo.querySelectorAll('.side-menu__subitem')
|
|
1596
|
+
: sideMenu?.querySelectorAll('.side-menu__subitem');
|
|
1597
|
+
if (subitem) {
|
|
1598
|
+
const lastSubitem = subitem[subitem.length - 1];
|
|
1599
|
+
const rect = lastSubitem?.getBoundingClientRect();
|
|
1600
|
+
if (sideMenu && window.innerHeight - rect.bottom < 0) {
|
|
1601
|
+
// 40 тк высота плашки меню
|
|
1602
|
+
sideMenu.style.height = `${subitem.length * 40 + (window.innerHeight - rect.bottom - 1)}px`;
|
|
1603
|
+
sideMenu.style.overflowY = 'scroll';
|
|
1604
|
+
sideMenu.style.overflowX = 'hidden';
|
|
1605
|
+
}
|
|
1606
|
+
if (window.innerHeight - rect.bottom < 0 && sideMenuLevelTwo) {
|
|
1607
|
+
// 40 тк высота плашки меню
|
|
1608
|
+
sideMenuLevelTwo.style.height = `${subitem.length * 40 + (window.innerHeight - rect.bottom - 1)}px`;
|
|
1609
|
+
sideMenuLevelTwo.style.overflowY = 'scroll';
|
|
1610
|
+
sideMenuLevelTwo.style.overflowX = 'hidden';
|
|
1569
1611
|
}
|
|
1570
1612
|
}
|
|
1613
|
+
}, 0);
|
|
1614
|
+
}
|
|
1615
|
+
ngOnInit() {
|
|
1616
|
+
this._state.isOpen$.subscribe((menuState) => {
|
|
1617
|
+
if (menuState) {
|
|
1618
|
+
this.findRoute(this.selectedSection());
|
|
1619
|
+
}
|
|
1571
1620
|
else {
|
|
1572
|
-
|
|
1573
|
-
onlySelf: true,
|
|
1574
|
-
emitEvent: options?.emitEvent,
|
|
1575
|
-
});
|
|
1621
|
+
this.collapseMenu();
|
|
1576
1622
|
}
|
|
1577
|
-
}
|
|
1578
|
-
this.updateValueAndValidity(options);
|
|
1623
|
+
});
|
|
1579
1624
|
}
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
const
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
onlySelf: true,
|
|
1598
|
-
emitEvent: options?.emitEvent,
|
|
1599
|
-
});
|
|
1625
|
+
toggleNavigation() {
|
|
1626
|
+
this._state.toggle();
|
|
1627
|
+
}
|
|
1628
|
+
toggleItem(item) {
|
|
1629
|
+
this.addMenuScrollbar(item.id || '');
|
|
1630
|
+
this.expandedIds.update((currentExpand) => {
|
|
1631
|
+
const code = item.code;
|
|
1632
|
+
const copy = new Set(currentExpand);
|
|
1633
|
+
if (copy.has(code)) {
|
|
1634
|
+
copy.delete(code);
|
|
1635
|
+
}
|
|
1636
|
+
else {
|
|
1637
|
+
copy.clear();
|
|
1638
|
+
copy.add(code);
|
|
1639
|
+
const parents = this.getParents(item);
|
|
1640
|
+
for (const parent of parents) {
|
|
1641
|
+
copy.add(parent.code);
|
|
1600
1642
|
}
|
|
1601
1643
|
}
|
|
1602
|
-
|
|
1603
|
-
|
|
1644
|
+
return copy;
|
|
1645
|
+
});
|
|
1604
1646
|
}
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
const
|
|
1609
|
-
|
|
1610
|
-
values[key] = control.getRawValue();
|
|
1611
|
-
}
|
|
1647
|
+
collapseMenu(exception) {
|
|
1648
|
+
let codes = [];
|
|
1649
|
+
if (exception) {
|
|
1650
|
+
const parents = this.getParents(exception);
|
|
1651
|
+
codes = [exception.code, ...parents.map((parent) => parent.code)];
|
|
1612
1652
|
}
|
|
1613
|
-
|
|
1653
|
+
this.expandedIds.set(new Set(codes));
|
|
1614
1654
|
}
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
class ParamBase {
|
|
1618
|
-
/** Метод для конвертации значения control при сохранении (используется при сохранении фильтров в БД) */
|
|
1619
|
-
set formatSavedValue(formatter) {
|
|
1620
|
-
if (formatter) {
|
|
1621
|
-
this.formatterSavedValue = formatter;
|
|
1622
|
-
}
|
|
1655
|
+
get isMenuOpened() {
|
|
1656
|
+
return this._state.isOpen;
|
|
1623
1657
|
}
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
if (parser) {
|
|
1627
|
-
this.parserSavedValue = parser;
|
|
1628
|
-
}
|
|
1658
|
+
get isMenuClosed() {
|
|
1659
|
+
return !this._state.isOpen;
|
|
1629
1660
|
}
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
this.formatterGqlValue = formatter;
|
|
1661
|
+
isExternalLink(route) {
|
|
1662
|
+
if (!route) {
|
|
1663
|
+
return false;
|
|
1634
1664
|
}
|
|
1665
|
+
return /^(https?:\/\/|www\.)/i.test(route);
|
|
1635
1666
|
}
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1667
|
+
handleNavigation(item) {
|
|
1668
|
+
if (!item.route) {
|
|
1669
|
+
return;
|
|
1670
|
+
}
|
|
1671
|
+
if (this.isExternalLink(item.route)) {
|
|
1672
|
+
window.open(item.route, '_blank');
|
|
1673
|
+
}
|
|
1674
|
+
else {
|
|
1675
|
+
this._router.navigate([item.route]);
|
|
1676
|
+
this.selectedSection.set(item.code ?? '');
|
|
1677
|
+
if (this.isMenuClosed) {
|
|
1678
|
+
this.collapseMenu();
|
|
1679
|
+
}
|
|
1680
|
+
}
|
|
1642
1681
|
}
|
|
1643
|
-
|
|
1644
|
-
this.
|
|
1645
|
-
this._setControlDisabled(disabled);
|
|
1682
|
+
serviceInfoOnActiveZone(active) {
|
|
1683
|
+
this.isOpenServiceVersionInfo = active && this.isOpenServiceVersionInfo;
|
|
1646
1684
|
}
|
|
1647
|
-
|
|
1648
|
-
|
|
1685
|
+
serviceInfoOnObscured(obscured) {
|
|
1686
|
+
if (obscured) {
|
|
1687
|
+
this.isOpenServiceVersionInfo = false;
|
|
1688
|
+
}
|
|
1649
1689
|
}
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1690
|
+
buildMenu(menu) {
|
|
1691
|
+
const sortedMenuItems = [...menu].sort((a, b) => (a.order_num ?? 0) - (b.order_num ?? 0));
|
|
1692
|
+
const menuHash = {};
|
|
1693
|
+
for (const item of sortedMenuItems) {
|
|
1694
|
+
menuHash[item.id] = {
|
|
1695
|
+
title: item.title ?? '',
|
|
1696
|
+
route: item.route ?? '',
|
|
1697
|
+
id: item.id,
|
|
1698
|
+
children: [],
|
|
1699
|
+
code: item.code,
|
|
1700
|
+
icon: item.icon,
|
|
1701
|
+
accessedRoles: undefined,
|
|
1702
|
+
parent: undefined,
|
|
1703
|
+
};
|
|
1704
|
+
}
|
|
1705
|
+
const rootMenuItems = [];
|
|
1706
|
+
for (const item of sortedMenuItems) {
|
|
1707
|
+
if (item.id_parent && menuHash[item.id_parent]) {
|
|
1708
|
+
const parent = menuHash[item.id_parent];
|
|
1709
|
+
const child = menuHash[item.id];
|
|
1710
|
+
child.parent = parent;
|
|
1711
|
+
parent.children?.push(child);
|
|
1712
|
+
}
|
|
1713
|
+
else {
|
|
1714
|
+
rootMenuItems.push(menuHash[item.id]);
|
|
1715
|
+
}
|
|
1716
|
+
}
|
|
1717
|
+
this.navigationHierarchy.set(rootMenuItems);
|
|
1718
|
+
this.codeToItem = {};
|
|
1719
|
+
for (const id of Object.keys(menuHash)) {
|
|
1720
|
+
const item = menuHash[id];
|
|
1721
|
+
if (item.code) {
|
|
1722
|
+
this.codeToItem[item.code] = item;
|
|
1723
|
+
}
|
|
1724
|
+
}
|
|
1725
|
+
}
|
|
1726
|
+
findRoute(routeToFind) {
|
|
1727
|
+
const routeItem = this.codeToItem[routeToFind];
|
|
1728
|
+
if (!routeItem) {
|
|
1729
|
+
return;
|
|
1730
|
+
}
|
|
1731
|
+
if (this.isMenuOpened) {
|
|
1732
|
+
this.toggleItem(routeItem);
|
|
1733
|
+
}
|
|
1734
|
+
this.selectedSection.set(routeItem.code ?? '');
|
|
1735
|
+
}
|
|
1736
|
+
_findActiveSection() {
|
|
1737
|
+
this.findActiveSection()(this.resetSelection, this.findRoute);
|
|
1738
|
+
}
|
|
1739
|
+
getParents(item) {
|
|
1740
|
+
const parents = [];
|
|
1741
|
+
let current = item.parent;
|
|
1742
|
+
while (current) {
|
|
1743
|
+
parents.push(current);
|
|
1744
|
+
current = current.parent;
|
|
1745
|
+
}
|
|
1746
|
+
return parents;
|
|
1747
|
+
}
|
|
1748
|
+
resetSelection() {
|
|
1749
|
+
this.expandedIds.set(new Set());
|
|
1750
|
+
this.selectedSection.set('');
|
|
1751
|
+
}
|
|
1752
|
+
collectChildren(item) {
|
|
1753
|
+
const result = [];
|
|
1754
|
+
const queue = item.children?.slice() ?? [];
|
|
1755
|
+
let index = 0;
|
|
1756
|
+
while (index < queue.length) {
|
|
1757
|
+
const node = queue[index];
|
|
1758
|
+
result.push(node);
|
|
1759
|
+
if (node.children) {
|
|
1760
|
+
queue.push(...node.children);
|
|
1761
|
+
}
|
|
1762
|
+
index += 1;
|
|
1763
|
+
}
|
|
1764
|
+
return result;
|
|
1765
|
+
}
|
|
1766
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1767
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SprocPageMenuComponent, isStandalone: true, selector: "sproc-page-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, menuIconsSrc: { classPropertyName: "menuIconsSrc", publicName: "menuIconsSrc", isSignal: true, isRequired: false, transformFunction: null }, openLogoSrc: { classPropertyName: "openLogoSrc", publicName: "openLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, closedLogoSrc: { classPropertyName: "closedLogoSrc", publicName: "closedLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, findActiveSection: { classPropertyName: "findActiveSection", publicName: "findActiveSection", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--page-menu-opened-width": "this.menuOpenedWidth", "style.--page-menu-closed-width": "this.menuClosedWidth" } }, ngImport: i0, template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n <div class=\"side-menu__header\">\n <img\n [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n alt=\"Logo Icon\"\n class=\"side-menu__header__logo\"\n />\n <img\n (click)=\"toggleNavigation()\"\n [class.disabled]=\"toggleDisabled$ | async\"\n [height]=\"16\"\n [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n </div>\n\n @if (menuState()) {\n <div class=\"expanded-menu-content\">\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"\n menuItemOpened;\n context: { navigation_item: navigation_item, level: 0 }\n \"\n ></ng-container>\n }\n </div>\n\n <ng-content></ng-content>\n } @else {\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n ></ng-container>\n }\n }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code;\n\n <a\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [@fadeInOut]\n [class.menu-item_selected]=\"isHighlighted\"\n [class.padding-level-0]=\"level === 0\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n class=\"menu-item\"\n >\n @if (icon) {\n <span class=\"menu-item__icon\">\n <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n </span>\n }\n <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n @if (childrenCount > 0) {\n <img\n class=\"menu-item__chevron\"\n [class.menu-item__chevron_rotated]=\"!isExpanded\"\n [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n }\n </a>\n @if (isExpanded && childrenCount > 0) {\n @for (children of navigation_item.children ?? []; track $index) {\n <ng-container\n *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n ></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n <div\n (mouseleave)=\"collapseMenu()\"\n [id]=\"navigation_item.id\"\n class=\"collapsed-menu-content\"\n >\n @if (icon) {\n <a\n class=\"menu-item__icon_closed\"\n [class.menu-item_selected]=\"isHighlighted\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n (mouseenter)=\"toggleItem(navigation_item)\">\n <img\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n </a>\n }\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: 1, topPadding: 1 }\n \"\n >\n </ng-container>\n @if (isExpanded && childrenCount > 0) {\n <div class=\"static-item\">\n <span class=\"static-item__element\">\n {{ navigation_item.title }}\n </span>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n @let isExpanded = expandedIds().has(item.code);\n <div [id]=\"item.id\">\n @if (isExpanded && item.children.length > 0) {\n <div\n class=\"side-menu__subitems\"\n [class.padding-level-1]=\"level === 1\"\n [style.top.px]=\"topPadding * 40\"\n id=\"side-menu__subitems\"\n >\n @for (navigation_item of item.children; track navigation_item; let index = $index) {\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n <a\n class=\"side-menu__subitem\"\n [class.menu-item_selected]=\"isHighlighted\"\n (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n >\n <span\n [class.padding-level-1]=\"level === 1\">{{\n navigation_item.title\n }}</span>\n\n @if (childrenCount > 0) {\n <img\n class=\"chevron-right\"\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n }\n </a>\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: level + 1, topPadding: index }\n \"\n ></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .static-item__element{box-sizing:border-box;display:flex;align-items:center;color:var(--main-white);height:40px;width:294px;background:var(--page-menu-main);justify-content:space-between}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], animations: [
|
|
1768
|
+
trigger('fadeInOut', [
|
|
1769
|
+
transition(':enter', [
|
|
1770
|
+
style({
|
|
1771
|
+
opacity: 0,
|
|
1772
|
+
transform: 'translateY(-10px)',
|
|
1773
|
+
transformOrigin: 'top',
|
|
1774
|
+
}),
|
|
1775
|
+
animate('0.15s ease-in', style({
|
|
1776
|
+
opacity: 1,
|
|
1777
|
+
transform: 'translateY(0)',
|
|
1778
|
+
})),
|
|
1779
|
+
]),
|
|
1780
|
+
]),
|
|
1781
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1782
|
+
}
|
|
1783
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, decorators: [{
|
|
1784
|
+
type: Component,
|
|
1785
|
+
args: [{ selector: 'sproc-page-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RouterLink, NgTemplateOutlet, NgClass, AsyncPipe, NgOptimizedImage], animations: [
|
|
1786
|
+
trigger('fadeInOut', [
|
|
1787
|
+
transition(':enter', [
|
|
1788
|
+
style({
|
|
1789
|
+
opacity: 0,
|
|
1790
|
+
transform: 'translateY(-10px)',
|
|
1791
|
+
transformOrigin: 'top',
|
|
1792
|
+
}),
|
|
1793
|
+
animate('0.15s ease-in', style({
|
|
1794
|
+
opacity: 1,
|
|
1795
|
+
transform: 'translateY(0)',
|
|
1796
|
+
})),
|
|
1797
|
+
]),
|
|
1798
|
+
]),
|
|
1799
|
+
], template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n <div class=\"side-menu__header\">\n <img\n [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n alt=\"Logo Icon\"\n class=\"side-menu__header__logo\"\n />\n <img\n (click)=\"toggleNavigation()\"\n [class.disabled]=\"toggleDisabled$ | async\"\n [height]=\"16\"\n [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n </div>\n\n @if (menuState()) {\n <div class=\"expanded-menu-content\">\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"\n menuItemOpened;\n context: { navigation_item: navigation_item, level: 0 }\n \"\n ></ng-container>\n }\n </div>\n\n <ng-content></ng-content>\n } @else {\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n ></ng-container>\n }\n }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code;\n\n <a\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [@fadeInOut]\n [class.menu-item_selected]=\"isHighlighted\"\n [class.padding-level-0]=\"level === 0\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n class=\"menu-item\"\n >\n @if (icon) {\n <span class=\"menu-item__icon\">\n <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n </span>\n }\n <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n @if (childrenCount > 0) {\n <img\n class=\"menu-item__chevron\"\n [class.menu-item__chevron_rotated]=\"!isExpanded\"\n [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n }\n </a>\n @if (isExpanded && childrenCount > 0) {\n @for (children of navigation_item.children ?? []; track $index) {\n <ng-container\n *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n ></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n <div\n (mouseleave)=\"collapseMenu()\"\n [id]=\"navigation_item.id\"\n class=\"collapsed-menu-content\"\n >\n @if (icon) {\n <a\n class=\"menu-item__icon_closed\"\n [class.menu-item_selected]=\"isHighlighted\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n (mouseenter)=\"toggleItem(navigation_item)\">\n <img\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n </a>\n }\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: 1, topPadding: 1 }\n \"\n >\n </ng-container>\n @if (isExpanded && childrenCount > 0) {\n <div class=\"static-item\">\n <span class=\"static-item__element\">\n {{ navigation_item.title }}\n </span>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n @let isExpanded = expandedIds().has(item.code);\n <div [id]=\"item.id\">\n @if (isExpanded && item.children.length > 0) {\n <div\n class=\"side-menu__subitems\"\n [class.padding-level-1]=\"level === 1\"\n [style.top.px]=\"topPadding * 40\"\n id=\"side-menu__subitems\"\n >\n @for (navigation_item of item.children; track navigation_item; let index = $index) {\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n <a\n class=\"side-menu__subitem\"\n [class.menu-item_selected]=\"isHighlighted\"\n (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n >\n <span\n [class.padding-level-1]=\"level === 1\">{{\n navigation_item.title\n }}</span>\n\n @if (childrenCount > 0) {\n <img\n class=\"chevron-right\"\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n }\n </a>\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: level + 1, topPadding: index }\n \"\n ></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .static-item__element{box-sizing:border-box;display:flex;align-items:center;color:var(--main-white);height:40px;width:294px;background:var(--page-menu-main);justify-content:space-between}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"] }]
|
|
1800
|
+
}], ctorParameters: () => [], propDecorators: { menuOpenedWidth: [{
|
|
1801
|
+
type: HostBinding,
|
|
1802
|
+
args: ['style.--page-menu-opened-width']
|
|
1803
|
+
}], menuClosedWidth: [{
|
|
1804
|
+
type: HostBinding,
|
|
1805
|
+
args: ['style.--page-menu-closed-width']
|
|
1806
|
+
}] } });
|
|
1807
|
+
|
|
1808
|
+
class AbstractMenuStateService {
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1811
|
+
var ERuntimeErrorCode;
|
|
1812
|
+
(function (ERuntimeErrorCode) {
|
|
1813
|
+
// Structure validation errors
|
|
1814
|
+
ERuntimeErrorCode[ERuntimeErrorCode["NO_CONTROLS"] = 1000] = "NO_CONTROLS";
|
|
1815
|
+
ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL"] = 1001] = "MISSING_CONTROL";
|
|
1816
|
+
ERuntimeErrorCode[ERuntimeErrorCode["MISSING_CONTROL_VALUE"] = 1002] = "MISSING_CONTROL_VALUE";
|
|
1817
|
+
})(ERuntimeErrorCode || (ERuntimeErrorCode = {}));
|
|
1818
|
+
|
|
1819
|
+
function assertAllValuesPresent(control, isGroup, value) {
|
|
1820
|
+
control._forEachChild((_, key) => {
|
|
1821
|
+
if (value[key] === undefined) {
|
|
1822
|
+
throw new _RuntimeError(ERuntimeErrorCode.MISSING_CONTROL_VALUE, '');
|
|
1823
|
+
}
|
|
1824
|
+
});
|
|
1825
|
+
}
|
|
1826
|
+
function assertControlPresent(parent, isGroup, key) {
|
|
1827
|
+
const controls = parent.controls;
|
|
1828
|
+
const collection = isGroup ? Object.keys(controls) : controls;
|
|
1829
|
+
if (collection.length === 0) {
|
|
1830
|
+
throw new _RuntimeError(ERuntimeErrorCode.NO_CONTROLS, '');
|
|
1831
|
+
}
|
|
1832
|
+
if (!controls[key]) {
|
|
1833
|
+
throw new _RuntimeError(ERuntimeErrorCode.MISSING_CONTROL, '');
|
|
1834
|
+
}
|
|
1835
|
+
}
|
|
1836
|
+
/** @deprecated заменить на FormGroup */
|
|
1837
|
+
class FormGroupWrapper extends FormGroup {
|
|
1838
|
+
setValue(value, options) {
|
|
1839
|
+
assertAllValuesPresent(this, true, value);
|
|
1840
|
+
for (const name of Object.keys(value)) {
|
|
1841
|
+
assertControlPresent(this, true, name);
|
|
1842
|
+
const control = this.controls[name];
|
|
1843
|
+
const currentValue = value[name];
|
|
1844
|
+
if (control instanceof FormArray && Array.isArray(currentValue)) {
|
|
1845
|
+
control.clear();
|
|
1846
|
+
for (const item of currentValue) {
|
|
1847
|
+
item.setParent(control);
|
|
1848
|
+
control.push(item, { emitEvent: options?.emitEvent });
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1851
|
+
else {
|
|
1852
|
+
control.setValue(currentValue, {
|
|
1853
|
+
onlySelf: true,
|
|
1854
|
+
emitEvent: options?.emitEvent,
|
|
1855
|
+
});
|
|
1856
|
+
}
|
|
1857
|
+
}
|
|
1858
|
+
this.updateValueAndValidity(options);
|
|
1859
|
+
}
|
|
1860
|
+
patchValue(value, options) {
|
|
1861
|
+
if (value === null) {
|
|
1862
|
+
return;
|
|
1863
|
+
}
|
|
1864
|
+
for (const name of Object.keys(value)) {
|
|
1865
|
+
const control = this.controls[name];
|
|
1866
|
+
const currentValue = value[name];
|
|
1867
|
+
if (control) {
|
|
1868
|
+
if (control instanceof FormArray && Array.isArray(currentValue)) {
|
|
1869
|
+
control.clear();
|
|
1870
|
+
for (const item of currentValue) {
|
|
1871
|
+
item.setParent(control);
|
|
1872
|
+
control.push(item, { emitEvent: options?.emitEvent });
|
|
1873
|
+
}
|
|
1874
|
+
}
|
|
1875
|
+
else {
|
|
1876
|
+
control.patchValue(currentValue, {
|
|
1877
|
+
onlySelf: true,
|
|
1878
|
+
emitEvent: options?.emitEvent,
|
|
1879
|
+
});
|
|
1880
|
+
}
|
|
1881
|
+
}
|
|
1882
|
+
}
|
|
1883
|
+
this.updateValueAndValidity(options);
|
|
1884
|
+
}
|
|
1885
|
+
getDirtyValues() {
|
|
1886
|
+
const values = {};
|
|
1887
|
+
for (const key of Object.keys(this.controls)) {
|
|
1888
|
+
const control = this.get(key);
|
|
1889
|
+
if (control?.dirty) {
|
|
1890
|
+
values[key] = control.getRawValue();
|
|
1891
|
+
}
|
|
1892
|
+
}
|
|
1893
|
+
return values;
|
|
1894
|
+
}
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
/** Максимальное кол-во символов в текстовых полях */
|
|
1898
|
+
const MAX_LENGTH_TEXT_PARAMS = new InjectionToken('MAX_LENGTH_TEXT_PARAMS');
|
|
1899
|
+
|
|
1900
|
+
class ParamBase {
|
|
1901
|
+
/** Метод для конвертации значения control при сохранении (используется при сохранении фильтров в БД) */
|
|
1902
|
+
set formatSavedValue(formatter) {
|
|
1903
|
+
if (formatter) {
|
|
1904
|
+
this.formatterSavedValue = formatter;
|
|
1905
|
+
}
|
|
1906
|
+
}
|
|
1907
|
+
/** Метод для конвертации сохраненного значения в control (используется при установке сохраненных фильтров из БД) */
|
|
1908
|
+
set parseSavedValue(parser) {
|
|
1909
|
+
if (parser) {
|
|
1910
|
+
this.parserSavedValue = parser;
|
|
1911
|
+
}
|
|
1912
|
+
}
|
|
1913
|
+
/** Метод для конвертации значения control в GQL-значение (используется при вычислении gql_value control) */
|
|
1914
|
+
set formatGqlValue(formatter) {
|
|
1915
|
+
if (formatter) {
|
|
1916
|
+
this.formatterGqlValue = formatter;
|
|
1917
|
+
}
|
|
1918
|
+
}
|
|
1919
|
+
set required(required) {
|
|
1920
|
+
this._required = required;
|
|
1921
|
+
this._setControlRequired(required);
|
|
1922
|
+
}
|
|
1923
|
+
get required() {
|
|
1924
|
+
return this.control?.hasValidator(Validators.required) ?? false;
|
|
1925
|
+
}
|
|
1926
|
+
set disabled(disabled) {
|
|
1927
|
+
this._disabled = disabled;
|
|
1928
|
+
this._setControlDisabled(disabled);
|
|
1929
|
+
}
|
|
1930
|
+
get disabled() {
|
|
1931
|
+
return this.control?.disabled ?? false;
|
|
1932
|
+
}
|
|
1933
|
+
constructor(_injector) {
|
|
1934
|
+
this._injector = _injector;
|
|
1935
|
+
/** Название */
|
|
1936
|
+
this.label = '';
|
|
1937
|
+
/** Текст при пустом значении control (null) */
|
|
1938
|
+
this.placeholder = input('');
|
|
1939
|
+
/** Режим просмотра, по умолчанию выключен */
|
|
1940
|
+
this.readmode = false;
|
|
1941
|
+
/** Кнопка быстрой очистки поля, по умолчанию включена */
|
|
1942
|
+
this.forceClear = true;
|
|
1943
|
+
/** Текст при наведении на значение control */
|
|
1944
|
+
this.hint = null;
|
|
1945
|
+
/** Готовые стили для использования поля в панели фильтров/параметров или на карточке, по умолчанию стили для карточки */
|
|
1663
1946
|
this.paramStyle = 'card';
|
|
1664
1947
|
/** Метод для отображения значения в режиме просмотра */
|
|
1665
1948
|
this.buildShowedValue = input((_) => '');
|
|
@@ -2058,10 +2341,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2058
2341
|
type: Input
|
|
2059
2342
|
}] } });
|
|
2060
2343
|
|
|
2061
|
-
|
|
2344
|
+
const DEFAULT_MAX_LENGTH = 1000;
|
|
2345
|
+
class ParamTextBase extends ParamBase {
|
|
2062
2346
|
constructor() {
|
|
2063
2347
|
super(...arguments);
|
|
2064
|
-
this.
|
|
2348
|
+
this._initMaxLength = inject(MAX_LENGTH_TEXT_PARAMS, { optional: true }) ?? DEFAULT_MAX_LENGTH;
|
|
2349
|
+
this.placeholder = input('Введите значение');
|
|
2350
|
+
this.buildShowedValue = input((value) => value?.toString() ?? '-');
|
|
2351
|
+
/**
|
|
2352
|
+
* Максимальное кол-во символов
|
|
2353
|
+
*
|
|
2354
|
+
* @default 1000
|
|
2355
|
+
* */
|
|
2356
|
+
this.maxLength = input(this._initMaxLength);
|
|
2357
|
+
}
|
|
2358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2359
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: ParamTextBase, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buildShowedValue: { classPropertyName: "buildShowedValue", publicName: "buildShowedValue", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
2360
|
+
}
|
|
2361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextBase, decorators: [{
|
|
2362
|
+
type: Directive
|
|
2363
|
+
}] });
|
|
2364
|
+
|
|
2365
|
+
class RegisterBaseStore extends ComponentStore {
|
|
2366
|
+
constructor() {
|
|
2367
|
+
super(...arguments);
|
|
2368
|
+
this.apollo = inject(Apollo);
|
|
2065
2369
|
this.error = (e) => {
|
|
2066
2370
|
console.error(e);
|
|
2067
2371
|
this.setLoading(false);
|
|
@@ -3087,7 +3391,7 @@ class RegisterTableFilterComponent {
|
|
|
3087
3391
|
this.filterListHeaderTitle = 'Фильтр';
|
|
3088
3392
|
this.footerApplyButtonLabel = 'Применить';
|
|
3089
3393
|
this.clickApplyButton = new EventEmitter();
|
|
3090
|
-
this._menuState = inject(
|
|
3394
|
+
this._menuState = inject(PAGE_MENU_STATE);
|
|
3091
3395
|
this._unsubscribe$ = new Subject();
|
|
3092
3396
|
this.FilterState = EInputsState;
|
|
3093
3397
|
this.filterState$ = this._filterStateService.state$.pipe(map((filterState) => filterState.state));
|
|
@@ -4688,20 +4992,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
4688
4992
|
args: [{ selector: 'sproc-param-switcher-date-time-range', template: "<div class=\"param-custom-template\">\n <div *ngIf=\"label\" class=\"label\">\n <span *ngIf=\"label\" class=\"label__text\">{{ label }}</span>\n <span *ngIf=\"required\" class=\"label--required\">*</span>\n </div>\n\n <prizm-switcher [switchers]=\"switchers\" [formControl]=\"switcherControl\"></prizm-switcher>\n\n <prizm-input-layout class=\"flex-shrink--zero\" size=\"s\" [forceClear]=\"forceClear\">\n <prizm-input-layout-date-time-range\n [placeholder]=\"placeholder()\"\n [timeMode]=\"timeMode\"\n [maxLength]=\"maxLength\"\n [min]=\"$any(min)\"\n [max]=\"$any(max)\"\n [formControl]=\"control\"\n ></prizm-input-layout-date-time-range>\n </prizm-input-layout>\n</div>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}:host .param-custom-template{width:100%;display:flex;flex-direction:column;padding:0 2px;gap:8px}:host .param-custom-template .label{display:flex;gap:4px;font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}:host .param-custom-template .label__text{color:var(--main-black)}:host .param-custom-template .label--required{color:var(--brand-danger)}:host .param-custom-template ::ng-deep prizm-switcher .container{display:flex;flex:1}:host .param-custom-template ::ng-deep prizm-switcher .container prizm-switcher-item{display:flex;flex:1}:host .param-custom-template ::ng-deep prizm-switcher .container prizm-switcher-item button{height:24px!important;min-height:24px!important;display:flex;flex:1}:host .param-custom-template ::ng-deep prizm-switcher .container prizm-switcher-item button prizm-wrapper{display:flex;align-items:center;justify-content:center;padding:unset!important}:host .param-custom-template ::ng-deep .prizm-input-form:not(.prizm-input-form-focused){background:inherit;border:none;border-bottom:1px solid #d7d8df;padding:0 3.5px 0 8px}:host .param-custom-template ::ng-deep .prizm-input-form .prizm-input-form-focused{background:inherit;border:1px!important;border-bottom:1px solid #d7d8df}:host .param-custom-template ::ng-deep .prizm-input-form-inner{min-height:32px;height:32px}:host .param-custom-template ::ng-deep input{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}\n"] }]
|
|
4689
4993
|
}] });
|
|
4690
4994
|
|
|
4691
|
-
class ParamTextComponent extends
|
|
4995
|
+
class ParamTextComponent extends ParamTextBase {
|
|
4692
4996
|
constructor() {
|
|
4693
4997
|
super(...arguments);
|
|
4694
|
-
this.placeholder = input('Введите значение');
|
|
4695
|
-
this.buildShowedValue = input((value) => value?.toString() ?? '-');
|
|
4696
|
-
this.stringifyText = input((value) => value);
|
|
4697
4998
|
this.maskOptions = input(null);
|
|
4698
4999
|
/** сообщение об ошибке для текстового поля */
|
|
4699
5000
|
this.errorMessage = input('');
|
|
4700
|
-
/** Максимальное кол-во символов */
|
|
4701
|
-
this.maxLength = input(-1);
|
|
4702
5001
|
}
|
|
4703
5002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParamTextComponent, isStandalone: true, selector: "sproc-param-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buildShowedValue: { classPropertyName: "buildShowedValue", publicName: "buildShowedValue", isSignal: true, isRequired: false, transformFunction: null }, stringifyText: { classPropertyName: "stringifyText", publicName: "stringifyText", isSignal: true, isRequired: false, transformFunction: null }, maskOptions: { classPropertyName: "maskOptions", publicName: "maskOptions", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n <ng-template #readTemplate>\n <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n <ng-container *ngIf=\"label\">\n <ng-container [ngSwitch]=\"paramStyle\">\n <ng-template ngSwitchCase=\"filter\">\n <div class=\"label-wrapper\">\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </div>\n </ng-template>\n <ng-template ngSwitchDefault>\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n <div class=\"value\">\n <span>{{ showedValue }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template #editTemplate>\n <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n <span class=\"label\" [class.required]=\"required\">\n {{ label }}\n </span>\n @if (errorMessage() && control.invalid) {\n <div class=\"errorMessage\">{{ errorMessage() }}</div>\n }\n </div>\n\n <tui-textfield\n tuiAppearance=\"sproc-input-appearance\"\n tuiTextfieldSize=\"m\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"forceClear\"\n [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n >\n <input\n tuiTextfield\n [formControl]=\"control\"\n [maskito]=\"maskOptions()\"\n [placeholder]=\"placeholder()\"\n [maxLength]=\"maxLength()\"\n />\n <div class=\"textfield-icons-container\">\n @if (isInvalidAndNotPristine) {\n <sproc-param-invalid-icon></sproc-param-invalid-icon>\n }\n </div>\n </tui-textfield>\n\n <ng-template #hintContent> {{ showedValue }} </ng-template>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container .errorMessage{display:inline-block;text-align:end;margin-left:auto;color:red;font-size:12px;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParamTextComponent, isStandalone: true, selector: "sproc-param-text", inputs: { maskOptions: { classPropertyName: "maskOptions", publicName: "maskOptions", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n <ng-template #readTemplate>\n <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n <ng-container *ngIf=\"label\">\n <ng-container [ngSwitch]=\"paramStyle\">\n <ng-template ngSwitchCase=\"filter\">\n <div class=\"label-wrapper\">\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </div>\n </ng-template>\n <ng-template ngSwitchDefault>\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n <div class=\"value\">\n <span>{{ showedValue }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template #editTemplate>\n <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n <span class=\"label\" [class.required]=\"required\">\n {{ label }}\n </span>\n @if (errorMessage() && control.invalid) {\n <div class=\"errorMessage\">{{ errorMessage() }}</div>\n }\n </div>\n\n <tui-textfield\n tuiAppearance=\"sproc-input-appearance\"\n tuiTextfieldSize=\"m\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"forceClear\"\n [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n >\n <input\n tuiTextfield\n [formControl]=\"control\"\n [maskito]=\"maskOptions()\"\n [placeholder]=\"placeholder()\"\n [maxLength]=\"maxLength()\"\n />\n <div class=\"textfield-icons-container\">\n @if (isInvalidAndNotPristine) {\n <sproc-param-invalid-icon></sproc-param-invalid-icon>\n }\n </div>\n </tui-textfield>\n\n <ng-template #hintContent> {{ showedValue }} </ng-template>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container .errorMessage{display:inline-block;text-align:end;margin-left:auto;color:red;font-size:12px;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4705
5004
|
}
|
|
4706
5005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextComponent, decorators: [{
|
|
4707
5006
|
type: Component,
|
|
@@ -4721,20 +5020,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
4721
5020
|
], template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n <ng-template #readTemplate>\n <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n <ng-container *ngIf=\"label\">\n <ng-container [ngSwitch]=\"paramStyle\">\n <ng-template ngSwitchCase=\"filter\">\n <div class=\"label-wrapper\">\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </div>\n </ng-template>\n <ng-template ngSwitchDefault>\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </ng-template>\n </ng-container>\n </ng-container>\n <div class=\"value\">\n <span>{{ showedValue }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template #editTemplate>\n <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n <div *ngIf=\"label\" class=\"label-wrapper\" [class.applied]=\"applied()\">\n <span class=\"label\" [class.required]=\"required\">\n {{ label }}\n </span>\n @if (errorMessage() && control.invalid) {\n <div class=\"errorMessage\">{{ errorMessage() }}</div>\n }\n </div>\n\n <tui-textfield\n tuiAppearance=\"sproc-input-appearance\"\n tuiTextfieldSize=\"m\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"forceClear\"\n [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n >\n <input\n tuiTextfield\n [formControl]=\"control\"\n [maskito]=\"maskOptions()\"\n [placeholder]=\"placeholder()\"\n [maxLength]=\"maxLength()\"\n />\n <div class=\"textfield-icons-container\">\n @if (isInvalidAndNotPristine) {\n <sproc-param-invalid-icon></sproc-param-invalid-icon>\n }\n </div>\n </tui-textfield>\n\n <ng-template #hintContent> {{ showedValue }} </ng-template>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container .errorMessage{display:inline-block;text-align:end;margin-left:auto;color:red;font-size:12px;white-space:pre-line}\n"] }]
|
|
4722
5021
|
}] });
|
|
4723
5022
|
|
|
4724
|
-
class ParamTextareaComponent extends
|
|
5023
|
+
class ParamTextareaComponent extends ParamTextBase {
|
|
4725
5024
|
constructor() {
|
|
4726
5025
|
super(...arguments);
|
|
4727
|
-
this.placeholder = input('Введите значение');
|
|
4728
|
-
this.buildShowedValue = input((value) => value?.toString() ?? '-');
|
|
4729
5026
|
/** Минимальное кол-во строк в инпуте */
|
|
4730
5027
|
this.min = input(6);
|
|
4731
5028
|
/** Максимальное кол-во строк в инпуте */
|
|
4732
5029
|
this.max = input(6);
|
|
4733
|
-
/** Максимальное кол-во символов */
|
|
4734
|
-
this.maxLength = input(-1);
|
|
4735
5030
|
}
|
|
4736
5031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4737
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParamTextareaComponent, isStandalone: true, selector: "sproc-param-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buildShowedValue: { classPropertyName: "buildShowedValue", publicName: "buildShowedValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n <ng-template #readTemplate>\n <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n @if (label) {\n @switch (paramStyle) {\n @case ('filter') {\n <div class=\"label-wrapper\">\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </div>\n }\n @default {\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n }\n }\n }\n <div class=\"value\">\n <span [tuiHint]=\"value && showedValue !== '-' ? showedValue : undefined\">{{\n showedValue\n }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template #editTemplate>\n <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n @if (label) {\n <div class=\"label-wrapper\" [class.applied]=\"applied()\">\n <span class=\"label\" [class.required]=\"required\">\n {{ label }}\n </span>\n </div>\n }\n <tui-textfield\n tuiAppearance=\"sproc-input-appearance\"\n tuiTextfieldSize=\"m\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"forceClear\"\n [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n >\n <textarea\n tuiTextarea\n tuiTextfieldSize=\"m\"\n [formControl]=\"control\"\n [max]=\"max()\"\n [min]=\"min()\"\n [maxLength]=\"maxLength()\"\n [limit]=\"maxLength()\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n <div class=\"textfield-icons-container\">\n @if (isInvalidAndNotPristine) {\n <sproc-param-invalid-icon></sproc-param-invalid-icon>\n }\n </div>\n </tui-textfield>\n\n <ng-template #hintContent> {{ showedValue }} </ng-template>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host [tuiAppearance][data-appearance=textfield]{border-block-end-width:unset!important;padding:7px 60px 7px 12px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: TuiTextarea, selector: "textarea[tuiTextarea]", inputs: ["min", "max", "content"] }, { kind: "directive", type: TuiTextareaLimit, selector: "[tuiTextarea][limit]", inputs: ["limit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ParamTextareaComponent, isStandalone: true, selector: "sproc-param-textarea", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"readmode ? readTemplate : editTemplate\">\n <ng-template #readTemplate>\n <div class=\"container container--read\" [attr.sproc-param-style]=\"paramStyle\">\n @if (label) {\n @switch (paramStyle) {\n @case ('filter') {\n <div class=\"label-wrapper\">\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n </div>\n }\n @default {\n <span class=\"label\">{{ label }}</span>\n <div class=\"dashed-row\"></div>\n }\n }\n }\n <div class=\"value\">\n <span [tuiHint]=\"value && showedValue !== '-' ? showedValue : undefined\">{{\n showedValue\n }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template #editTemplate>\n <div class=\"container container--edit\" [attr.sproc-param-style]=\"paramStyle\">\n @if (label) {\n <div class=\"label-wrapper\" [class.applied]=\"applied()\">\n <span class=\"label\" [class.required]=\"required\">\n {{ label }}\n </span>\n </div>\n }\n <tui-textfield\n tuiAppearance=\"sproc-input-appearance\"\n tuiTextfieldSize=\"m\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"forceClear\"\n [tuiHint]=\"value && showedValue !== '-' ? hintContent : undefined\"\n >\n <textarea\n tuiTextarea\n tuiTextfieldSize=\"m\"\n [formControl]=\"control\"\n [max]=\"max()\"\n [min]=\"min()\"\n [maxLength]=\"maxLength()\"\n [limit]=\"maxLength()\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n <div class=\"textfield-icons-container\">\n @if (isInvalidAndNotPristine) {\n <sproc-param-invalid-icon></sproc-param-invalid-icon>\n }\n </div>\n </tui-textfield>\n\n <ng-template #hintContent> {{ showedValue }} </ng-template>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".input-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-text-12px,.body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.table-heading-12px{font-family:Inter,serif;font-size:12px;font-weight:500;line-height:16px}.table-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.table-text-12px-400{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:16px}.table-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.button-links-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.button-links-12px-600{font-family:Inter,serif;font-size:12px;font-weight:600;line-height:16px}.button-links-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:16px}.input-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px}.input-area{font-family:Inter,serif;font-size:12px;font-weight:400;line-height:20px}.static-title-h3{font-family:Inter,serif;font-size:16px;font-weight:600;line-height:20px}.static-title-h4{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.dynamic-title-h4{font-family:Inter,serif;font-size:14px;font-weight:800;line-height:20px}.main-body-text-12px{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:20px}.main-body-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px}.main-subscription{font-family:Inter,serif;font-size:10px;font-weight:400;line-height:12px}.input-helper-9px{font-family:Inter,serif;font-size:9px;font-weight:300;line-height:12px}.typography-content-text{font-family:Inter,serif;font-size:12px;font-weight:350;line-height:16px}.main-subtitle,.card-content-text{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.filter-header-text{font-family:Inter,serif;font-size:14px;font-weight:500;line-height:18px}.btn-14px{font-family:Inter,serif;font-size:14px;font-weight:400;line-height:16px}.search-11px{font-family:Inter,serif;font-size:11px;font-weight:300;line-height:12px}:root{--input-text-12px: normal 300 12px / 16px \"Inter\";--input-text-14px: normal 300 14px / 16px \"Inter\"}.textfield-icons-container{display:flex;margin-inline-end:.5rem;margin-inline-start:.5rem;flex-direction:row;align-items:center;gap:8px}.textfield-icons-container .invalid-icon{color:var(--deleted-color);height:16px;width:16px}.textfield-icons-container .cleaner-icon{color:var(--gray-icon);height:16px;width:16px;pointer-events:auto}.textfield-icons-container .cleaner-icon:hover{color:var(--main-black);cursor:pointer}.textfield-icons-container .chevron{color:var(--gray-icon);height:16px;width:16px;pointer-events:none}.clickable:hover{cursor:pointer}.read-style-card[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}.read-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.read-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-card[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-card[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}.read-style-filter[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}.read-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.read-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.read-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.read-style-filter[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}.read-style-filter[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}.edit-style-card[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}.edit-style-card[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}.edit-style-card[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-card[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.edit-style-filter[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}.edit-style-filter[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}.edit-style-filter[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.edit-style-filter[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px}.default-label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}.default-label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}.default-dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card]{display:flex;align-items:flex-start;gap:4px;padding:8px 0}:host .container--read[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--read[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=card] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=card] .value{font-family:Inter,serif!important;font-size:14px!important;font-weight:400!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;color:var(--main-black)!important}:host .container--read[sproc-param-style=filter]{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px}:host .container--read[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--read[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--read[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--read[sproc-param-style=filter] .dashed-row{display:flex;height:16px;align-items:center;flex:1 0 0;border-bottom:1px dashed var(--table-stroke);min-width:20px}:host .container--read[sproc-param-style=filter] .value{font-family:Inter,serif;font-size:14px;font-weight:300;line-height:20px;color:var(--text-main)}:host .container--edit[sproc-param-style=card]{height:auto;width:100%;display:flex;flex-direction:column;padding-bottom:8px}:host .container--edit[sproc-param-style=card] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:100%}:host .container--edit[sproc-param-style=card] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=card] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host .container--edit[sproc-param-style=filter]{width:100%;display:flex;flex-direction:column}:host .container--edit[sproc-param-style=filter] .label-wrapper{display:flex;padding-bottom:1.5px;align-items:center;height:16px;gap:4px;width:fit-content}:host .container--edit[sproc-param-style=filter] .label{font-family:Inter,serif;font-size:12px;font-weight:300;line-height:16px;color:var(--main-black)}:host .container--edit[sproc-param-style=filter] .label.required:after{content:\"*\";color:var(--brand-danger);margin-left:2px}:host [tuiAppearance][data-appearance=textfield]{border-block-end-width:unset!important;padding:7px 60px 7px 12px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "component", type: ParamInvalidIconComponent, selector: "sproc-param-invalid-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: TuiTextarea, selector: "textarea[tuiTextarea]", inputs: ["min", "max", "content"] }, { kind: "directive", type: TuiTextareaLimit, selector: "[tuiTextarea][limit]", inputs: ["limit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4738
5033
|
}
|
|
4739
5034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ParamTextareaComponent, decorators: [{
|
|
4740
5035
|
type: Component,
|
|
@@ -5413,288 +5708,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5413
5708
|
}]
|
|
5414
5709
|
}] });
|
|
5415
5710
|
|
|
5416
|
-
const SIDE_MENU_OPENED_WIDTH = 350;
|
|
5417
|
-
const SIDE_MENU_CLOSED_WIDTH = 48;
|
|
5418
|
-
var EPageMenuIconsSrc;
|
|
5419
|
-
(function (EPageMenuIconsSrc) {
|
|
5420
|
-
EPageMenuIconsSrc["CHEVRON_RIGHT"] = "assets/ngx-register-base/icons/chevron-right.svg";
|
|
5421
|
-
EPageMenuIconsSrc["CHEVRON_UP"] = "assets/ngx-register-base/icons/chevron-up.svg";
|
|
5422
|
-
EPageMenuIconsSrc["MENU_CHEVRON"] = "assets/ngx-register-base/icons/chevron-menu.svg";
|
|
5423
|
-
})(EPageMenuIconsSrc || (EPageMenuIconsSrc = {}));
|
|
5424
|
-
|
|
5425
|
-
const PAGE_MENU_STATE = new InjectionToken('PAGE_MENU_STATE');
|
|
5426
|
-
// export const PAGE_MENU_STORE = new InjectionToken<AbstractMenuStateService>('PAGE_MENU_STATE');
|
|
5427
|
-
|
|
5428
|
-
class SprocPageMenuComponent {
|
|
5429
|
-
constructor() {
|
|
5430
|
-
this.menuItems = input.required();
|
|
5431
|
-
this.menuIconsSrc = input('');
|
|
5432
|
-
this.openLogoSrc = input('');
|
|
5433
|
-
this.closedLogoSrc = input('');
|
|
5434
|
-
this.findActiveSection = input.required();
|
|
5435
|
-
// TODO Добавить кастомную ширину меню
|
|
5436
|
-
this.menuOpenedWidth = `${SIDE_MENU_OPENED_WIDTH}px`;
|
|
5437
|
-
this.menuClosedWidth = `${SIDE_MENU_CLOSED_WIDTH}px`;
|
|
5438
|
-
this._router = inject(Router);
|
|
5439
|
-
this._state = inject(PAGE_MENU_STATE);
|
|
5440
|
-
this._dr = inject(DestroyRef);
|
|
5441
|
-
this.toggleDisabled$ = this._state.toggleDisabled$;
|
|
5442
|
-
this.menuState = toSignal(this._state.isOpen$);
|
|
5443
|
-
this.selectedSection = signal('register');
|
|
5444
|
-
this.expandedIds = signal(new Set());
|
|
5445
|
-
this.selectedItem = computed(() => this.selectedSection() ? this.codeToItem[this.selectedSection()] : null);
|
|
5446
|
-
// Хранит parent элементы выбранного пункта меню
|
|
5447
|
-
this.parentItems = computed(() => {
|
|
5448
|
-
const item = this.selectedItem();
|
|
5449
|
-
if (!item) {
|
|
5450
|
-
return [];
|
|
5451
|
-
}
|
|
5452
|
-
const parents = [];
|
|
5453
|
-
let current = item.parent;
|
|
5454
|
-
while (current) {
|
|
5455
|
-
parents.push(current);
|
|
5456
|
-
current = current.parent;
|
|
5457
|
-
}
|
|
5458
|
-
return parents;
|
|
5459
|
-
});
|
|
5460
|
-
this.parentItemCodes = computed(() => {
|
|
5461
|
-
const parentItems = this.parentItems();
|
|
5462
|
-
return new Set(parentItems.map((val) => val.code ?? ''));
|
|
5463
|
-
});
|
|
5464
|
-
this.navigationHierarchy = signal([]);
|
|
5465
|
-
this.codeToItem = {};
|
|
5466
|
-
this.isOpenServiceVersionInfo = false;
|
|
5467
|
-
this.ICONS_SRC = EPageMenuIconsSrc;
|
|
5468
|
-
// Построить меню и найти активную секцию
|
|
5469
|
-
effect(() => {
|
|
5470
|
-
const menuItems = this.menuItems();
|
|
5471
|
-
this.buildMenu(menuItems);
|
|
5472
|
-
this._findActiveSection();
|
|
5473
|
-
}, { allowSignalWrites: true });
|
|
5474
|
-
}
|
|
5475
|
-
addMenuScrollbar(id) {
|
|
5476
|
-
setTimeout(() => {
|
|
5477
|
-
// TODO Меню второго уровня есть скролл,третьего нет
|
|
5478
|
-
const collapsedMenu = document.querySelector(`[id="${id}"]`);
|
|
5479
|
-
const sideMenu = collapsedMenu?.querySelector('#side-menu__subitems');
|
|
5480
|
-
const sideMenuLevelTwo = sideMenu?.querySelector('#side-menu__subitems');
|
|
5481
|
-
const subitem = sideMenuLevelTwo
|
|
5482
|
-
? sideMenuLevelTwo.querySelectorAll('.side-menu__subitem')
|
|
5483
|
-
: sideMenu?.querySelectorAll('.side-menu__subitem');
|
|
5484
|
-
if (subitem) {
|
|
5485
|
-
const lastSubitem = subitem[subitem.length - 1];
|
|
5486
|
-
const rect = lastSubitem?.getBoundingClientRect();
|
|
5487
|
-
if (sideMenu && window.innerHeight - rect.bottom < 0) {
|
|
5488
|
-
// 40 тк высота плашки меню
|
|
5489
|
-
sideMenu.style.height = `${subitem.length * 40 + (window.innerHeight - rect.bottom - 1)}px`;
|
|
5490
|
-
sideMenu.style.overflowY = 'scroll';
|
|
5491
|
-
sideMenu.style.overflowX = 'hidden';
|
|
5492
|
-
}
|
|
5493
|
-
if (window.innerHeight - rect.bottom < 0 && sideMenuLevelTwo) {
|
|
5494
|
-
// 40 тк высота плашки меню
|
|
5495
|
-
sideMenuLevelTwo.style.height = `${subitem.length * 40 + (window.innerHeight - rect.bottom - 1)}px`;
|
|
5496
|
-
sideMenuLevelTwo.style.overflowY = 'scroll';
|
|
5497
|
-
sideMenuLevelTwo.style.overflowX = 'hidden';
|
|
5498
|
-
}
|
|
5499
|
-
}
|
|
5500
|
-
}, 0);
|
|
5501
|
-
}
|
|
5502
|
-
ngOnInit() {
|
|
5503
|
-
this._state.isOpen$.subscribe((menuState) => {
|
|
5504
|
-
if (menuState) {
|
|
5505
|
-
this.findRoute(this.selectedSection());
|
|
5506
|
-
}
|
|
5507
|
-
else {
|
|
5508
|
-
this.collapseMenu();
|
|
5509
|
-
}
|
|
5510
|
-
});
|
|
5511
|
-
}
|
|
5512
|
-
toggleNavigation() {
|
|
5513
|
-
this._state.toggle();
|
|
5514
|
-
}
|
|
5515
|
-
toggleItem(item) {
|
|
5516
|
-
this.addMenuScrollbar(item.id || '');
|
|
5517
|
-
this.expandedIds.update((currentExpand) => {
|
|
5518
|
-
const code = item.code;
|
|
5519
|
-
const copy = new Set(currentExpand);
|
|
5520
|
-
if (copy.has(code)) {
|
|
5521
|
-
copy.delete(code);
|
|
5522
|
-
}
|
|
5523
|
-
else {
|
|
5524
|
-
copy.clear();
|
|
5525
|
-
copy.add(code);
|
|
5526
|
-
const parents = this.getParents(item);
|
|
5527
|
-
for (const parent of parents) {
|
|
5528
|
-
copy.add(parent.code);
|
|
5529
|
-
}
|
|
5530
|
-
}
|
|
5531
|
-
return copy;
|
|
5532
|
-
});
|
|
5533
|
-
}
|
|
5534
|
-
collapseMenu(exception) {
|
|
5535
|
-
let codes = [];
|
|
5536
|
-
if (exception) {
|
|
5537
|
-
const parents = this.getParents(exception);
|
|
5538
|
-
codes = [exception.code, ...parents.map((parent) => parent.code)];
|
|
5539
|
-
}
|
|
5540
|
-
this.expandedIds.set(new Set(codes));
|
|
5541
|
-
}
|
|
5542
|
-
get isMenuOpened() {
|
|
5543
|
-
return this._state.isOpen;
|
|
5544
|
-
}
|
|
5545
|
-
get isMenuClosed() {
|
|
5546
|
-
return !this._state.isOpen;
|
|
5547
|
-
}
|
|
5548
|
-
isExternalLink(route) {
|
|
5549
|
-
if (!route) {
|
|
5550
|
-
return false;
|
|
5551
|
-
}
|
|
5552
|
-
return /^(https?:\/\/|www\.)/i.test(route);
|
|
5553
|
-
}
|
|
5554
|
-
handleNavigation(item) {
|
|
5555
|
-
if (!item.route) {
|
|
5556
|
-
return;
|
|
5557
|
-
}
|
|
5558
|
-
if (this.isExternalLink(item.route)) {
|
|
5559
|
-
window.open(item.route, '_blank');
|
|
5560
|
-
}
|
|
5561
|
-
else {
|
|
5562
|
-
this._router.navigate([item.route]);
|
|
5563
|
-
this.selectedSection.set(item.code ?? '');
|
|
5564
|
-
if (this.isMenuClosed) {
|
|
5565
|
-
this.collapseMenu();
|
|
5566
|
-
}
|
|
5567
|
-
}
|
|
5568
|
-
}
|
|
5569
|
-
serviceInfoOnActiveZone(active) {
|
|
5570
|
-
this.isOpenServiceVersionInfo = active && this.isOpenServiceVersionInfo;
|
|
5571
|
-
}
|
|
5572
|
-
serviceInfoOnObscured(obscured) {
|
|
5573
|
-
if (obscured) {
|
|
5574
|
-
this.isOpenServiceVersionInfo = false;
|
|
5575
|
-
}
|
|
5576
|
-
}
|
|
5577
|
-
buildMenu(menu) {
|
|
5578
|
-
const sortedMenuItems = [...menu].sort((a, b) => (a.order_num ?? 0) - (b.order_num ?? 0));
|
|
5579
|
-
const menuHash = {};
|
|
5580
|
-
for (const item of sortedMenuItems) {
|
|
5581
|
-
menuHash[item.id] = {
|
|
5582
|
-
title: item.title ?? '',
|
|
5583
|
-
route: item.route ?? '',
|
|
5584
|
-
id: item.id,
|
|
5585
|
-
children: [],
|
|
5586
|
-
code: item.code,
|
|
5587
|
-
icon: item.icon,
|
|
5588
|
-
accessedRoles: undefined,
|
|
5589
|
-
parent: undefined,
|
|
5590
|
-
};
|
|
5591
|
-
}
|
|
5592
|
-
const rootMenuItems = [];
|
|
5593
|
-
for (const item of sortedMenuItems) {
|
|
5594
|
-
if (item.id_parent && menuHash[item.id_parent]) {
|
|
5595
|
-
const parent = menuHash[item.id_parent];
|
|
5596
|
-
const child = menuHash[item.id];
|
|
5597
|
-
child.parent = parent;
|
|
5598
|
-
parent.children?.push(child);
|
|
5599
|
-
}
|
|
5600
|
-
else {
|
|
5601
|
-
rootMenuItems.push(menuHash[item.id]);
|
|
5602
|
-
}
|
|
5603
|
-
}
|
|
5604
|
-
this.navigationHierarchy.set(rootMenuItems);
|
|
5605
|
-
this.codeToItem = {};
|
|
5606
|
-
for (const id of Object.keys(menuHash)) {
|
|
5607
|
-
const item = menuHash[id];
|
|
5608
|
-
if (item.code) {
|
|
5609
|
-
this.codeToItem[item.code] = item;
|
|
5610
|
-
}
|
|
5611
|
-
}
|
|
5612
|
-
}
|
|
5613
|
-
findRoute(routeToFind) {
|
|
5614
|
-
const routeItem = this.codeToItem[routeToFind];
|
|
5615
|
-
if (!routeItem) {
|
|
5616
|
-
return;
|
|
5617
|
-
}
|
|
5618
|
-
if (this.isMenuOpened) {
|
|
5619
|
-
this.toggleItem(routeItem);
|
|
5620
|
-
}
|
|
5621
|
-
this.selectedSection.set(routeItem.code ?? '');
|
|
5622
|
-
}
|
|
5623
|
-
_findActiveSection() {
|
|
5624
|
-
this.findActiveSection()(this.resetSelection, this.findRoute);
|
|
5625
|
-
}
|
|
5626
|
-
getParents(item) {
|
|
5627
|
-
const parents = [];
|
|
5628
|
-
let current = item.parent;
|
|
5629
|
-
while (current) {
|
|
5630
|
-
parents.push(current);
|
|
5631
|
-
current = current.parent;
|
|
5632
|
-
}
|
|
5633
|
-
return parents;
|
|
5634
|
-
}
|
|
5635
|
-
resetSelection() {
|
|
5636
|
-
this.expandedIds.set(new Set());
|
|
5637
|
-
this.selectedSection.set('');
|
|
5638
|
-
}
|
|
5639
|
-
collectChildren(item) {
|
|
5640
|
-
const result = [];
|
|
5641
|
-
const queue = item.children?.slice() ?? [];
|
|
5642
|
-
let index = 0;
|
|
5643
|
-
while (index < queue.length) {
|
|
5644
|
-
const node = queue[index];
|
|
5645
|
-
result.push(node);
|
|
5646
|
-
if (node.children) {
|
|
5647
|
-
queue.push(...node.children);
|
|
5648
|
-
}
|
|
5649
|
-
index += 1;
|
|
5650
|
-
}
|
|
5651
|
-
return result;
|
|
5652
|
-
}
|
|
5653
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SprocPageMenuComponent, isStandalone: true, selector: "sproc-page-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, menuIconsSrc: { classPropertyName: "menuIconsSrc", publicName: "menuIconsSrc", isSignal: true, isRequired: false, transformFunction: null }, openLogoSrc: { classPropertyName: "openLogoSrc", publicName: "openLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, closedLogoSrc: { classPropertyName: "closedLogoSrc", publicName: "closedLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, findActiveSection: { classPropertyName: "findActiveSection", publicName: "findActiveSection", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--page-menu-opened-width": "this.menuOpenedWidth", "style.--page-menu-closed-width": "this.menuClosedWidth" } }, ngImport: i0, template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n <div class=\"side-menu__header\">\n <img\n [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n alt=\"Logo Icon\"\n class=\"side-menu__header__logo\"\n />\n <img\n (click)=\"toggleNavigation()\"\n [class.disabled]=\"toggleDisabled$ | async\"\n [height]=\"16\"\n [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n </div>\n\n @if (menuState()) {\n <div class=\"expanded-menu-content\">\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"\n menuItemOpened;\n context: { navigation_item: navigation_item, level: 0 }\n \"\n ></ng-container>\n }\n </div>\n\n <ng-content></ng-content>\n } @else {\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n ></ng-container>\n }\n }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code;\n\n <a\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [@fadeInOut]\n [class.menu-item_selected]=\"isHighlighted\"\n [class.padding-level-0]=\"level === 0\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n class=\"menu-item\"\n >\n @if (icon) {\n <span class=\"menu-item__icon\">\n <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n </span>\n }\n <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n @if (childrenCount > 0) {\n <img\n class=\"menu-item__chevron\"\n [class.menu-item__chevron_rotated]=\"!isExpanded\"\n [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n }\n </a>\n @if (isExpanded && childrenCount > 0) {\n @for (children of navigation_item.children ?? []; track $index) {\n <ng-container\n *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n ></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n <div\n (mouseleave)=\"collapseMenu()\"\n [id]=\"navigation_item.id\"\n class=\"collapsed-menu-content\"\n >\n @if (icon) {\n <a\n class=\"menu-item__icon_closed\"\n [class.menu-item_selected]=\"isHighlighted\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n (mouseenter)=\"toggleItem(navigation_item)\">\n <img\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n </a>\n }\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: 1, topPadding: 1 }\n \"\n >\n </ng-container>\n @if (isExpanded && childrenCount > 0) {\n <div class=\"static-item\">\n <span class=\"static-item__element\">\n {{ navigation_item.title }}\n </span>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n @let isExpanded = expandedIds().has(item.code);\n <div [id]=\"item.id\">\n @if (isExpanded && item.children.length > 0) {\n <div\n class=\"side-menu__subitems\"\n [class.padding-level-1]=\"level === 1\"\n [style.top.px]=\"topPadding * 40\"\n id=\"side-menu__subitems\"\n >\n @for (navigation_item of item.children; track navigation_item; let index = $index) {\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n <a\n class=\"side-menu__subitem\"\n [class.menu-item_selected]=\"isHighlighted\"\n (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n >\n <span\n [class.padding-level-1]=\"level === 1\">{{\n navigation_item.title\n }}</span>\n\n @if (childrenCount > 0) {\n <img\n class=\"chevron-right\"\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n }\n </a>\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: level + 1, topPadding: index }\n \"\n ></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .static-item__element{box-sizing:border-box;display:flex;align-items:center;color:var(--main-white);height:40px;width:294px;background:var(--page-menu-main);justify-content:space-between}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], animations: [
|
|
5655
|
-
trigger('fadeInOut', [
|
|
5656
|
-
transition(':enter', [
|
|
5657
|
-
style({
|
|
5658
|
-
opacity: 0,
|
|
5659
|
-
transform: 'translateY(-10px)',
|
|
5660
|
-
transformOrigin: 'top',
|
|
5661
|
-
}),
|
|
5662
|
-
animate('0.15s ease-in', style({
|
|
5663
|
-
opacity: 1,
|
|
5664
|
-
transform: 'translateY(0)',
|
|
5665
|
-
})),
|
|
5666
|
-
]),
|
|
5667
|
-
]),
|
|
5668
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5669
|
-
}
|
|
5670
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SprocPageMenuComponent, decorators: [{
|
|
5671
|
-
type: Component,
|
|
5672
|
-
args: [{ selector: 'sproc-page-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RouterLink, NgTemplateOutlet, NgClass, AsyncPipe, NgOptimizedImage], animations: [
|
|
5673
|
-
trigger('fadeInOut', [
|
|
5674
|
-
transition(':enter', [
|
|
5675
|
-
style({
|
|
5676
|
-
opacity: 0,
|
|
5677
|
-
transform: 'translateY(-10px)',
|
|
5678
|
-
transformOrigin: 'top',
|
|
5679
|
-
}),
|
|
5680
|
-
animate('0.15s ease-in', style({
|
|
5681
|
-
opacity: 1,
|
|
5682
|
-
transform: 'translateY(0)',
|
|
5683
|
-
})),
|
|
5684
|
-
]),
|
|
5685
|
-
]),
|
|
5686
|
-
], template: "<section [class]=\"menuState() ? 'side-menu side-menu_opened' : 'side-menu side-menu_closed'\">\n <div class=\"side-menu__header\">\n <img\n [src]=\"menuState() ? openLogoSrc() : closedLogoSrc()\"\n alt=\"Logo Icon\"\n class=\"side-menu__header__logo\"\n />\n <img\n (click)=\"toggleNavigation()\"\n [class.disabled]=\"toggleDisabled$ | async\"\n [height]=\"16\"\n [ngClass]=\"menuState() ? 'side-menu__header__chevron_opened' : 'side-menu__header__chevron_closed'\"\n [ngSrc]=\"ICONS_SRC.MENU_CHEVRON\" [width]=\"16\" alt=\"Menu Chevron\"/>\n </div>\n\n @if (menuState()) {\n <div class=\"expanded-menu-content\">\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"\n menuItemOpened;\n context: { navigation_item: navigation_item, level: 0 }\n \"\n ></ng-container>\n }\n </div>\n\n <ng-content></ng-content>\n } @else {\n @for (navigation_item of navigationHierarchy(); track $index) {\n <ng-container\n *ngTemplateOutlet=\"closedMenu; context: { navigation_item: navigation_item }\"\n ></ng-container>\n }\n }\n</section>\n\n<ng-template #menuItemOpened let-level=\"level\" let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code;\n\n <a\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [@fadeInOut]\n [class.menu-item_selected]=\"isHighlighted\"\n [class.padding-level-0]=\"level === 0\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n [style.padding-left.px]=\"level === 0 ? 0 : 44 + level * 20\"\n class=\"menu-item\"\n >\n @if (icon) {\n <span class=\"menu-item__icon\">\n <img [alt]=\"icon\" [width]=\"16\" [height]=\"16\" [ngSrc]=\"menuIconsSrc() + icon + '.svg'\">\n </span>\n }\n <span class=\"menu-item__title\"> {{ navigation_item.title }} </span>\n @if (childrenCount > 0) {\n <img\n class=\"menu-item__chevron\"\n [class.menu-item__chevron_rotated]=\"!isExpanded\"\n [alt]=\"icon\" [width]=\"16\" [height]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_UP\">\n }\n </a>\n @if (isExpanded && childrenCount > 0) {\n @for (children of navigation_item.children ?? []; track $index) {\n <ng-container\n *ngTemplateOutlet=\"menuItemOpened; context: { navigation_item: children, level: level + 1 }\"\n ></ng-container>\n }\n }\n</ng-template>\n\n<ng-template #closedMenu let-navigation_item=\"navigation_item\">\n @let isExpanded = expandedIds().has(navigation_item.code);\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let icon = navigation_item.icon;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n\n <div\n (mouseleave)=\"collapseMenu()\"\n [id]=\"navigation_item.id\"\n class=\"collapsed-menu-content\"\n >\n @if (icon) {\n <a\n class=\"menu-item__icon_closed\"\n [class.menu-item_selected]=\"isHighlighted\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n (mouseenter)=\"toggleItem(navigation_item)\">\n <img\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"menuIconsSrc() + icon + '.svg'\" alt=\"Menu Chevron\"/>\n </a>\n }\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: 1, topPadding: 1 }\n \"\n >\n </ng-container>\n @if (isExpanded && childrenCount > 0) {\n <div class=\"static-item\">\n <span class=\"static-item__element\">\n {{ navigation_item.title }}\n </span>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #menuClosedItem let-item=\"item\" let-level=\"level\" let-topPadding=\"topPadding\">\n @let isExpanded = expandedIds().has(item.code);\n <div [id]=\"item.id\">\n @if (isExpanded && item.children.length > 0) {\n <div\n class=\"side-menu__subitems\"\n [class.padding-level-1]=\"level === 1\"\n [style.top.px]=\"topPadding * 40\"\n id=\"side-menu__subitems\"\n >\n @for (navigation_item of item.children; track navigation_item; let index = $index) {\n @let childrenCount = navigation_item.children.length;\n @let code = navigation_item.code;\n @let route = navigation_item.code;\n @let isHighlighted = selectedSection() === code || parentItemCodes().has(code);\n <a\n class=\"side-menu__subitem\"\n [class.menu-item_selected]=\"isHighlighted\"\n (mouseenter)=\"childrenCount > 0 ? toggleItem(navigation_item) : collapseMenu(navigation_item)\"\n (click)=\"childrenCount === 0 ? handleNavigation(navigation_item) : toggleItem(navigation_item)\"\n [routerLink]=\"childrenCount > 0 || isExternalLink(route) ? undefined : route\"\n >\n <span\n [class.padding-level-1]=\"level === 1\">{{\n navigation_item.title\n }}</span>\n\n @if (childrenCount > 0) {\n <img\n class=\"chevron-right\"\n [height]=\"16\"\n [width]=\"16\"\n [ngSrc]=\"ICONS_SRC.CHEVRON_RIGHT\" alt=\"Menu Chevron\"/>\n }\n </a>\n <ng-container\n *ngTemplateOutlet=\"\n menuClosedItem;\n context: { item: navigation_item, level: level + 1, topPadding: index }\n \"\n ></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{background:var(--page-menu-main);height:100vh;max-height:100vh;z-index:1000;display:flex}:host tui-icon{width:16px;height:16px}:host ::-webkit-scrollbar{width:6px;background:var(--page-menu-main)}:host ::-webkit-scrollbar-thumb{width:6px;background:#c3c7cf;border-radius:2px}:host .side-menu{transition:all var(--page-menu-transition-time);display:flex;color:var(--main-white);flex-direction:column;flex-shrink:0;font-size:14px}:host .side-menu__header{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between}:host .side-menu__header__chevron{cursor:pointer;transition:rotate .15s linear}:host .side-menu__header__chevron_opened{margin:0 8px 0 0;rotate:0deg}:host .side-menu__header__chevron_closed{margin:0 0 0 -4px;rotate:180deg}:host .side-menu__header .disabled{pointer-events:none}:host .side-menu__header__logo{margin-left:8px}:host .side-menu_opened{width:var(--page-menu-opened-width)}:host .side-menu_closed{width:var(--page-menu-closed-width)}:host .side-menu__subitems,:host .side-menu .static-item{position:absolute;display:flex;z-index:3;right:0;top:0;flex-direction:column}:host .side-menu__subitems{width:294px;box-shadow:0 2px 6px #28282840;left:294px}:host .side-menu__subitems.padding-level-1{left:48px}:host .side-menu__subitems .chevron-right{margin-right:16px}:host .side-menu__subitems a span{height:40px;display:flex;align-items:center;padding-left:40px}:host .side-menu__subitems a span .padding-level-1{padding-left:64px}:host .side-menu .static-item{color:var(--main-black);left:48px;top:0}:host .side-menu__subitem,:host .side-menu .static-item__element{box-sizing:border-box;display:flex;align-items:center;color:var(--main-white);height:40px;width:294px;background:var(--page-menu-main);justify-content:space-between}:host .side-menu__subitem:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .static-item__element{justify-content:unset;padding-left:16px}:host .side-menu .expanded-menu-content{height:calc(100vh - 103px);-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll}:host .side-menu .expanded-menu-content::-webkit-scrollbar{display:none}:host .side-menu .collapsed-menu-content{position:relative}:host .side-menu .menu-item{display:flex;flex-direction:row;cursor:pointer;justify-content:start;align-items:center;box-sizing:border-box;transition:background .9ms;height:40px}:host .side-menu .menu-item_selected{background:var(--page-menu-active)!important;box-shadow:inset 3px 0 var(--main-white)}:host .side-menu .menu-item_selected:hover{background:var(--page-menu-active)!important}:host .side-menu .menu-item__chevron{margin-left:auto;margin-right:8px;transition:rotate .15s linear}:host .side-menu .menu-item__chevron_rotated{rotate:180deg}:host .side-menu .menu-item__title{padding:10px 0 10px 8px;overflow:hidden;color:var(--main-white);font-variant-numeric:lining-nums tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__title .page-menu-text-14px{font-family:Inter,serif;font-size:14px;font-weight:300}:host .side-menu .menu-item__icon{padding:0 8px 0 16px}:host .side-menu .menu-item__icon_closed{display:flex;height:40px;justify-content:center;align-items:center}:host .side-menu .menu-item__icon_closed:hover{background:var(--page-menu-main-hovered);cursor:pointer}:host .side-menu .menu-item:hover{background:var(--page-menu-main-hovered)}:host a{text-decoration:none;color:unset}\n"] }]
|
|
5687
|
-
}], ctorParameters: () => [], propDecorators: { menuOpenedWidth: [{
|
|
5688
|
-
type: HostBinding,
|
|
5689
|
-
args: ['style.--page-menu-opened-width']
|
|
5690
|
-
}], menuClosedWidth: [{
|
|
5691
|
-
type: HostBinding,
|
|
5692
|
-
args: ['style.--page-menu-closed-width']
|
|
5693
|
-
}] } });
|
|
5694
|
-
|
|
5695
|
-
class AbstractMenuStateService {
|
|
5696
|
-
}
|
|
5697
|
-
|
|
5698
5711
|
const ROOT_TITLE = 'root';
|
|
5699
5712
|
const NEW_ITEM_PREFIX = 'NEW_';
|
|
5700
5713
|
const MIGRATION_HINT = 'Генерирует SQL код для миграции таблицы cls_menu_item. Генерация кода происходит на основе последней версии сохраненного меню.';
|
|
@@ -7448,5 +7461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7448
7461
|
* Generated bundle index. Do not edit.
|
|
7449
7462
|
*/
|
|
7450
7463
|
|
|
7451
|
-
export { AbstractMenuStateService, CARD, CellTemplateDirective, ColumnSettingsComponent, DateTimeService, DialogService, EColumnDataType, EColumnStatus, EInputsAction, EInputsState, EMPTY_UUID, EMonth, EOrder, EPageMenuIconsSrc, ERegisterObjectState, ESwitcherValue, FastQueryStore, FilterButtonComponent, FiltersService, FiltersStateService, FiltersTransmitService, FormGroupWrapper, INPUTS_STATE_CONFIG_KEY, InputControl, InputsModule,
|
|
7464
|
+
export { AbstractMenuStateService, CARD, CellTemplateDirective, ColumnSettingsComponent, DateTimeService, DialogService, EColumnDataType, EColumnStatus, EInputsAction, EInputsState, EMPTY_UUID, EMonth, EOrder, EPageMenuIconsSrc, ERegisterObjectState, ESwitcherValue, FastQueryStore, FilterButtonComponent, FiltersService, FiltersStateService, FiltersTransmitService, FormGroupWrapper, INPUTS_STATE_CONFIG_KEY, InputControl, InputsModule, MAX_LENGTH_TEXT_PARAMS, MENU_CONSTRUCTOR_STORE_TOKEN, MIGRATION_HINT, MonthMapper, MonthsName, MonthsNumber, NEW_ITEM_PREFIX, NumberOnlyDirective, PAGE_MENU_STATE, ParamBase, ParamCalendarYearComponent, ParamCustomComponent, ParamDateBase, ParamDateComponent, ParamDateRangeComponent, ParamDateTimeComponent, ParamDateTimeRangeComponent, ParamMonthComponent, ParamMonthRangeComponent, ParamMultiSelectComponent, ParamSelectBase, ParamSelectComponent, ParamSwitcherComponent, ParamSwitcherDateTimeRangeComponent, ParamTextBase, ParamTextComponent, ParamTextareaComponent, ParamToggleComponent, ParamTreeComponent, ParamTreeMultiSelectComponent, ParamTreeSelectComponent, ParamTreeService, ROOT_TITLE, RegisterBase, RegisterBaseStore, RegisterTableComponent, RegisterTableFilterComponent, RegisterTableFilterModule, ResizeWindowObserverService, SELECT_ALL_ID, SELECT_ALL_NAME, SETTINGS_TYPE, SIDE_MENU_CLOSED_WIDTH, SIDE_MENU_OPENED_WIDTH, SearchInputComponent, SelectedObjectsStateService, SlidingPanelComponent, SlidingPanelModule, SprocAbstractMenuConstructorStore, SprocMenuConstructorComponent, SprocPageMenuComponent, StickyDirective, StickyRelativeDirective, SyncTreeLoaderService, TIME_ZONES, TIME_ZONE_HINTS, TREE_LOADER, TREE_LOADING_NODE, USER_PROFILE_LOADER, USER_SETTINGS_LOADER, distinctUntilChangedJSONs, getFirstSegmentOfPathName, getLastSegmentOfPathName, isDefined, isNonNull, just, moveInEventLoopIteration, removeSelectAll, selectAllItem, timezoneSelectItems, toPx, transformItemToNode };
|
|
7452
7465
|
//# sourceMappingURL=ngx-register-base.mjs.map
|