@porscheinformatik/clr-addons
Version:
Addon components for Clarity Angular
744 lines (713 loc) • 2.28 MB
JavaScript
import * as i0 from '@angular/core';
import { Component, NgModule, Injectable, EventEmitter, Output, Input, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, DOCUMENT, Inject, ContentChild, Optional, input, ChangeDetectionStrategy, signal, computed, SkipSelf, inject, model, contentChild, linkedSignal, DestroyRef, contentChildren, effect, viewChild, ViewContainerRef, output, afterRenderEffect, InjectionToken, isSignal, HostListener, LOCALE_ID, Self, Host, ChangeDetectorRef, NgZone, Injector, untracked, runInInjectionContext } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, NgComponentOutlet, NgTemplateOutlet, getLocaleDateFormat, FormatWidth, NgOptimizedImage, NgClass } from '@angular/common';
import * as i2 from '@clr/angular/icon';
import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, filterGridCircleIcon, filterGridIcon, pencilIcon, historyIcon as historyIcon$1, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon, exclamationTriangleIcon, circleArrowIcon, copyToClipboardIcon, successStandardIcon, angleDoubleIcon } from '@clr/angular/icon';
import * as i3 from '@angular/forms';
import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, NgModel } from '@angular/forms';
import * as i1$2 from '@clr/angular';
import { ClarityModule, ClrFormsModule, ClrDropdown, ClrIcon, ClrForm, ClrAlert, ClrPopoverPosition, ClrPopoverService, ClrCommonStringsService, ClrPopoverType, ClrPopoverHostDirective, CdkTrapFocusModule, ClrDropdownModule, ClrDatagrid, ClrDatagridColumn, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrControlLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule, ClrTooltipModule } from '@clr/angular';
import { Subject, BehaviorSubject, timer as timer$1, asyncScheduler, interval, map as map$1, distinctUntilChanged, shareReplay, combineLatest, skip, auditTime, tap, share, merge, fromEvent, first, take as take$1, debounceTime as debounceTime$1, of, switchMap, filter as filter$2, ReplaySubject, takeUntil as takeUntil$1, delay } from 'rxjs';
import { takeUntil, take, observeOn, filter as filter$1, skip as skip$1, debounceTime } from 'rxjs/operators';
import * as i2$1 from '@angular/router';
import { RouterModule } from '@angular/router';
import { trigger, transition, style, animate, state } from '@angular/animations';
import * as i1$1 from '@clr/angular/forms/common';
import * as i2$2 from '@clr/angular/forms/radio';
import * as i3$1 from '@clr/angular/popover/dropdown';
import * as i2$3 from '@clr/angular/popover/common';
import * as i2$4 from '@clr/angular/emphasis/alert';
import { takeUntilDestroyed, toObservable, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
import * as i1$3 from '@clr/angular/progress/spinner';
import * as i4 from '@clr/angular/forms/checkbox';
import * as i3$2 from '@clr/angular/forms/input';
import * as i1$4 from '@angular/common/http';
import { CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
import * as i4$1 from '@clr/angular/forms/datepicker';
import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
import * as i1$5 from '@clr/angular/popover/tooltip';
import { provideAnimations } from '@angular/platform-browser/animations';
/*
* Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
ClarityIcons.addIcons(arrowIcon);
class ClrBackButton {
constructor(location) {
this.location = location;
}
back() {
this.location.back();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButton, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrBackButton, isStandalone: false, selector: "clr-back-button", ngImport: i0, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButton, decorators: [{
type: Component,
args: [{ selector: 'clr-back-button', standalone: false, template: "<button type=\"button\" class=\"btn btn-icon btn-link back-button\" (click)=\"back()\">\n <cds-icon shape=\"arrow\" direction=\"left\" size=\"36\"></cds-icon>\n</button>\n" }]
}], ctorParameters: () => [{ type: i1.Location }] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrBackButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, declarations: [ClrBackButton], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrBackButton] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBackButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ClarityModule, FormsModule],
declarations: [ClrBackButton],
exports: [ClrBackButton],
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrBreadcrumbService {
constructor() {
this.breadcrumbChange = new Subject();
}
updateBreadcrumb(breadcrumbElements) {
this.breadcrumbChange.next(breadcrumbElements);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/*
* Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrBreadcrumb {
constructor(breadcrumbService) {
this.breadcrumbService = breadcrumbService;
/**
* The array of breadcrumb elements to be displayed.
*/
this.breadcrumbElements = [];
this.destroyed = new Subject();
this.breadcrumbService.breadcrumbChange.pipe(takeUntil(this.destroyed)).subscribe(r => {
this.breadcrumbElements = r;
});
}
ngOnDestroy() {
this.destroyed.next();
this.destroyed.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumb, deps: [{ token: ClrBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrBreadcrumb, isStandalone: false, selector: "clr-breadcrumb", ngImport: i0, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\">\n <ol class=\"breadcrumb\">\n @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n <li class=\"breadcrumb-item\">\n <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n </li>\n } @if (!breadcrumbItem.url) {\n <li class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n } }\n </ol>\n</nav>\n}\n", dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumb, decorators: [{
type: Component,
args: [{ selector: 'clr-breadcrumb', standalone: false, template: "@if (breadcrumbElements.length) {\n<nav aria-label=\"breadcrumb\">\n <ol class=\"breadcrumb\">\n @for (breadcrumbItem of breadcrumbElements; track breadcrumbItem) { @if (breadcrumbItem.url) {\n <li class=\"breadcrumb-item\">\n <a [routerLink]=\"breadcrumbItem.url\">{{breadcrumbItem.label}}</a>\n </li>\n } @if (!breadcrumbItem.url) {\n <li class=\"breadcrumb-item active\">{{breadcrumbItem.label}}</li>\n } }\n </ol>\n</nav>\n}\n" }]
}], ctorParameters: () => [{ type: ClrBreadcrumbService }] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrBreadcrumbModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, declarations: [ClrBreadcrumb], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrBreadcrumb] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, providers: [ClrBreadcrumbService], imports: [CommonModule, ClarityModule, RouterModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrBreadcrumbModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ClarityModule, RouterModule],
declarations: [ClrBreadcrumb],
exports: [ClrBreadcrumb],
providers: [ClrBreadcrumbService],
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
ClarityIcons.addIcons(angleIcon);
class ClrCollapseExpandSection {
constructor() {
this.isCollapsed = true;
this.disableHeaderStyles = false;
// there is no suitable option to detect, if the the subtitle is available or not
// see https://github.com/angular/angular/issues/26083
this.disableSubtitle = false;
this.collapsed = new EventEmitter();
this.expanded = new EventEmitter();
this.disableAnimation = true;
}
ngAfterViewInit() {
// do not animate before first change detection cycle
setTimeout(() => {
this.disableAnimation = false;
}, 0);
}
onCollapseExpand() {
if (this.isCollapsed) {
this.expanded.emit();
}
else {
this.collapsed.emit();
}
this.isCollapsed = !this.isCollapsed;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrCollapseExpandSection, isStandalone: false, selector: "clr-collapse-expand-section", inputs: { isCollapsed: ["clrIsCollapsed", "isCollapsed"], disableHeaderStyles: ["clrDisableHeaderStyles", "disableHeaderStyles"], disableSubtitle: ["clrDisableSubtitle", "disableSubtitle"] }, outputs: { collapsed: "clrCollapsed", expanded: "clrExpanded" }, ngImport: i0, template: "<div class=\"ces\">\n <ng-template #titleContent>\n <ng-content select=\"[clr-ces-title]\"></ng-content>\n </ng-template>\n <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n @if (!disableHeaderStyles) {\n <h2>\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n </h2>\n } @else {\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n }\n <ng-template #caretBtn>\n <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n <cds-icon\n shape=\"angle\"\n size=\"28\"\n class=\"ces-caret-icon\"\n [@rotateIcon]=\"isCollapsed\"\n [@.disabled]=\"disableAnimation\"\n ></cds-icon>\n </button>\n </ng-template>\n </div>\n <ng-template #subtitleContent>\n <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n </ng-template>\n @if (!disableSubtitle) {\n <div class=\"ces-subtitle\">\n @if (!disableHeaderStyles) {\n <h4>\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n </h4>\n } @else {\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n }\n </div>\n } @if (!isCollapsed) {\n <div [@collapseExpandAnimation]=\"isCollapsed\" [@.disabled]=\"disableAnimation\">\n <ng-content select=\"[clr-ces-content]\"></ng-content>\n </div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
trigger('collapseExpandAnimation', [
transition(':enter', [
style({ opacity: 0, height: 0, overflow: 'hidden' }),
animate('300ms', style({ opacity: 1, height: '*' })),
]),
transition(':leave', [
style({ opacity: 1, height: '*', overflow: 'hidden' }),
animate('300ms', style({ opacity: 0, height: 0 })),
]),
]),
trigger('rotateIcon', [
state('true', style({ transform: 'rotate(90deg)' })),
state('false', style({ transform: 'rotate(180deg)' })),
transition('true => false', animate('300ms ease-out')),
transition('false => true', animate('300ms ease-in')),
]),
] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSection, decorators: [{
type: Component,
args: [{ selector: 'clr-collapse-expand-section', animations: [
trigger('collapseExpandAnimation', [
transition(':enter', [
style({ opacity: 0, height: 0, overflow: 'hidden' }),
animate('300ms', style({ opacity: 1, height: '*' })),
]),
transition(':leave', [
style({ opacity: 1, height: '*', overflow: 'hidden' }),
animate('300ms', style({ opacity: 0, height: 0 })),
]),
]),
trigger('rotateIcon', [
state('true', style({ transform: 'rotate(90deg)' })),
state('false', style({ transform: 'rotate(180deg)' })),
transition('true => false', animate('300ms ease-out')),
transition('false => true', animate('300ms ease-in')),
]),
], standalone: false, template: "<div class=\"ces\">\n <ng-template #titleContent>\n <ng-content select=\"[clr-ces-title]\"></ng-content>\n </ng-template>\n <div class=\"ces-title\" [class.disabled-header-styles]=\"disableHeaderStyles\">\n @if (!disableHeaderStyles) {\n <h2>\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n </h2>\n } @else {\n <span\n class=\"ces-title-trigger\"\n (click)=\"onCollapseExpand()\"\n (keydown.enter)=\"onCollapseExpand()\"\n (keydown.space)=\"onCollapseExpand(); $event.preventDefault()\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-expanded]=\"!isCollapsed\"\n >\n <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n </span>\n <ng-container *ngTemplateOutlet=\"caretBtn\"></ng-container>\n }\n <ng-template #caretBtn>\n <button type=\"button\" (click)=\"onCollapseExpand()\" class=\"btn btn-icon btn-link ces-caret-btn\">\n <cds-icon\n shape=\"angle\"\n size=\"28\"\n class=\"ces-caret-icon\"\n [@rotateIcon]=\"isCollapsed\"\n [@.disabled]=\"disableAnimation\"\n ></cds-icon>\n </button>\n </ng-template>\n </div>\n <ng-template #subtitleContent>\n <ng-content select=\"[clr-ces-subtitle]\"></ng-content>\n </ng-template>\n @if (!disableSubtitle) {\n <div class=\"ces-subtitle\">\n @if (!disableHeaderStyles) {\n <h4>\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n </h4>\n } @else {\n <ng-container *ngTemplateOutlet=\"subtitleContent\"></ng-container>\n }\n </div>\n } @if (!isCollapsed) {\n <div [@collapseExpandAnimation]=\"isCollapsed\" [@.disabled]=\"disableAnimation\">\n <ng-content select=\"[clr-ces-content]\"></ng-content>\n </div>\n }\n</div>\n" }]
}], propDecorators: { isCollapsed: [{
type: Input,
args: ['clrIsCollapsed']
}], disableHeaderStyles: [{
type: Input,
args: ['clrDisableHeaderStyles']
}], disableSubtitle: [{
type: Input,
args: ['clrDisableSubtitle']
}], collapsed: [{
type: Output,
args: ['clrCollapsed']
}], expanded: [{
type: Output,
args: ['clrExpanded']
}] } });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrCollapseExpandSectionModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, declarations: [ClrCollapseExpandSection], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrCollapseExpandSection] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrCollapseExpandSectionModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ClarityModule, FormsModule],
declarations: [ClrCollapseExpandSection],
exports: [ClrCollapseExpandSection],
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
ClarityIcons.addIcons(timesIcon);
class ClrContentPanel {
constructor() {
this._open = false;
this.opened = new EventEmitter();
this.closed = new EventEmitter();
}
isOpen() {
return this._open;
}
open() {
if (this._open) {
return;
}
this._open = true;
this.opened.emit();
}
close() {
if (!this._open) {
return;
}
this._open = false;
this.closed.emit();
}
toggle() {
if (this._open) {
this.close();
}
else {
this.open();
}
}
resizeWindow() {
// this event is used by the tree table to adjust the colomns width
window.dispatchEvent(new Event('resize'));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrContentPanel, isStandalone: false, selector: "clr-content-panel", outputs: { opened: "clrOpened", closed: "clrClosed" }, host: { properties: { "class.content-panel": "true" } }, ngImport: i0, template: "@if (_open) {\n<div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-icon>\n </button>\n <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n </h3>\n <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n</div>\n<div [@fade] class=\"content-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n}\n", dependencies: [{ kind: "component", type: i2.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }], animations: [
trigger('slideIn', [
transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
]),
trigger('fade', [
transition(':enter', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
]),
] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanel, decorators: [{
type: Component,
args: [{ selector: 'clr-content-panel', animations: [
trigger('slideIn', [
transition(':enter', [style({ opacity: 0, width: 0 }), animate('0.2s', style({ opacity: 1, width: '*' }))]),
transition(':leave', [style({ opacity: 1, width: '*' }), animate('0.2s', style({ opacity: 0, width: 0 }))]),
]),
trigger('fade', [
transition(':enter', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
transition(':leave', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
]),
], host: {
'[class.content-panel]': 'true',
}, standalone: false, template: "@if (_open) {\n<div [@slideIn] class=\"content-panel-content-wrapper\" (@slideIn.done)=\"resizeWindow()\">\n <h3 class=\"content-panel-title\">\n <button type=\"button\" class=\"close content-panel-close-btn\" (click)=\"close()\">\n <cds-icon class=\"content-panel-close-icon\" shape=\"times\" size=\"24\"></cds-icon>\n </button>\n <ng-content select=\"[clr-content-panel-title]\"></ng-content>\n </h3>\n <ng-content select=\"[clr-content-panel-content]\"></ng-content>\n</div>\n<div [@fade] class=\"content-panel-backdrop\" (click)=\"close()\" (@fade.done)=\"resizeWindow()\"></div>\n}\n" }]
}], propDecorators: { opened: [{
type: Output,
args: ['clrOpened']
}], closed: [{
type: Output,
args: ['clrClosed']
}] } });
/*
* Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrContentPanelContainer {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrContentPanelContainer, isStandalone: false, selector: "clr-content-panel-container", host: { properties: { "class.content-container": "true", "class.content-panel-container": "true" } }, ngImport: i0, template: `
<div class="content-panel-outer-wrapper">
<ng-content select="clr-content-panel-container-content"></ng-content>
<ng-content select="clr-content-panel-container-footer"></ng-content>
</div>
<ng-content select="clr-content-panel"></ng-content>
`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainer, decorators: [{
type: Component,
args: [{
selector: 'clr-content-panel-container',
template: `
<div class="content-panel-outer-wrapper">
<ng-content select="clr-content-panel-container-content"></ng-content>
<ng-content select="clr-content-panel-container-footer"></ng-content>
</div>
<ng-content select="clr-content-panel"></ng-content>
`,
host: {
'[class.content-container]': 'true',
'[class.content-panel-container]': 'true',
},
standalone: false,
}]
}] });
/*
* Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrContentPanelContainerContent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrContentPanelContainerContent, isStandalone: false, selector: "clr-content-panel-container-content", host: { properties: { "class.content-area": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerContent, decorators: [{
type: Component,
args: [{
selector: 'clr-content-panel-container-content',
template: ` <ng-content></ng-content> `,
host: {
'[class.content-area]': 'true',
},
standalone: false,
}]
}] });
/*
* Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrContentPanelContainerFooter {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrContentPanelContainerFooter, isStandalone: false, selector: "clr-content-panel-container-footer", host: { properties: { "class.content-area-footer": "true" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelContainerFooter, decorators: [{
type: Component,
args: [{
selector: 'clr-content-panel-container-footer',
template: ` <ng-content></ng-content> `,
host: {
'[class.content-area-footer]': 'true',
},
standalone: false,
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrContentPanelModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, declarations: [ClrContentPanel,
ClrContentPanelContainer,
ClrContentPanelContainerContent,
ClrContentPanelContainerFooter], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrContentPanelModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ClarityModule, FormsModule],
declarations: [
ClrContentPanel,
ClrContentPanelContainer,
ClrContentPanelContainerContent,
ClrContentPanelContainerFooter,
],
exports: [ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter],
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/**
* Class to provide validators for the Clr Data List.
*/
class ClrDataListValidators {
/**
* @description
* Validator that requires the control's value to be found in a possible values array.
* This prohibits the user from entering custom values.
*
* @usageNotes
*
* ### Validate against an array of possible values
*
* ```typescript
* const control = new FormControl('1234', ClrDataListValidators.predefined(['ASDF', 'QWER']));
*
* console.log(control.errors); // {predefined: {predefined: ['ASDF', 'QWER'], actual: '1234'}}
* ```
*
* @returns A validator function that returns an error map with the
* `predefined` property if the validation check fails, otherwise `null`.
*
*/
static predefined(possibleValues) {
const validatorFn = (control) => {
if (!control.value) {
return null; // don't validate empty values to allow optional controls
}
const value = possibleValues.find(v => v === control.value);
return !value ? { predefined: { predefined: possibleValues, actual: control.value } } : null;
};
return validatorFn;
}
}
/*
* Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/**
* Directive which validates data list values, to be used in template driven forms.
* @see {@link ClrDataListValidators#predefined}
*/
class ClrDataListPredefinedValidatorDirective {
constructor() {
this.clrDataListPredefined = [];
}
validate(control) {
return ClrDataListValidators.predefined(this.clrDataListPredefined)(control);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrDataListPredefinedValidatorDirective, isStandalone: false, selector: "[clrDataListPredefined]", inputs: { clrDataListPredefined: "clrDataListPredefined" }, providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListPredefinedValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[clrDataListPredefined]',
providers: [{ provide: NG_VALIDATORS, useExisting: ClrDataListPredefinedValidatorDirective, multi: true }],
standalone: false,
}]
}], propDecorators: { clrDataListPredefined: [{
type: Input
}] } });
/*
* Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrDataListValidatorModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule, declarations: [ClrDataListPredefinedValidatorDirective], exports: [ClrDataListPredefinedValidatorDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDataListValidatorModule, decorators: [{
type: NgModule,
args: [{
declarations: [ClrDataListPredefinedValidatorDirective],
exports: [ClrDataListPredefinedValidatorDirective],
}]
}] });
/*
* Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrDateTimeContainer {
constructor(renderer, inputEl) {
this.renderer = renderer;
this.inputEl = inputEl;
}
ngAfterViewInit() {
// Create the time input
const timeInputElement = this.timeInput.createEmbeddedView(null).rootNodes[0];
// Select the clr input wrapper of the date-container
const inputWrapper = this.inputEl.nativeElement.querySelector('.clr-input-wrapper');
// Append it as a child
this.renderer.appendChild(inputWrapper, timeInputElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeContainer, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ClrDateTimeContainer, isStandalone: false, selector: "clr-date-time-container", host: { properties: { "class.date-time-container": "true" } }, viewQueries: [{ propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true, static: true }], ngImport: i0, template: `
<ng-content select="clr-date-container"></ng-content>
<ng-template #timeInput>
<div class="clr-input-wrapper">
<ng-content select="[clrTime]"></ng-content>
</div>
</ng-template>
`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeContainer, decorators: [{
type: Component,
args: [{
selector: 'clr-date-time-container',
template: `
<ng-content select="clr-date-container"></ng-content>
<ng-template #timeInput>
<div class="clr-input-wrapper">
<ng-content select="[clrTime]"></ng-content>
</div>
</ng-template>
`,
host: {
'[class.date-time-container]': 'true',
},
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { timeInput: [{
type: ViewChild,
args: ['timeInput', { static: true }]
}] } });
/*
* Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrTimeInput {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: ClrTimeInput, isStandalone: false, selector: "[clrTime]", host: { properties: { "class.clr-input": "true" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrTimeInput, decorators: [{
type: Directive,
args: [{
selector: '[clrTime]',
host: {
'[class.clr-input]': 'true',
},
standalone: false,
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrDateTimeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, declarations: [ClrDateTimeContainer, ClrTimeInput], imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule], exports: [ClrDateTimeContainer, ClrTimeInput] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDateTimeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ClarityModule, ClrFormsModule, FormsModule],
declarations: [ClrDateTimeContainer, ClrTimeInput],
exports: [ClrDateTimeContainer, ClrTimeInput],
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrDotPager {
constructor() {
this.uniqueName = Math.floor(Math.random() * 100000);
this.currentPageChange = new EventEmitter(false);
/**
* Page count, a value of 0 means no pagination
*/
this._pages = 0;
/**
* Current page
*/
this._currentPage = 0;
}
get pages() {
return this._pages;
}
set pages(pages) {
this._pages = pages;
}
get currentPage() {
return this._currentPage;
}
set currentPage(currentPage) {
if (currentPage !== this._currentPage) {
this._currentPage = currentPage;
this.currentPageChange.emit(currentPage);
}
}
pageArray() {
return Array(this._pages);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ClrDotPager, isStandalone: false, selector: "clr-dot-pager", inputs: { pages: ["clrPages", "pages"], currentPage: ["clrCurrentPage", "currentPage"] }, outputs: { currentPageChange: "clrCurrentPageChange" }, host: { properties: { "class.dot-pager": "true" } }, ngImport: i0, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n @for (a of pageArray(); track a; let page = $index) {\n <clr-radio-wrapper>\n <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n <label> </label>\n </clr-radio-wrapper>\n }\n</clr-radio-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i2$2.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i2$2.ClrRadioContainer, selector: "clr-radio-container", inputs: ["clrInline"] }, { kind: "component", type: i2$2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPager, decorators: [{
type: Component,
args: [{ selector: 'clr-dot-pager', host: { '[class.dot-pager]': 'true' }, standalone: false, template: "@if (pages > 0) {\n<clr-radio-container clrInline>\n @for (a of pageArray(); track a; let page = $index) {\n <clr-radio-wrapper>\n <input clrRadio type=\"radio\" [value]=\"page+1\" [(ngModel)]=\"currentPage\" name=\"{{uniqueName}}\" />\n <label> </label>\n </clr-radio-wrapper>\n }\n</clr-radio-container>\n}\n" }]
}], propDecorators: { currentPageChange: [{
type: Output,
args: ['clrCurrentPageChange']
}], pages: [{
type: Input,
args: ['clrPages']
}], currentPage: [{
type: Input,
args: ['clrCurrentPage']
}] } });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrDotPagerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, declarations: [ClrDotPager], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrDotPager] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, imports: [CommonModule, ClarityModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ClrDotPagerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ClarityModule, FormsModule],
declarations: [ClrDotPager],
exports: [ClrDotPager],
}]
}] });
/*
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
/*
* Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
class ClrDropdownOverflowDirective {
set clrMarginBottom(value) {
this.marginBottomPx = this.convertToPixels(value);
}
constructor(elRef) {
this.elRef = elRef;
this.defaultItemMinHeightRem = 1.5;
this.alreadyChecked = false;
this.marginBottomPx = 2;
}
ngAfterViewChecked() {
// first trigger manually because the subscription lower only triggers after first change
if (!this.nestedDropdownChildren?.length) {
this.applyDropdownOverflowStyles();
}
if (!this.nestedDropdownSubscription) {
this.nestedD