@valtimo/components 13.39.0 → 13.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/carbon.scss +86 -29
- package/fesm2022/valtimo-components.mjs +66 -15
- package/fesm2022/valtimo-components.mjs.map +1 -1
- package/lib/components/form-io/components/form-io/form-io.component.d.ts +3 -1
- package/lib/components/form-io/components/form-io/form-io.component.d.ts.map +1 -1
- package/lib/components/left-sidebar/left-sidebar.component.d.ts +6 -0
- package/lib/components/left-sidebar/left-sidebar.component.d.ts.map +1 -1
- package/lib/components/overflow-menu/overflow-menu.component.d.ts.map +1 -1
- package/lib/directives/valtimo-cds-modal/valtimo-cds-modal.directive.d.ts +2 -1
- package/lib/directives/valtimo-cds-modal/valtimo-cds-modal.directive.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ import * as i4 from 'ngx-logger';
|
|
|
32
32
|
import * as i6$1 from '@valtimo/security';
|
|
33
33
|
import * as i11 from '@ng-bootstrap/ng-bootstrap';
|
|
34
34
|
import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
|
|
35
|
-
import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
|
|
35
|
+
import { autoUpdate, computePosition, offset, flip, shift, hide } from '@floating-ui/dom';
|
|
36
36
|
import * as i3 from '@angular/cdk/layout';
|
|
37
37
|
import { LayoutModule } from '@angular/cdk/layout';
|
|
38
38
|
import { OverflowMenuVertical16, ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, WarningAltFilled16, WarningFilled16, TrashCan16, DocumentRequirements16, UserFollow16, Group16, User16 } from '@carbon/icons';
|
|
@@ -4567,6 +4567,9 @@ class OverflowMenuComponent {
|
|
|
4567
4567
|
const menu = this._portalledPane || this.menuContainer?.nativeElement;
|
|
4568
4568
|
if (!reference || !menu)
|
|
4569
4569
|
return;
|
|
4570
|
+
// Keep the pane invisible until the first position has been computed, so
|
|
4571
|
+
// it never flashes at an unpositioned location.
|
|
4572
|
+
menu.style.visibility = 'hidden';
|
|
4570
4573
|
this._cleanupAutoUpdate = autoUpdate(reference, menu, () => {
|
|
4571
4574
|
computePosition(reference, menu, {
|
|
4572
4575
|
// The pane is rendered with `position: fixed`, so positions must be
|
|
@@ -4578,11 +4581,16 @@ class OverflowMenuComponent {
|
|
|
4578
4581
|
offset({ mainAxis: this.offsetY, crossAxis: this.offsetX }),
|
|
4579
4582
|
flip(),
|
|
4580
4583
|
shift({ padding: 8 }),
|
|
4584
|
+
hide(),
|
|
4581
4585
|
],
|
|
4582
|
-
}).then(({ x, y }) => {
|
|
4586
|
+
}).then(({ x, y, middlewareData }) => {
|
|
4583
4587
|
Object.assign(menu.style, {
|
|
4584
4588
|
left: `${x}px`,
|
|
4585
4589
|
top: `${y}px`,
|
|
4590
|
+
// When the trigger is scrolled out of its clipping container (e.g. a
|
|
4591
|
+
// horizontally scrolled table), hide the pane instead of leaving it
|
|
4592
|
+
// floating detached over unrelated content.
|
|
4593
|
+
visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
|
|
4586
4594
|
});
|
|
4587
4595
|
});
|
|
4588
4596
|
});
|
|
@@ -5254,6 +5262,14 @@ class LeftSidebarComponent {
|
|
|
5254
5262
|
this._breakpointSubscription?.unsubscribe();
|
|
5255
5263
|
this._menuCollapsedByDefaultSubscription?.unsubscribe();
|
|
5256
5264
|
}
|
|
5265
|
+
/**
|
|
5266
|
+
* Keeps menu item views stable across menu reloads, so that the expanded state of
|
|
5267
|
+
* `cds-sidenav-menu` (which is internal to the Carbon component) survives a reload.
|
|
5268
|
+
* Keyed on the link, since titles are not guaranteed to be unique.
|
|
5269
|
+
*/
|
|
5270
|
+
trackByMenuItem(_index, menuItem) {
|
|
5271
|
+
return Array.isArray(menuItem.link) ? menuItem.link.join('/') : menuItem.title;
|
|
5272
|
+
}
|
|
5257
5273
|
navigateToRoute(route, event) {
|
|
5258
5274
|
event.preventDefault();
|
|
5259
5275
|
this.overflowMenuSequence$.next('');
|
|
@@ -5330,11 +5346,11 @@ class LeftSidebarComponent {
|
|
|
5330
5346
|
});
|
|
5331
5347
|
}
|
|
5332
5348
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i0.ElementRef }, { token: MenuService }, { token: ShellService }, { token: i3.BreakpointObserver }, { token: i1$3.Router }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: LeftSidebarComponent, isStandalone: false, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-sidenav\n *ngIf=\"{\n closestSequence: closestSequence$ | async,\n overflowMenuSequence: overflowMenuSequence$ | async,\n sideBarExpanded: sideBarExpanded$ | async,\n menuItemsLoaded: menuItemsLoaded$ | async,\n menuItems: menuItems$ | async,\n } as obs\"\n [allowExpansion]=\"false\"\n [expanded]=\"obs.sideBarExpanded\"\n>\n <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n <ng-container *ngIf=\"!menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n menuItem: menuItem,\n closestSequence: obs.closestSequence,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n closestSequence: obs.closestSequence,\n menuItem: menuItem,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n\n <div [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\">\n <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n <cds-sidenav-menu\n [title]=\"menuItem | menuItemTranslate | async\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n >\n <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n <ng-container\n *ngIf=\"{\n disableCaseCount: disableCaseCount$ | async,\n count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n } as vars\"\n >\n <cds-sidenav-item\n [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n [title]=\"\n menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n ? (childMenuItem | menuItemTranslate | async)\n : null\n \"\n [ngClass]=\"{\n 'cds--side-nav__item--empty': !childMenuItem.link,\n 'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n 'menu-item--visible':\n childMenuItem.includeFunction !== undefined &&\n (includeFunctionObservables[childMenuItem.title] | async),\n }\"\n [active]=\"vars.sequence === obs.closestSequence\"\n [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n >\n <valtimo-menu-item-text\n [accent]=\"!childMenuItem.link\"\n [menuItem]=\"childMenuItem\"\n [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n\n <ng-container\n *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n ></ng-container>\n </cds-sidenav-item>\n </ng-container>\n </ng-container>\n </cds-sidenav-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n #topMenuItem\n let-closestSequence=\"closestSequence\"\n let-menuItem=\"menuItem\"\n let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n ><cds-sidenav-item\n *ngIf=\"!menuItem.children\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\"\n [active]=\"vars.sequence === closestSequence\"\n (click)=\"navigateToRoute(menuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n href=\"javascript:void(0)\"\n >\n <valtimo-menu-item-text\n [menuItem]=\"menuItem\"\n [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n </cds-sidenav-item>\n </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n <ng-container *ngIf=\"count && !disableCaseCount\">\n <span class=\"case-count\">\n {{ count | caseCount }}\n </span>\n </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n <div class=\"loading-container\">\n <cds-loading size=\"sm\"></cds-loading>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent", "showOverFlowMenu"], outputs: ["overflowMenuClosed", "openInNewTab"] }, { kind: "component", type: i2$3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i2$3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i2$3.SideNavMenu, selector: "cds-sidenav-menu, ibm-sidenav-menu", inputs: ["useRouter", "title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "directive", type: CtrlClickDirective, selector: "[ctrl-click]", outputs: ["ctrl-click"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
|
|
5349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: LeftSidebarComponent, isStandalone: false, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-sidenav\n *ngIf=\"{\n closestSequence: closestSequence$ | async,\n overflowMenuSequence: overflowMenuSequence$ | async,\n sideBarExpanded: sideBarExpanded$ | async,\n menuItemsLoaded: menuItemsLoaded$ | async,\n menuItems: menuItems$ | async,\n } as obs\"\n [allowExpansion]=\"false\"\n [expanded]=\"obs.sideBarExpanded\"\n>\n <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n <ng-container *ngFor=\"let menuItem of obs.menuItems; trackBy: trackByMenuItem\">\n <ng-container *ngIf=\"!menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n menuItem: menuItem,\n closestSequence: obs.closestSequence,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n closestSequence: obs.closestSequence,\n menuItem: menuItem,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n\n <div [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\">\n <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n <cds-sidenav-menu\n [title]=\"menuItem | menuItemTranslate | async\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n >\n <ng-container\n *ngFor=\"let childMenuItem of menuItem.children; trackBy: trackByMenuItem\"\n >\n <ng-container\n *ngIf=\"{\n disableCaseCount: disableCaseCount$ | async,\n count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n } as vars\"\n >\n <cds-sidenav-item\n [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n [title]=\"\n menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n ? (childMenuItem | menuItemTranslate | async)\n : null\n \"\n [ngClass]=\"{\n 'cds--side-nav__item--empty': !childMenuItem.link,\n 'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n 'menu-item--visible':\n childMenuItem.includeFunction !== undefined &&\n (includeFunctionObservables[childMenuItem.title] | async),\n }\"\n [active]=\"vars.sequence === obs.closestSequence\"\n [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n >\n <valtimo-menu-item-text\n [accent]=\"!childMenuItem.link\"\n [menuItem]=\"childMenuItem\"\n [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n\n <ng-container\n *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n ></ng-container>\n </cds-sidenav-item>\n </ng-container>\n </ng-container>\n </cds-sidenav-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n #topMenuItem\n let-closestSequence=\"closestSequence\"\n let-menuItem=\"menuItem\"\n let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n ><cds-sidenav-item\n *ngIf=\"!menuItem.children\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\"\n [active]=\"vars.sequence === closestSequence\"\n (click)=\"navigateToRoute(menuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n href=\"javascript:void(0)\"\n >\n <valtimo-menu-item-text\n [menuItem]=\"menuItem\"\n [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n </cds-sidenav-item>\n </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n <ng-container *ngIf=\"count && !disableCaseCount\">\n <span class=\"case-count\">\n {{ count | caseCount }}\n </span>\n </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n <div class=\"loading-container\">\n <cds-loading size=\"sm\"></cds-loading>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent", "showOverFlowMenu"], outputs: ["overflowMenuClosed", "openInNewTab"] }, { kind: "component", type: i2$3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i2$3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i2$3.SideNavMenu, selector: "cds-sidenav-menu, ibm-sidenav-menu", inputs: ["useRouter", "title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "directive", type: CtrlClickDirective, selector: "[ctrl-click]", outputs: ["ctrl-click"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
|
|
5334
5350
|
}
|
|
5335
5351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LeftSidebarComponent, decorators: [{
|
|
5336
5352
|
type: Component,
|
|
5337
|
-
args: [{ selector: 'valtimo-left-sidebar', standalone: false, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-sidenav\n *ngIf=\"{\n closestSequence: closestSequence$ | async,\n overflowMenuSequence: overflowMenuSequence$ | async,\n sideBarExpanded: sideBarExpanded$ | async,\n menuItemsLoaded: menuItemsLoaded$ | async,\n menuItems: menuItems$ | async,\n } as obs\"\n [allowExpansion]=\"false\"\n [expanded]=\"obs.sideBarExpanded\"\n>\n <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n <ng-container *ngIf=\"!menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n menuItem: menuItem,\n closestSequence: obs.closestSequence,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n closestSequence: obs.closestSequence,\n menuItem: menuItem,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n\n <div [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\">\n <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n <cds-sidenav-menu\n [title]=\"menuItem | menuItemTranslate | async\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n >\n <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n <ng-container\n *ngIf=\"{\n disableCaseCount: disableCaseCount$ | async,\n count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n } as vars\"\n >\n <cds-sidenav-item\n [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n [title]=\"\n menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n ? (childMenuItem | menuItemTranslate | async)\n : null\n \"\n [ngClass]=\"{\n 'cds--side-nav__item--empty': !childMenuItem.link,\n 'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n 'menu-item--visible':\n childMenuItem.includeFunction !== undefined &&\n (includeFunctionObservables[childMenuItem.title] | async),\n }\"\n [active]=\"vars.sequence === obs.closestSequence\"\n [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n >\n <valtimo-menu-item-text\n [accent]=\"!childMenuItem.link\"\n [menuItem]=\"childMenuItem\"\n [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n\n <ng-container\n *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n ></ng-container>\n </cds-sidenav-item>\n </ng-container>\n </ng-container>\n </cds-sidenav-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n #topMenuItem\n let-closestSequence=\"closestSequence\"\n let-menuItem=\"menuItem\"\n let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n ><cds-sidenav-item\n *ngIf=\"!menuItem.children\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\"\n [active]=\"vars.sequence === closestSequence\"\n (click)=\"navigateToRoute(menuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n href=\"javascript:void(0)\"\n >\n <valtimo-menu-item-text\n [menuItem]=\"menuItem\"\n [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n </cds-sidenav-item>\n </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n <ng-container *ngIf=\"count && !disableCaseCount\">\n <span class=\"case-count\">\n {{ count | caseCount }}\n </span>\n </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n <div class=\"loading-container\">\n <cds-loading size=\"sm\"></cds-loading>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
5353
|
+
args: [{ selector: 'valtimo-left-sidebar', standalone: false, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<cds-sidenav\n *ngIf=\"{\n closestSequence: closestSequence$ | async,\n overflowMenuSequence: overflowMenuSequence$ | async,\n sideBarExpanded: sideBarExpanded$ | async,\n menuItemsLoaded: menuItemsLoaded$ | async,\n menuItems: menuItems$ | async,\n } as obs\"\n [allowExpansion]=\"false\"\n [expanded]=\"obs.sideBarExpanded\"\n>\n <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n <ng-container *ngFor=\"let menuItem of obs.menuItems; trackBy: trackByMenuItem\">\n <ng-container *ngIf=\"!menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n menuItem: menuItem,\n closestSequence: obs.closestSequence,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"menuItem.children\">\n <ng-container\n *ngTemplateOutlet=\"\n topMenuItem;\n context: {\n closestSequence: obs.closestSequence,\n menuItem: menuItem,\n overflowMenuSequence: obs.overflowMenuSequence,\n }\n \"\n ></ng-container>\n\n <div [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\">\n <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n <cds-sidenav-menu\n [title]=\"menuItem | menuItemTranslate | async\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n >\n <ng-container\n *ngFor=\"let childMenuItem of menuItem.children; trackBy: trackByMenuItem\"\n >\n <ng-container\n *ngIf=\"{\n disableCaseCount: disableCaseCount$ | async,\n count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n sequence: '' + menuItem.sequence + '.' + childMenuItem.sequence,\n } as vars\"\n >\n <cds-sidenav-item\n [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n [title]=\"\n menuItem.title === 'Cases' || menuItem.title === 'Dossiers'\n ? (childMenuItem | menuItemTranslate | async)\n : null\n \"\n [ngClass]=\"{\n 'cds--side-nav__item--empty': !childMenuItem.link,\n 'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n 'menu-item--visible':\n childMenuItem.includeFunction !== undefined &&\n (includeFunctionObservables[childMenuItem.title] | async),\n }\"\n [active]=\"vars.sequence === obs.closestSequence\"\n [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n >\n <valtimo-menu-item-text\n [accent]=\"!childMenuItem.link\"\n [menuItem]=\"childMenuItem\"\n [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n\n <ng-container\n *ngTemplateOutlet=\"countTemplate; context: {count: vars.count, disableCaseCount: vars.disableCaseCount}\"\n ></ng-container>\n </cds-sidenav-item>\n </ng-container>\n </ng-container>\n </cds-sidenav-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n #topMenuItem\n let-closestSequence=\"closestSequence\"\n let-menuItem=\"menuItem\"\n let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n ><cds-sidenav-item\n *ngIf=\"!menuItem.children\"\n [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n [ngClass]=\"{\n 'menu-item--hidden': menuItem.includeFunction !== undefined,\n 'menu-item--visible':\n menuItem.includeFunction !== undefined &&\n (includeFunctionObservables[menuItem.title] | async),\n }\"\n [active]=\"vars.sequence === closestSequence\"\n (click)=\"navigateToRoute(menuItem.link, $event)\"\n (contextmenu)=\"onRightClick(vars.sequence)\"\n (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n href=\"javascript:void(0)\"\n >\n <valtimo-menu-item-text\n [menuItem]=\"menuItem\"\n [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n ></valtimo-menu-item-text>\n </cds-sidenav-item>\n </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\" let-disableCaseCount=\"disableCaseCount\">\n <ng-container *ngIf=\"count && !disableCaseCount\">\n <span class=\"case-count\">\n {{ count | caseCount }}\n </span>\n </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n <div class=\"loading-container\">\n <cds-loading size=\"sm\"></cds-loading>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
5338
5354
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3.BreakpointObserver }, { type: i1$3.Router }, { type: i1$2.ConfigService }], propDecorators: { toggleButtonRef: [{
|
|
5339
5355
|
type: ViewChild,
|
|
5340
5356
|
args: ['toggleButton']
|
|
@@ -6339,12 +6355,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
6339
6355
|
* See the License for the specific language governing permissions and
|
|
6340
6356
|
* limitations under the License.
|
|
6341
6357
|
*/
|
|
6358
|
+
const OPEN_ATTRIBUTE_NAME = 'ng-reflect-open';
|
|
6342
6359
|
class ValtimoCdsModalDirective {
|
|
6343
6360
|
constructor(document, elementRef, renderer) {
|
|
6344
6361
|
this.document = document;
|
|
6345
6362
|
this.elementRef = elementRef;
|
|
6346
6363
|
this.renderer = renderer;
|
|
6364
|
+
// Not `readonly`: Angular assigns inputs, and template type checking reports every binding to
|
|
6365
|
+
// a read-only property as TS2540 "Cannot assign to ... because it is a read-only property".
|
|
6347
6366
|
this.minContentHeight = 0;
|
|
6367
|
+
// Content elements that already received the min-height style. The MutationObserver below
|
|
6368
|
+
// observes attribute changes in the same subtree that setStyle writes to, so styling must be
|
|
6369
|
+
// skipped for elements that were already styled — re-applying the style queues a new mutation
|
|
6370
|
+
// record, whose callback re-applies the style again, locking the page in an endless
|
|
6371
|
+
// MutationObserver microtask loop (the browser tab freezes).
|
|
6372
|
+
this._styledContentElements = new WeakSet();
|
|
6348
6373
|
/**
|
|
6349
6374
|
* Closes the modal on ESC via the same path as the close (X) button.
|
|
6350
6375
|
*
|
|
@@ -6398,13 +6423,20 @@ class ValtimoCdsModalDirective {
|
|
|
6398
6423
|
this._mutationObserver = new MutationObserver((mutations) => {
|
|
6399
6424
|
this.handleMutations(mutations);
|
|
6400
6425
|
});
|
|
6426
|
+
// Only the open/close attribute is of interest. Observing *every* attribute would include the
|
|
6427
|
+
// min-height this directive writes on the modal content below: that write mutates the observed
|
|
6428
|
+
// subtree, so it would schedule another callback, which writes again — a microtask loop that
|
|
6429
|
+
// starves the main thread and freezes the page. (It stayed dormant while the value was a plain
|
|
6430
|
+
// `<n>px`, which the CSSOM stores verbatim, so re-writing it was a no-op that recorded no
|
|
6431
|
+
// mutation. A value the browser re-serializes, such as `min(...)`, never compares equal to what
|
|
6432
|
+
// was set, so every write does record one.)
|
|
6401
6433
|
this._mutationObserver.observe(this.elementRef.nativeElement, {
|
|
6402
6434
|
attributes: true,
|
|
6435
|
+
attributeFilter: [OPEN_ATTRIBUTE_NAME],
|
|
6403
6436
|
childList: true,
|
|
6404
6437
|
subtree: true,
|
|
6405
|
-
characterData: true,
|
|
6406
6438
|
});
|
|
6407
|
-
const open = this.elementRef.nativeElement.getAttribute(
|
|
6439
|
+
const open = this.elementRef.nativeElement.getAttribute(OPEN_ATTRIBUTE_NAME);
|
|
6408
6440
|
if (open === 'true') {
|
|
6409
6441
|
this.applyDocumentOverflowHidden();
|
|
6410
6442
|
}
|
|
@@ -6420,7 +6452,6 @@ class ValtimoCdsModalDirective {
|
|
|
6420
6452
|
this.document.removeEventListener('keydown', this._onDocumentKeydown, true);
|
|
6421
6453
|
}
|
|
6422
6454
|
handleMutations(mutations) {
|
|
6423
|
-
const OPEN_ATTRIBUTE_NAME = 'ng-reflect-open';
|
|
6424
6455
|
for (const mutation of mutations) {
|
|
6425
6456
|
if (mutation.type === 'attributes' && mutation.attributeName === OPEN_ATTRIBUTE_NAME) {
|
|
6426
6457
|
const open = this.elementRef.nativeElement.getAttribute(OPEN_ATTRIBUTE_NAME);
|
|
@@ -6448,6 +6479,10 @@ class ValtimoCdsModalDirective {
|
|
|
6448
6479
|
return;
|
|
6449
6480
|
const contentElements = this.elementRef.nativeElement.querySelectorAll('.cds--modal-content');
|
|
6450
6481
|
for (const element of contentElements) {
|
|
6482
|
+
if (this._styledContentElements.has(element)) {
|
|
6483
|
+
continue;
|
|
6484
|
+
}
|
|
6485
|
+
this._styledContentElements.add(element);
|
|
6451
6486
|
this.renderer.setStyle(element, 'min-height', `min(${this.minContentHeight}px, calc(90dvh - 13rem))`, RendererStyleFlags2.Important);
|
|
6452
6487
|
}
|
|
6453
6488
|
}
|
|
@@ -7361,11 +7396,11 @@ class CarbonListComponent {
|
|
|
7361
7396
|
}
|
|
7362
7397
|
}
|
|
7363
7398
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7364
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey", trackByKey: "trackByKey" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n ~ /*\n ~ * Copyright 2015-2026 Ritense BV, the Netherlands.\n ~ *\n ~ * Licensed under EUPL, Version 1.2 (the \"License\");\n ~ * you may not use this file except in compliance with the License.\n ~ * You may obtain a copy of the License at\n ~ *\n ~ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~ *\n ~ * Unless required by applicable law or agreed to in writing, software\n ~ * distributed under the License is distributed on an \"AS IS\" basis,\n ~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ * See the License for the specific language governing permissions and\n ~ * limitations under the License.\n ~ */\n -->\n<cds-table-container\n *ngIf=\"{\n sort: sort$ | async,\n model: model$ | async,\n viewInitialized: viewInitialized$ | async,\n } as obs\"\n class=\"valtimo-carbon-list\"\n>\n <cds-table-header *ngIf=\"header\">\n <ng-content select=\"[header]\"></ng-content>\n </cds-table-header>\n\n <ng-content select=\"[tabs]\"></ng-content>\n\n <cds-table-toolbar\n *ngIf=\"!hideToolbar\"\n class=\"valtimo-carbon-list__toolbar\"\n [model]=\"obs.model\"\n [batchText]=\"batchText$ | async\"\n >\n <cds-table-toolbar-actions>\n <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n </cds-table-toolbar-actions>\n\n <cds-table-toolbar-content>\n <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n <cds-table-toolbar-search\n #toolbarSearch\n [expandable]=\"false\"\n [formControl]=\"searchFormControl\"\n [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n data-test-id=\"carbonListSearch\"\n (input)=\"updateAutocomplete()\"\n (keydown)=\"onSearchKeydown($event)\"\n (clear)=\"onSearchClear()\"\n (open)=\"onSearchOpenChange($event)\"\n ></cds-table-toolbar-search>\n <div\n class=\"valtimo-search-overlay\"\n aria-hidden=\"true\"\n ><span\n *ngFor=\"let segment of getSearchSegments()\"\n [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n >{{ segment.text }}</span></div>\n <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n <li\n *ngFor=\"let field of filteredSuggestions; let i = index\"\n [class.selected]=\"i === selectedSuggestionIndex\"\n (mousedown)=\"selectSuggestion(field)\"\n >{{ field.title || field.key }}</li>\n </ul>\n </div>\n\n <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n </cds-table-toolbar-content>\n </cds-table-toolbar>\n\n <cds-table\n *ngIf=\"!!obs.sort\"\n [ngClass]=\"{\n 'valtimo-carbon-list__header--hidden': hideColumnHeader,\n 'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n }\"\n [enableSingleSelect]=\"enableSingleSelect\"\n [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n [showSelectionColumn]=\"showSelectionColumn\"\n [skeleton]=\"loading\"\n [striped]=\"striped\"\n (sort)=\"onSort(obs.model.header[$event])\"\n (rowClick)=\"onRowClick($event)\"\n >\n <tbody cdsTableBody>\n <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n <ng-content></ng-content>\n </td>\n\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n {{ 'list.noResults' | translate }}\n </td>\n </tr>\n </tbody>\n </cds-table>\n\n <cds-pagination\n *ngIf=\"paginationModel && items?.length\"\n [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n [model]=\"paginationModel\"\n [showPageInput]=\"paginatorConfig.showPageInput\"\n [skeleton]=\"loading\"\n [translations]=\"paginationTranslations$ | async\"\n (selectPage)=\"onSelectPage($event)\"\n data-test-id=\"carbonListPagination\"\n ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n <i\n class=\"clickable\"\n [ngClass]=\"data.iconClass\"\n (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n <v-overflow-menu\n *ngIf=\"showActionItems\"\n [open]=\"currentOpenActionId === data.item\"\n (openChange)=\"handleActionOpenChange(data.item, $event)\"\n placement=\"bottom-end\"\n (click)=\"$event.stopPropagation()\"\n >\n <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n @for (action of data.actions; track action.label) {\n <v-overflow-menu-option\n [disabled]=\"action | actionItemDisabled: data.item | async\"\n [type]=\"action.type\"\n (selected)=\"action.callback(data.item)\"\n >\n <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n {{ action.label | translate }}\n </v-overflow-menu-option>\n }\n </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n <div *ngIf=\"data.locked\" class=\"locked\">\n <span\n class=\"float-right badge badge-pill badge-secondary bg-grey\"\n ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n >\n <i class=\"icon mdi mdi-lock\"></i>\n </span>\n </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__move-rows\">\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === 0\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveUpClick($event, data)\"\n data-test-id=\"carbonListMoveUp\"\n >\n <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === data.length - 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveDownClick($event, data)\"\n data-test-id=\"carbonListMoveDown\"\n >\n <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__draggable\">\n <button\n cdsButton=\"ghost\"\n [disabled]=\"dragAndDropDisabled\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (mousedown)=\"onDragStart($event, data)\"\n data-test-id=\"carbonListDragHandle\"\n >\n <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n @if (!data.tags) {\n -\n } @else {\n <div class=\"tag-template\">\n @if (data.tags.length === 0) {\n -\n } @else {\n @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n {{ tag.ellipsisContent ?? tag.content }}\n </cds-tag>\n }\n\n <cds-tag\n *ngIf=\"data.tags.length > data.tagAmount\"\n class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n type=\"high-contrast\"\n (click)=\"onTagClick($event, data.tags)\"\n data-test-id=\"carbonListExpandTags\"\n >\n {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n </cds-tag>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n [open]=\"tagModalOpen$ | async\"\n [tags]=\"tagModalData$ | async\"\n (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", skeletonRowCount: "skeletonRowCount", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", initialSearchValue: "initialSearchValue", searchDebounceMs: "searchDebounceMs", invalidSearchFields: "invalidSearchFields", searchFields: "searchFields", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled", expandedRowTemplate: "expandedRowTemplate", expandedRowKey: "expandedRowKey", trackByKey: "trackByKey" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, descendants: true }], ngImport: i0, template: "<!--\n ~ /*\n ~ * Copyright 2015-2026 Ritense BV, the Netherlands.\n ~ *\n ~ * Licensed under EUPL, Version 1.2 (the \"License\");\n ~ * you may not use this file except in compliance with the License.\n ~ * You may obtain a copy of the License at\n ~ *\n ~ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~ *\n ~ * Unless required by applicable law or agreed to in writing, software\n ~ * distributed under the License is distributed on an \"AS IS\" basis,\n ~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ * See the License for the specific language governing permissions and\n ~ * limitations under the License.\n ~ */\n -->\n<cds-table-container\n *ngIf=\"{\n sort: sort$ | async,\n model: model$ | async,\n viewInitialized: viewInitialized$ | async,\n } as obs\"\n class=\"valtimo-carbon-list\"\n>\n <cds-table-header *ngIf=\"header\">\n <ng-content select=\"[header]\"></ng-content>\n </cds-table-header>\n\n <ng-content select=\"[tabs]\"></ng-content>\n\n <cds-table-toolbar\n *ngIf=\"!hideToolbar\"\n class=\"valtimo-carbon-list__toolbar\"\n [model]=\"obs.model\"\n [batchText]=\"batchText$ | async\"\n >\n <cds-table-toolbar-actions>\n <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n </cds-table-toolbar-actions>\n\n <cds-table-toolbar-content>\n <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n <cds-table-toolbar-search\n #toolbarSearch\n [expandable]=\"false\"\n [formControl]=\"searchFormControl\"\n [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n data-test-id=\"carbonListSearch\"\n (input)=\"updateAutocomplete()\"\n (keydown)=\"onSearchKeydown($event)\"\n (clear)=\"onSearchClear()\"\n (open)=\"onSearchOpenChange($event)\"\n ></cds-table-toolbar-search>\n <div\n class=\"valtimo-search-overlay\"\n aria-hidden=\"true\"\n ><span\n *ngFor=\"let segment of getSearchSegments()\"\n [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n >{{ segment.text }}</span></div>\n <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n <li\n *ngFor=\"let field of filteredSuggestions; let i = index\"\n [class.selected]=\"i === selectedSuggestionIndex\"\n (mousedown)=\"selectSuggestion(field)\"\n >{{ field.title || field.key }}</li>\n </ul>\n </div>\n\n <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n </cds-table-toolbar-content>\n </cds-table-toolbar>\n\n <cds-table\n *ngIf=\"!!obs.sort\"\n [ngClass]=\"{\n 'valtimo-carbon-list__header--hidden': hideColumnHeader,\n 'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n }\"\n [enableSingleSelect]=\"enableSingleSelect\"\n [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n [showSelectionColumn]=\"showSelectionColumn\"\n [skeleton]=\"loading\"\n [striped]=\"striped\"\n (sort)=\"onSort(obs.model.header[$event])\"\n (rowClick)=\"onRowClick($event)\"\n >\n <tbody cdsTableBody>\n <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n <ng-content></ng-content>\n </td>\n\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n {{ 'list.noResults' | translate }}\n </td>\n </tr>\n </tbody>\n </cds-table>\n\n <cds-pagination\n *ngIf=\"paginationModel && items?.length\"\n [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n [model]=\"paginationModel\"\n [showPageInput]=\"paginatorConfig.showPageInput\"\n [skeleton]=\"loading\"\n [translations]=\"paginationTranslations$ | async\"\n (selectPage)=\"onSelectPage($event)\"\n data-test-id=\"carbonListPagination\"\n ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n <i\n class=\"clickable\"\n [ngClass]=\"data.iconClass\"\n (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n <v-overflow-menu\n *ngIf=\"showActionItems\"\n [open]=\"currentOpenActionId === data.item\"\n [portalToBody]=\"true\"\n (openChange)=\"handleActionOpenChange(data.item, $event)\"\n placement=\"bottom-end\"\n (click)=\"$event.stopPropagation()\"\n >\n <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n @for (action of data.actions; track action.label) {\n <v-overflow-menu-option\n [disabled]=\"action | actionItemDisabled: data.item | async\"\n [type]=\"action.type\"\n (selected)=\"action.callback(data.item)\"\n >\n <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n {{ action.label | translate }}\n </v-overflow-menu-option>\n }\n </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n <div *ngIf=\"data.locked\" class=\"locked\">\n <span\n class=\"float-right badge badge-pill badge-secondary bg-grey\"\n ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n >\n <i class=\"icon mdi mdi-lock\"></i>\n </span>\n </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__move-rows\">\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === 0\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveUpClick($event, data)\"\n data-test-id=\"carbonListMoveUp\"\n >\n <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === data.length - 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveDownClick($event, data)\"\n data-test-id=\"carbonListMoveDown\"\n >\n <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__draggable\">\n <button\n cdsButton=\"ghost\"\n [disabled]=\"dragAndDropDisabled\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (mousedown)=\"onDragStart($event, data)\"\n data-test-id=\"carbonListDragHandle\"\n >\n <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n @if (!data.tags) {\n -\n } @else {\n <div class=\"tag-template\">\n @if (data.tags.length === 0) {\n -\n } @else {\n @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n {{ tag.ellipsisContent ?? tag.content }}\n </cds-tag>\n }\n\n <cds-tag\n *ngIf=\"data.tags.length > data.tagAmount\"\n class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n type=\"high-contrast\"\n (click)=\"onTagClick($event, data.tags)\"\n data-test-id=\"carbonListExpandTags\"\n >\n {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n </cds-tag>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n [open]=\"tagModalOpen$ | async\"\n [tags]=\"tagModalData$ | async\"\n (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionItemDisabledPipe, name: "actionItemDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7365
7400
|
}
|
|
7366
7401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarbonListComponent, decorators: [{
|
|
7367
7402
|
type: Component,
|
|
7368
|
-
args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], standalone: false, template: "<!--\n ~ /*\n ~ * Copyright 2015-2026 Ritense BV, the Netherlands.\n ~ *\n ~ * Licensed under EUPL, Version 1.2 (the \"License\");\n ~ * you may not use this file except in compliance with the License.\n ~ * You may obtain a copy of the License at\n ~ *\n ~ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~ *\n ~ * Unless required by applicable law or agreed to in writing, software\n ~ * distributed under the License is distributed on an \"AS IS\" basis,\n ~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ * See the License for the specific language governing permissions and\n ~ * limitations under the License.\n ~ */\n -->\n<cds-table-container\n *ngIf=\"{\n sort: sort$ | async,\n model: model$ | async,\n viewInitialized: viewInitialized$ | async,\n } as obs\"\n class=\"valtimo-carbon-list\"\n>\n <cds-table-header *ngIf=\"header\">\n <ng-content select=\"[header]\"></ng-content>\n </cds-table-header>\n\n <ng-content select=\"[tabs]\"></ng-content>\n\n <cds-table-toolbar\n *ngIf=\"!hideToolbar\"\n class=\"valtimo-carbon-list__toolbar\"\n [model]=\"obs.model\"\n [batchText]=\"batchText$ | async\"\n >\n <cds-table-toolbar-actions>\n <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n </cds-table-toolbar-actions>\n\n <cds-table-toolbar-content>\n <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n <cds-table-toolbar-search\n #toolbarSearch\n [expandable]=\"false\"\n [formControl]=\"searchFormControl\"\n [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n data-test-id=\"carbonListSearch\"\n (input)=\"updateAutocomplete()\"\n (keydown)=\"onSearchKeydown($event)\"\n (clear)=\"onSearchClear()\"\n (open)=\"onSearchOpenChange($event)\"\n ></cds-table-toolbar-search>\n <div\n class=\"valtimo-search-overlay\"\n aria-hidden=\"true\"\n ><span\n *ngFor=\"let segment of getSearchSegments()\"\n [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n >{{ segment.text }}</span></div>\n <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n <li\n *ngFor=\"let field of filteredSuggestions; let i = index\"\n [class.selected]=\"i === selectedSuggestionIndex\"\n (mousedown)=\"selectSuggestion(field)\"\n >{{ field.title || field.key }}</li>\n </ul>\n </div>\n\n <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n </cds-table-toolbar-content>\n </cds-table-toolbar>\n\n <cds-table\n *ngIf=\"!!obs.sort\"\n [ngClass]=\"{\n 'valtimo-carbon-list__header--hidden': hideColumnHeader,\n 'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n }\"\n [enableSingleSelect]=\"enableSingleSelect\"\n [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n [showSelectionColumn]=\"showSelectionColumn\"\n [skeleton]=\"loading\"\n [striped]=\"striped\"\n (sort)=\"onSort(obs.model.header[$event])\"\n (rowClick)=\"onRowClick($event)\"\n >\n <tbody cdsTableBody>\n <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n <ng-content></ng-content>\n </td>\n\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n {{ 'list.noResults' | translate }}\n </td>\n </tr>\n </tbody>\n </cds-table>\n\n <cds-pagination\n *ngIf=\"paginationModel && items?.length\"\n [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n [model]=\"paginationModel\"\n [showPageInput]=\"paginatorConfig.showPageInput\"\n [skeleton]=\"loading\"\n [translations]=\"paginationTranslations$ | async\"\n (selectPage)=\"onSelectPage($event)\"\n data-test-id=\"carbonListPagination\"\n ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n <i\n class=\"clickable\"\n [ngClass]=\"data.iconClass\"\n (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n <v-overflow-menu\n *ngIf=\"showActionItems\"\n [open]=\"currentOpenActionId === data.item\"\n (openChange)=\"handleActionOpenChange(data.item, $event)\"\n placement=\"bottom-end\"\n (click)=\"$event.stopPropagation()\"\n >\n <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n @for (action of data.actions; track action.label) {\n <v-overflow-menu-option\n [disabled]=\"action | actionItemDisabled: data.item | async\"\n [type]=\"action.type\"\n (selected)=\"action.callback(data.item)\"\n >\n <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n {{ action.label | translate }}\n </v-overflow-menu-option>\n }\n </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n <div *ngIf=\"data.locked\" class=\"locked\">\n <span\n class=\"float-right badge badge-pill badge-secondary bg-grey\"\n ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n >\n <i class=\"icon mdi mdi-lock\"></i>\n </span>\n </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__move-rows\">\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === 0\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveUpClick($event, data)\"\n data-test-id=\"carbonListMoveUp\"\n >\n <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === data.length - 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveDownClick($event, data)\"\n data-test-id=\"carbonListMoveDown\"\n >\n <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__draggable\">\n <button\n cdsButton=\"ghost\"\n [disabled]=\"dragAndDropDisabled\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (mousedown)=\"onDragStart($event, data)\"\n data-test-id=\"carbonListDragHandle\"\n >\n <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n @if (!data.tags) {\n -\n } @else {\n <div class=\"tag-template\">\n @if (data.tags.length === 0) {\n -\n } @else {\n @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n {{ tag.ellipsisContent ?? tag.content }}\n </cds-tag>\n }\n\n <cds-tag\n *ngIf=\"data.tags.length > data.tagAmount\"\n class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n type=\"high-contrast\"\n (click)=\"onTagClick($event, data.tags)\"\n data-test-id=\"carbonListExpandTags\"\n >\n {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n </cds-tag>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n [open]=\"tagModalOpen$ | async\"\n [tags]=\"tagModalData$ | async\"\n (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
7403
|
+
args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], standalone: false, template: "<!--\n ~ /*\n ~ * Copyright 2015-2026 Ritense BV, the Netherlands.\n ~ *\n ~ * Licensed under EUPL, Version 1.2 (the \"License\");\n ~ * you may not use this file except in compliance with the License.\n ~ * You may obtain a copy of the License at\n ~ *\n ~ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~ *\n ~ * Unless required by applicable law or agreed to in writing, software\n ~ * distributed under the License is distributed on an \"AS IS\" basis,\n ~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ * See the License for the specific language governing permissions and\n ~ * limitations under the License.\n ~ */\n -->\n<cds-table-container\n *ngIf=\"{\n sort: sort$ | async,\n model: model$ | async,\n viewInitialized: viewInitialized$ | async,\n } as obs\"\n class=\"valtimo-carbon-list\"\n>\n <cds-table-header *ngIf=\"header\">\n <ng-content select=\"[header]\"></ng-content>\n </cds-table-header>\n\n <ng-content select=\"[tabs]\"></ng-content>\n\n <cds-table-toolbar\n *ngIf=\"!hideToolbar\"\n class=\"valtimo-carbon-list__toolbar\"\n [model]=\"obs.model\"\n [batchText]=\"batchText$ | async\"\n >\n <cds-table-toolbar-actions>\n <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n </cds-table-toolbar-actions>\n\n <cds-table-toolbar-content>\n <div *ngIf=\"isSearchable\" class=\"valtimo-search-container\" (focusout)=\"onSearchFocusOut($event)\">\n <cds-table-toolbar-search\n #toolbarSearch\n [expandable]=\"false\"\n [formControl]=\"searchFormControl\"\n [ngClass]=\"{'valtimo-search--invalid': invalidSearchFields.length > 0}\"\n data-test-id=\"carbonListSearch\"\n (input)=\"updateAutocomplete()\"\n (keydown)=\"onSearchKeydown($event)\"\n (clear)=\"onSearchClear()\"\n (open)=\"onSearchOpenChange($event)\"\n ></cds-table-toolbar-search>\n <div\n class=\"valtimo-search-overlay\"\n aria-hidden=\"true\"\n ><span\n *ngFor=\"let segment of getSearchSegments()\"\n [class.valtimo-search-overlay__invalid]=\"segment.isInvalid\"\n >{{ segment.text }}</span></div>\n <ul *ngIf=\"showAutocomplete && filteredSuggestions.length\" class=\"valtimo-search-autocomplete\" [style.left.px]=\"autocompleteLeft\">\n <li\n *ngFor=\"let field of filteredSuggestions; let i = index\"\n [class.selected]=\"i === selectedSuggestionIndex\"\n (mousedown)=\"selectSuggestion(field)\"\n >{{ field.title || field.key }}</li>\n </ul>\n </div>\n\n <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n </cds-table-toolbar-content>\n </cds-table-toolbar>\n\n <cds-table\n *ngIf=\"!!obs.sort\"\n [ngClass]=\"{\n 'valtimo-carbon-list__header--hidden': hideColumnHeader,\n 'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n }\"\n [enableSingleSelect]=\"enableSingleSelect\"\n [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n [showSelectionColumn]=\"showSelectionColumn\"\n [skeleton]=\"loading\"\n [striped]=\"striped\"\n (sort)=\"onSort(obs.model.header[$event])\"\n (rowClick)=\"onRowClick($event)\"\n >\n <tbody cdsTableBody>\n <tr class=\"valtimo-carbon-list__no-results\" data-test-id=\"carbonListNoResults\">\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n <ng-content></ng-content>\n </td>\n\n <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n {{ 'list.noResults' | translate }}\n </td>\n </tr>\n </tbody>\n </cds-table>\n\n <cds-pagination\n *ngIf=\"paginationModel && items?.length\"\n [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n [model]=\"paginationModel\"\n [showPageInput]=\"paginatorConfig.showPageInput\"\n [skeleton]=\"loading\"\n [translations]=\"paginationTranslations$ | async\"\n (selectPage)=\"onSelectPage($event)\"\n data-test-id=\"carbonListPagination\"\n ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n <i\n class=\"clickable\"\n [ngClass]=\"data.iconClass\"\n (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n <v-overflow-menu\n *ngIf=\"showActionItems\"\n [open]=\"currentOpenActionId === data.item\"\n [portalToBody]=\"true\"\n (openChange)=\"handleActionOpenChange(data.item, $event)\"\n placement=\"bottom-end\"\n (click)=\"$event.stopPropagation()\"\n >\n <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n @for (action of data.actions; track action.label) {\n <v-overflow-menu-option\n [disabled]=\"action | actionItemDisabled: data.item | async\"\n [type]=\"action.type\"\n (selected)=\"action.callback(data.item)\"\n >\n <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n {{ action.label | translate }}\n </v-overflow-menu-option>\n }\n </v-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n <div *ngIf=\"data.locked\" class=\"locked\">\n <span\n class=\"float-right badge badge-pill badge-secondary bg-grey\"\n ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n >\n <i class=\"icon mdi mdi-lock\"></i>\n </span>\n </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__move-rows\">\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === 0\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveUpClick($event, data)\"\n data-test-id=\"carbonListMoveUp\"\n >\n <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"data.index === data.length - 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onMoveDownClick($event, data)\"\n data-test-id=\"carbonListMoveDown\"\n >\n <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n <div class=\"valtimo-carbon-list__draggable\">\n <button\n cdsButton=\"ghost\"\n [disabled]=\"dragAndDropDisabled\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (mousedown)=\"onDragStart($event, data)\"\n data-test-id=\"carbonListDragHandle\"\n >\n <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n @if (!data.tags) {\n -\n } @else {\n <div class=\"tag-template\">\n @if (data.tags.length === 0) {\n -\n } @else {\n @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n {{ tag.ellipsisContent ?? tag.content }}\n </cds-tag>\n }\n\n <cds-tag\n *ngIf=\"data.tags.length > data.tagAmount\"\n class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n type=\"high-contrast\"\n (click)=\"onTagClick($event, data.tags)\"\n data-test-id=\"carbonListExpandTags\"\n >\n {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n </cds-tag>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n [open]=\"tagModalOpen$ | async\"\n [tags]=\"tagModalData$ | async\"\n (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}.valtimo-carbon-list ::ng-deep cds-table{display:block;overflow-x:auto;overflow-y:hidden}.valtimo-carbon-list ::ng-deep .cds--expandable-row:not(.cds--parent-row) td{border-top:none;border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody .cds--expandable-row.cds--parent-row td{border-bottom-width:2px}.valtimo-carbon-list ::ng-deep tbody tr:first-child td{border-top:none!important}.valtimo-search-container{position:relative;flex:1}.valtimo-search-container ::ng-deep cds-table-toolbar-search{display:flex;justify-content:flex-end;width:100%}.valtimo-search-container ::ng-deep cds-table-toolbar-search .cds--toolbar-search-container-active{width:100%}.valtimo-search-container ::ng-deep .cds--toolbar-search-container-active input{color:transparent!important;caret-color:var(--cds-text-primary, #161616)}.valtimo-search-overlay{position:absolute;inset:0;display:flex;align-items:center;height:3rem;padding:0 3rem;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.16px;line-height:1.28572;color:var(--cds-text-primary, #161616);white-space:pre;pointer-events:none;overflow:hidden}.valtimo-search-overlay__invalid{text-decoration:underline wavy var(--cds-support-error, #da1e28);text-decoration-skip-ink:none;text-underline-offset:3px}.valtimo-search-autocomplete{position:absolute;top:100%;max-height:150px;min-width:120px;max-width:250px;width:auto;overflow-y:auto;background:var(--cds-layer);border:1px solid var(--cds-border-subtle);box-shadow:0 2px 6px #0000001a;z-index:9000;list-style:none;margin:0;padding:0}.valtimo-search-autocomplete li{padding:6px 12px;cursor:pointer;font-size:.875rem;white-space:nowrap}.valtimo-search-autocomplete li:hover,.valtimo-search-autocomplete li.selected{background:var(--cds-layer-hover)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
7369
7404
|
}], ctorParameters: () => [{ type: EllipsisPipe }, { type: CarbonListFilterPipe }, { type: i2$3.IconService }, { type: i4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { actionsMenuTemplate: [{
|
|
7370
7405
|
type: ViewChild,
|
|
7371
7406
|
args: ['actionsMenuTemplate']
|
|
@@ -9540,7 +9575,14 @@ class FormioComponent {
|
|
|
9540
9575
|
};
|
|
9541
9576
|
return deepmerge(defaultOptions, overrideOptions);
|
|
9542
9577
|
}), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), tap$1(options => this.logger.debug('Form.IO options used', options)));
|
|
9543
|
-
this.
|
|
9578
|
+
this._storeTokenInLocalStorage = !this.configService.getFeatureToggle('disableFormioTokenInLocalStorage');
|
|
9579
|
+
this._inMemoryTokenSet$ = new BehaviorSubject(false);
|
|
9580
|
+
// The form is only rendered once a token is available. In the default (legacy) mode the token
|
|
9581
|
+
// is persisted to localStorage, so we wait for that; when disableFormioTokenInLocalStorage is
|
|
9582
|
+
// enabled the token is kept in memory only, so we wait for the in-memory token instead.
|
|
9583
|
+
this.tokenReady$ = this._storeTokenInLocalStorage
|
|
9584
|
+
? this.localStorageService.tokenSetInLocalStorage$
|
|
9585
|
+
: this._inMemoryTokenSet$.asObservable();
|
|
9544
9586
|
this._subscriptions = new Subscription();
|
|
9545
9587
|
this._tokenTimerSubscription = new Subscription();
|
|
9546
9588
|
this.setOverrideOptions(this.configService.config);
|
|
@@ -9614,10 +9656,19 @@ class FormioComponent {
|
|
|
9614
9656
|
});
|
|
9615
9657
|
}
|
|
9616
9658
|
setToken(token) {
|
|
9617
|
-
|
|
9618
|
-
|
|
9659
|
+
if (this._storeTokenInLocalStorage) {
|
|
9660
|
+
Formio.setUser(jwtDecode(token));
|
|
9661
|
+
Formio.setToken(token);
|
|
9662
|
+
this.localStorageService.setTokenInLocalStorage(token);
|
|
9663
|
+
}
|
|
9664
|
+
else {
|
|
9665
|
+
// Feature toggle 'disableFormioTokenInLocalStorage': keep the token in memory only, since
|
|
9666
|
+
// Formio.setToken/setUser would persist it (and the decoded user) to localStorage where any
|
|
9667
|
+
// script could read it. Our APIs authenticate via the Keycloak token on the HTTP interceptor.
|
|
9668
|
+
Formio.token = token;
|
|
9669
|
+
this._inMemoryTokenSet$.next(true);
|
|
9670
|
+
}
|
|
9619
9671
|
this.setTimerForTokenRefresh(token);
|
|
9620
|
-
this.localStorageService.setTokenInLocalStorage(token);
|
|
9621
9672
|
this.logger.debug('New token set for form.io.');
|
|
9622
9673
|
}
|
|
9623
9674
|
setTimerForTokenRefresh(token) {
|
|
@@ -9662,11 +9713,11 @@ class FormioComponent {
|
|
|
9662
9713
|
this._overrideOptions$.next(config.formioOptions);
|
|
9663
9714
|
}
|
|
9664
9715
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, deps: [{ token: i6$1.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$3.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i1$2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9665
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<div\n class=\"formio-carbon\"\n cdsLayer=\"1\"\n *ngIf=\"{\n currentLanguage: currentLanguage$ | async,\n formioOptions: formioOptions$ | async,\n submission: submission$ | async,\n readOnly: readOnly$ | async,\n form: form$ | async,\n errors: errors$ | async,\n
|
|
9716
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", errors: "errors", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], usesOnChanges: true, ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<div\n class=\"formio-carbon\"\n cdsLayer=\"1\"\n *ngIf=\"{\n currentLanguage: currentLanguage$ | async,\n formioOptions: formioOptions$ | async,\n submission: submission$ | async,\n readOnly: readOnly$ | async,\n form: form$ | async,\n errors: errors$ | async,\n tokenReady: tokenReady$ | async,\n } as obs\"\n>\n <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n <ol>\n <li *ngFor=\"let error of obs.errors\">\n {{ error }}\n </li>\n </ol>\n </div>\n\n <formio\n *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n [form]=\"obs.form\"\n [language]=\"languageEventEmitter\"\n [options]=\"obs.formioOptions\"\n [readOnly]=\"obs.readOnly\"\n [refresh]=\"refreshForm\"\n [submission]=\"obs.submission\"\n (change)=\"onChange($event)\"\n (nextPage)=\"nextPage()\"\n (prevPage)=\"prevPage()\"\n (ready)=\"formReady($event)\"\n (submit)=\"onSubmit($event)\"\n (customEvent)=\"onCustomEvent($event)\"\n ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
|
|
9666
9717
|
}
|
|
9667
9718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormioComponent, decorators: [{
|
|
9668
9719
|
type: Component,
|
|
9669
|
-
args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], standalone: false, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<div\n class=\"formio-carbon\"\n cdsLayer=\"1\"\n *ngIf=\"{\n currentLanguage: currentLanguage$ | async,\n formioOptions: formioOptions$ | async,\n submission: submission$ | async,\n readOnly: readOnly$ | async,\n form: form$ | async,\n errors: errors$ | async,\n
|
|
9720
|
+
args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], standalone: false, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<div\n class=\"formio-carbon\"\n cdsLayer=\"1\"\n *ngIf=\"{\n currentLanguage: currentLanguage$ | async,\n formioOptions: formioOptions$ | async,\n submission: submission$ | async,\n readOnly: readOnly$ | async,\n form: form$ | async,\n errors: errors$ | async,\n tokenReady: tokenReady$ | async,\n } as obs\"\n>\n <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n <ol>\n <li *ngFor=\"let error of obs.errors\">\n {{ error }}\n </li>\n </ol>\n </div>\n\n <formio\n *ngIf=\"obs.formioOptions && obs.form && obs.tokenReady\"\n [form]=\"obs.form\"\n [language]=\"languageEventEmitter\"\n [options]=\"obs.formioOptions\"\n [readOnly]=\"obs.readOnly\"\n [refresh]=\"refreshForm\"\n [submission]=\"obs.submission\"\n (change)=\"onChange($event)\"\n (nextPage)=\"nextPage()\"\n (prevPage)=\"prevPage()\"\n (ready)=\"formReady($event)\"\n (submit)=\"onSubmit($event)\"\n (customEvent)=\"onCustomEvent($event)\"\n ></formio>\n</div>\n" }]
|
|
9670
9721
|
}], ctorParameters: () => [{ type: i6$1.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$3.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i1$2.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }, { type: FormioTranslationService }], propDecorators: { options: [{
|
|
9671
9722
|
type: Input
|
|
9672
9723
|
}], submission: [{
|