@porscheinformatik/clr-addons 12.3.0 → 12.3.1
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/esm2020/flow-bar/flow-bar.mjs +3 -2
- package/esm2020/flow-bar/flow-bar.module.mjs +6 -5
- package/esm2020/history/history.mjs +4 -3
- package/esm2020/history/history.module.mjs +6 -5
- package/esm2020/location-bar/location-bar-node/location-bar-node.component.mjs +5 -4
- package/esm2020/location-bar/location-bar.module.mjs +5 -4
- package/esm2020/multilingual/multilingual-selector.mjs +4 -3
- package/esm2020/multilingual/multilingual.module.mjs +6 -5
- package/fesm2015/clr-addons.mjs +116 -116
- package/fesm2015/clr-addons.mjs.map +1 -1
- package/fesm2020/clr-addons.mjs +116 -116
- package/fesm2020/clr-addons.mjs.map +1 -1
- package/flow-bar/flow-bar.module.d.ts +2 -1
- package/history/history.module.d.ts +2 -1
- package/location-bar/location-bar.module.d.ts +2 -1
- package/multilingual/multilingual.module.d.ts +2 -1
- package/package.json +1 -1
package/fesm2015/clr-addons.mjs
CHANGED
|
@@ -635,6 +635,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
635
635
|
}]
|
|
636
636
|
}] });
|
|
637
637
|
|
|
638
|
+
/*
|
|
639
|
+
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
640
|
+
* This software is released under MIT license.
|
|
641
|
+
* The full license information can be found in LICENSE in the root directory of this project.
|
|
642
|
+
*/
|
|
643
|
+
class ClrDropdownOverflowDirective {
|
|
644
|
+
constructor(elRef) {
|
|
645
|
+
this.elRef = elRef;
|
|
646
|
+
this.defaultItemMinHeightRem = 1.5;
|
|
647
|
+
this.marginBottomRem = 0.1;
|
|
648
|
+
}
|
|
649
|
+
ngAfterViewInit() {
|
|
650
|
+
this.calculateDropdownMenu();
|
|
651
|
+
}
|
|
652
|
+
calculateDropdownMenu() {
|
|
653
|
+
// the vertical position of our element in the current window
|
|
654
|
+
const y = this.elRef.nativeElement.getBoundingClientRect().y;
|
|
655
|
+
const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
|
|
656
|
+
// see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
|
|
657
|
+
for (const item of this.elRef.nativeElement.getElementsByClassName('dropdown-item')) {
|
|
658
|
+
item.style.minHeight = itemMinHeightPx + 'px';
|
|
659
|
+
}
|
|
660
|
+
this.elRef.nativeElement.style.maxHeight =
|
|
661
|
+
this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, window.innerHeight - y - this.convertRemToPixels(this.marginBottomRem)) + 'px';
|
|
662
|
+
this.elRef.nativeElement.style.overflowY = 'auto';
|
|
663
|
+
}
|
|
664
|
+
getMenuMaxHeight(menuMaxHeightProvided, menuMaxHeightPx) {
|
|
665
|
+
if (menuMaxHeightProvided) {
|
|
666
|
+
const maxHeightPx = this.convertToPixels(menuMaxHeightProvided);
|
|
667
|
+
return maxHeightPx > menuMaxHeightPx ? menuMaxHeightPx : maxHeightPx;
|
|
668
|
+
}
|
|
669
|
+
return menuMaxHeightPx;
|
|
670
|
+
}
|
|
671
|
+
getItemMinHeight(itemMinHeightProvided) {
|
|
672
|
+
if (itemMinHeightProvided) {
|
|
673
|
+
return this.convertToPixels(itemMinHeightProvided);
|
|
674
|
+
}
|
|
675
|
+
return this.convertRemToPixels(this.defaultItemMinHeightRem);
|
|
676
|
+
}
|
|
677
|
+
convertToPixels(value) {
|
|
678
|
+
if (typeof value === 'string') {
|
|
679
|
+
if (value.endsWith('px')) {
|
|
680
|
+
return parseFloat(value.replace('px', ''));
|
|
681
|
+
}
|
|
682
|
+
else if (value.endsWith('rem')) {
|
|
683
|
+
return this.convertRemToPixels(parseFloat(value.replace('rem', '')));
|
|
684
|
+
}
|
|
685
|
+
else if (value.endsWith('vh')) {
|
|
686
|
+
return this.convertVhToPixels(parseFloat(value.replace('vh', '')));
|
|
687
|
+
}
|
|
688
|
+
return parseFloat(value);
|
|
689
|
+
}
|
|
690
|
+
return value;
|
|
691
|
+
}
|
|
692
|
+
convertRemToPixels(rem) {
|
|
693
|
+
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
694
|
+
}
|
|
695
|
+
convertVhToPixels(vh) {
|
|
696
|
+
const pxPerVhUnit = window.innerHeight / 100;
|
|
697
|
+
return vh * pxPerVhUnit;
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
ClrDropdownOverflowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
701
|
+
ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, ngImport: i0 });
|
|
702
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
|
|
703
|
+
type: Directive,
|
|
704
|
+
args: [{ selector: 'clr-dropdown-menu' }]
|
|
705
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clrDropdownMenuMaxHeight: [{
|
|
706
|
+
type: Input
|
|
707
|
+
}], clrDropdownMenuItemMinHeight: [{
|
|
708
|
+
type: Input
|
|
709
|
+
}] } });
|
|
710
|
+
|
|
638
711
|
/*
|
|
639
712
|
* Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
|
|
640
713
|
* This software is released under MIT license.
|
|
@@ -774,7 +847,7 @@ class ClrFlowBar {
|
|
|
774
847
|
}
|
|
775
848
|
}
|
|
776
849
|
ClrFlowBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
777
|
-
ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrFlowBar, selector: "clr-flow-bar", inputs: { _steps: ["clrSteps", "_steps"], _activeStep: ["clrActiveStep", "_activeStep"] }, outputs: { _activeStepChange: "clrActiveStepChange" }, host: { properties: { "class.flow-bar": "true" } }, ngImport: i0, template: "<div class=\"flow-bar-wrapper\">\n <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n <button\n class=\"btn btn-link flow-bar-btn\"\n [disabled]=\"!step.enabled\"\n [class.active]=\"step === _activeStep\"\n (click)=\"changeActiveStep(step)\"\n >\n {{index + 1}}. {{(step.title | async)}}\n </button>\n <clr-icon shape=\"caret right\" *ngIf=\"!last\"></clr-icon>\n </div>\n </ng-container>\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n <clr-icon shape=\"caret down\"></clr-icon>\n </button>\n <clr-dropdown-menu>\n <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n <button clrDropdownItem type=\"button\" class=\"btn\" [disabled]=\"!step.enabled\" (click)=\"changeActiveStep(step)\">\n {{index + 1}}. {{step.title | async}}\n </button>\n </ng-container>\n </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "async": i2.AsyncPipe } });
|
|
850
|
+
ClrFlowBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrFlowBar, selector: "clr-flow-bar", inputs: { _steps: ["clrSteps", "_steps"], _activeStep: ["clrActiveStep", "_activeStep"] }, outputs: { _activeStepChange: "clrActiveStepChange" }, host: { properties: { "class.flow-bar": "true" } }, ngImport: i0, template: "<div class=\"flow-bar-wrapper\">\n <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n <div class=\"flow-bar-step\" [class.active]=\"step === _activeStep\">\n <button\n class=\"btn btn-link flow-bar-btn\"\n [disabled]=\"!step.enabled\"\n [class.active]=\"step === _activeStep\"\n (click)=\"changeActiveStep(step)\"\n >\n {{index + 1}}. {{(step.title | async)}}\n </button>\n <clr-icon shape=\"caret right\" *ngIf=\"!last\"></clr-icon>\n </div>\n </ng-container>\n</div>\n<clr-dropdown class=\"flow-bar-dropdown clr-flex-fill\">\n <button type=\"button\" class=\"btn btn-outline-primary\" clrDropdownTrigger>\n {{_steps.indexOf(_activeStep) + 1}}. {{_activeStep?.title | async}}\n <clr-icon shape=\"caret down\"></clr-icon>\n </button>\n <clr-dropdown-menu>\n <ng-container *ngFor=\"let step of _steps; let index = index; let last = last\">\n <button clrDropdownItem type=\"button\" class=\"btn\" [disabled]=\"!step.enabled\" (click)=\"changeActiveStep(step)\">\n {{index + 1}}. {{step.title | async}}\n </button>\n </ng-container>\n </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "async": i2.AsyncPipe } });
|
|
778
851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBar, decorators: [{
|
|
779
852
|
type: Component,
|
|
780
853
|
args: [{ selector: 'clr-flow-bar', host: {
|
|
@@ -792,19 +865,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
792
865
|
}] } });
|
|
793
866
|
|
|
794
867
|
/*
|
|
795
|
-
* Copyright (c) 2018-
|
|
868
|
+
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
869
|
+
* This software is released under MIT license.
|
|
870
|
+
* The full license information can be found in LICENSE in the root directory of this project.
|
|
871
|
+
*/
|
|
872
|
+
class ClrDropdownOverflowModule {
|
|
873
|
+
}
|
|
874
|
+
ClrDropdownOverflowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
875
|
+
ClrDropdownOverflowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] });
|
|
876
|
+
ClrDropdownOverflowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule });
|
|
877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
|
|
878
|
+
type: NgModule,
|
|
879
|
+
args: [{
|
|
880
|
+
declarations: [ClrDropdownOverflowDirective],
|
|
881
|
+
exports: [ClrDropdownOverflowDirective],
|
|
882
|
+
}]
|
|
883
|
+
}] });
|
|
884
|
+
|
|
885
|
+
/*
|
|
886
|
+
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
887
|
+
* This software is released under MIT license.
|
|
888
|
+
* The full license information can be found in LICENSE in the root directory of this project.
|
|
889
|
+
*/
|
|
890
|
+
|
|
891
|
+
/*
|
|
892
|
+
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
796
893
|
* This software is released under MIT license.
|
|
797
894
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
798
895
|
*/
|
|
799
896
|
class ClrFlowBarModule {
|
|
800
897
|
}
|
|
801
898
|
ClrFlowBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
802
|
-
ClrFlowBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrFlowBar] });
|
|
803
|
-
ClrFlowBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
|
|
899
|
+
ClrFlowBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, declarations: [ClrFlowBar], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrFlowBar] });
|
|
900
|
+
ClrFlowBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule]] });
|
|
804
901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrFlowBarModule, decorators: [{
|
|
805
902
|
type: NgModule,
|
|
806
903
|
args: [{
|
|
807
|
-
imports: [CommonModule, ClarityModule, FormsModule],
|
|
904
|
+
imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
|
|
808
905
|
declarations: [ClrFlowBar],
|
|
809
906
|
exports: [ClrFlowBar],
|
|
810
907
|
}]
|
|
@@ -1492,7 +1589,7 @@ ClrMultilingualSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
|
|
|
1492
1589
|
</clr-dropdown-menu>
|
|
1493
1590
|
</clr-dropdown>
|
|
1494
1591
|
</div>
|
|
1495
|
-
`, isInline: true, components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
|
|
1592
|
+
`, isInline: true, components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
|
|
1496
1593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualSelector, decorators: [{
|
|
1497
1594
|
type: Component,
|
|
1498
1595
|
args: [{
|
|
@@ -1599,7 +1696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1599
1696
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
1600
1697
|
|
|
1601
1698
|
/*
|
|
1602
|
-
* Copyright (c) 2018-
|
|
1699
|
+
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
1603
1700
|
* This software is released under MIT license.
|
|
1604
1701
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
1605
1702
|
*/
|
|
@@ -1610,16 +1707,16 @@ ClrMultilingualModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
|
|
|
1610
1707
|
ClrMultilingualTextarea,
|
|
1611
1708
|
ClrRequiredOneMultilang,
|
|
1612
1709
|
ClrRequiredAllMultilang,
|
|
1613
|
-
ClrMultilingualSelector], imports: [CommonModule, ClarityModule, FormsModule], exports: [ClrMultilingualInput,
|
|
1710
|
+
ClrMultilingualSelector], imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule], exports: [ClrMultilingualInput,
|
|
1614
1711
|
ClrMultilingualTextarea,
|
|
1615
1712
|
ClrRequiredOneMultilang,
|
|
1616
1713
|
ClrRequiredAllMultilang,
|
|
1617
1714
|
ClrMultilingualSelector] });
|
|
1618
|
-
ClrMultilingualModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, imports: [[CommonModule, ClarityModule, FormsModule]] });
|
|
1715
|
+
ClrMultilingualModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, imports: [[CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule]] });
|
|
1619
1716
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualModule, decorators: [{
|
|
1620
1717
|
type: NgModule,
|
|
1621
1718
|
args: [{
|
|
1622
|
-
imports: [CommonModule, ClarityModule, FormsModule],
|
|
1719
|
+
imports: [CommonModule, ClarityModule, FormsModule, ClrDropdownOverflowModule],
|
|
1623
1720
|
declarations: [
|
|
1624
1721
|
ClrMultilingualInput,
|
|
1625
1722
|
ClrMultilingualTextarea,
|
|
@@ -3927,7 +4024,7 @@ class ClrHistory {
|
|
|
3927
4024
|
}
|
|
3928
4025
|
}
|
|
3929
4026
|
ClrHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistory, deps: [{ token: ClrHistoryService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3930
|
-
ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrHistory, selector: "clr-history", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, ngImport: i0, template: "<clr-dropdown>\n <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n </button>\n <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n {{history.title}}\n </button>\n <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n <button clrDropdownItem (click)=\"togglePinHistory()\">\n <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n </button>\n </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
4027
|
+
ClrHistory.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: ClrHistory, selector: "clr-history", inputs: { username: ["clrUsername", "username"], context: ["clrContext", "context"], pinActive: ["clrPinActive", "pinActive"], dropdownHeader: ["clrDropdownHeader", "dropdownHeader"], dropdownPin: ["clrDropdownPin", "dropdownPin"], dropdownUnpin: ["clrDropdownUnpin", "dropdownUnpin"], domain: ["clrDomain", "domain"], position: ["clrPosition", "position"] }, ngImport: i0, template: "<clr-dropdown>\n <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n </button>\n <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n {{history.title}}\n </button>\n <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n <button clrDropdownItem (click)=\"togglePinHistory()\">\n <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n </button>\n </clr-dropdown-menu>\n</clr-dropdown>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }], directives: [{ type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
3931
4028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistory, decorators: [{
|
|
3932
4029
|
type: Component,
|
|
3933
4030
|
args: [{ selector: 'clr-history', template: "<clr-dropdown>\n <button type=\"button\" class=\"btn btn-icon btn-link\" clrDropdownTrigger>\n <clr-icon shape=\"history\" size=\"24\"></clr-icon>\n <clr-icon shape=\"caret down\" size=\"12\"></clr-icon>\n </button>\n <clr-dropdown-menu [clrPosition]=\"position\" *clrIfOpen>\n <label class=\"dropdown-header\" aria-hidden=\"true\">{{dropdownHeader}}</label>\n <button type=\"button\" clrDropdownItem *ngFor=\"let history of historyElements\" (click)=\"select(history)\">\n {{history.title}}\n </button>\n <div *ngIf=\"pinActive\" class=\"dropdown-divider\" role=\"separator\" aria-hidden=\"true\"></div>\n <button clrDropdownItem (click)=\"togglePinHistory()\">\n <span *ngIf=\"pinActive && !pinActivated\">{{dropdownPin}}</span>\n <span *ngIf=\"pinActive && pinActivated\">{{dropdownUnpin}}</span>\n </button>\n </clr-dropdown-menu>\n</clr-dropdown>\n" }]
|
|
@@ -4002,19 +4099,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
4002
4099
|
}] } });
|
|
4003
4100
|
|
|
4004
4101
|
/*
|
|
4005
|
-
* Copyright (c) 2018-
|
|
4102
|
+
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
4006
4103
|
* This software is released under MIT license.
|
|
4007
4104
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
4008
4105
|
*/
|
|
4009
4106
|
class ClrHistoryModule {
|
|
4010
4107
|
}
|
|
4011
4108
|
ClrHistoryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4012
|
-
ClrHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule], exports: [ClrHistory, ClrHistoryPinned] });
|
|
4013
|
-
ClrHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, imports: [[CommonModule, ClarityModule, RouterModule]] });
|
|
4109
|
+
ClrHistoryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, declarations: [ClrHistory, ClrHistoryPinned], imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule], exports: [ClrHistory, ClrHistoryPinned] });
|
|
4110
|
+
ClrHistoryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, imports: [[CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule]] });
|
|
4014
4111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrHistoryModule, decorators: [{
|
|
4015
4112
|
type: NgModule,
|
|
4016
4113
|
args: [{
|
|
4017
|
-
imports: [CommonModule, ClarityModule, RouterModule],
|
|
4114
|
+
imports: [CommonModule, ClarityModule, RouterModule, ClrDropdownOverflowModule],
|
|
4018
4115
|
declarations: [ClrHistory, ClrHistoryPinned],
|
|
4019
4116
|
exports: [ClrHistory, ClrHistoryPinned],
|
|
4020
4117
|
}]
|
|
@@ -4277,7 +4374,7 @@ class LocationBarNodeComponent {
|
|
|
4277
4374
|
}
|
|
4278
4375
|
}
|
|
4279
4376
|
LocationBarNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarNodeComponent, deps: [{ token: CONTENT_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4280
|
-
LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode" }, outputs: { selectionChanged: "selectionChanged" }, host: { properties: { "class.location-bar-node": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"parentNode\">\n <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n <ng-container\n *ngIf=\"\n (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n else singleSelected\n \"\n >\n <clr-dropdown>\n <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n node.label\n }}</span>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n </ng-container>\n <ng-template #unselected>\n <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon> ...\n </ng-template>\n </button>\n <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n <button\n *ngFor=\"let item of selectableChilds\"\n type=\"button\"\n clrDropdownItem\n class=\"text-truncate\"\n [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n (click)=\"selectNode(item)\"\n title=\"{{ item.label }}\"\n >\n {{ item.label }}\n </button>\n </clr-dropdown-menu>\n </clr-dropdown>\n </ng-container>\n\n <ng-template #singleSelected>\n <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n <button\n class=\"btn btn-link btn-sm\"\n (click)=\"selectNode(parentNode.getSelectedChild())\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n >\n {{ parentNode.getSelectedChild().label }}\n </button>\n </ng-container>\n <ng-template #unselectable>\n <span\n class=\"unselectable-node\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n >\n {{ parentNode.getSelectedChild().label }}\n </span>\n </ng-template>\n </ng-container>\n </ng-template>\n\n <clr-location-bar-node\n *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n [parentNode]=\"parentNode.getSelectedChild()\"\n (selectionChanged)=\"onSelectionChanged($event)\"\n >\n <span>/</span>\n </clr-location-bar-node>\n</ng-container>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.CdsIconCustomTag, selector: "cds-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }] });
|
|
4377
|
+
LocationBarNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: { parentNode: "parentNode" }, outputs: { selectionChanged: "selectionChanged" }, host: { properties: { "class.location-bar-node": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"parentNode\">\n <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n <ng-container\n *ngIf=\"\n (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n else singleSelected\n \"\n >\n <clr-dropdown>\n <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n node.label\n }}</span>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n </ng-container>\n <ng-template #unselected>\n <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon> ...\n </ng-template>\n </button>\n <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n <button\n *ngFor=\"let item of selectableChilds\"\n type=\"button\"\n clrDropdownItem\n class=\"text-truncate\"\n [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n (click)=\"selectNode(item)\"\n title=\"{{ item.label }}\"\n >\n {{ item.label }}\n </button>\n </clr-dropdown-menu>\n </clr-dropdown>\n </ng-container>\n\n <ng-template #singleSelected>\n <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n <button\n class=\"btn btn-link btn-sm\"\n (click)=\"selectNode(parentNode.getSelectedChild())\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n >\n {{ parentNode.getSelectedChild().label }}\n </button>\n </ng-container>\n <ng-template #unselectable>\n <span\n class=\"unselectable-node\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n >\n {{ parentNode.getSelectedChild().label }}\n </span>\n </ng-template>\n </ng-container>\n </ng-template>\n\n <clr-location-bar-node\n *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n [parentNode]=\"parentNode.getSelectedChild()\"\n (selectionChanged)=\"onSelectionChanged($event)\"\n >\n <span>/</span>\n </clr-location-bar-node>\n</ng-container>\n", components: [{ type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { type: LocationBarNodeComponent, selector: "clr-location-bar-node", inputs: ["parentNode"], outputs: ["selectionChanged"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { type: i1.CdsIconCustomTag, selector: "cds-icon" }, { type: i1.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: ["clrDropdownMenuMaxHeight", "clrDropdownMenuItemMinHeight"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "disabled", "id"] }] });
|
|
4281
4378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
|
|
4282
4379
|
type: Component,
|
|
4283
4380
|
args: [{ selector: 'clr-location-bar-node', host: { '[class.location-bar-node]': 'true' }, template: "<ng-container *ngIf=\"parentNode\">\n <ng-content *ngIf=\"parentNode.getChildren()?.length > 0\"></ng-content>\n\n <ng-container\n *ngIf=\"\n (selectableChilds.length > 0 && !parentNode.getSelectedChild()) || selectableChilds.length > 1;\n else singleSelected\n \"\n >\n <clr-dropdown>\n <button class=\"btn btn-link btn-sm\" (blur)=\"focus = false\" (focus)=\"focus = true\" clrDropdownTrigger>\n <ng-container *ngIf=\"parentNode.getSelectedChild() as node; else unselected\">\n <span [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\" title=\"{{ node.label }}\">{{\n node.label\n }}</span>\n <cds-icon shape=\"angle\" direction=\"down\" size=\"xs\" class=\"caret-icon\"></cds-icon>\n </ng-container>\n <ng-template #unselected>\n <cds-icon class=\"unselected\" size=\"18\" [attr.solid]=\"focus\" shape=\"tree-view\"></cds-icon> ...\n </ng-template>\n </button>\n <clr-dropdown-menu [clrPosition]=\"'bottom-left'\" *clrIfOpen>\n <button\n *ngFor=\"let item of selectableChilds\"\n type=\"button\"\n clrDropdownItem\n class=\"text-truncate\"\n [class.selected-child]=\"item.id === parentNode.getSelectedChild()?.id\"\n (click)=\"selectNode(item)\"\n title=\"{{ item.label }}\"\n >\n {{ item.label }}\n </button>\n </clr-dropdown-menu>\n </clr-dropdown>\n </ng-container>\n\n <ng-template #singleSelected>\n <ng-container *ngIf=\"parentNode.getSelectedChild()\">\n <ng-container *ngIf=\"parentNode.getSelectedChild().selectable; else unselectable\">\n <button\n class=\"btn btn-link btn-sm\"\n (click)=\"selectNode(parentNode.getSelectedChild())\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n >\n {{ parentNode.getSelectedChild().label }}\n </button>\n </ng-container>\n <ng-template #unselectable>\n <span\n class=\"unselectable-node\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ parentNode.getSelectedChild().label }}\"\n >\n {{ parentNode.getSelectedChild().label }}\n </span>\n </ng-template>\n </ng-container>\n </ng-template>\n\n <clr-location-bar-node\n *ngIf=\"parentNode.getSelectedChild() && parentNode.getChildren().length > 0\"\n [parentNode]=\"parentNode.getSelectedChild()\"\n (selectionChanged)=\"onSelectionChanged($event)\"\n >\n <span>/</span>\n </clr-location-bar-node>\n</ng-container>\n" }]
|
|
@@ -4336,13 +4433,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
4336
4433
|
class ClrLocationBarModule {
|
|
4337
4434
|
}
|
|
4338
4435
|
ClrLocationBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4339
|
-
ClrLocationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent], imports: [CommonModule, ClrIconModule, ClrDropdownModule], exports: [LocationBarComponent] });
|
|
4340
|
-
ClrLocationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, imports: [[CommonModule, ClrIconModule, ClrDropdownModule]] });
|
|
4436
|
+
ClrLocationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, declarations: [LocationBarComponent, LocationBarNodeComponent], imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule], exports: [LocationBarComponent] });
|
|
4437
|
+
ClrLocationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, imports: [[CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule]] });
|
|
4341
4438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrLocationBarModule, decorators: [{
|
|
4342
4439
|
type: NgModule,
|
|
4343
4440
|
args: [{
|
|
4344
4441
|
declarations: [LocationBarComponent, LocationBarNodeComponent],
|
|
4345
|
-
imports: [CommonModule, ClrIconModule, ClrDropdownModule],
|
|
4442
|
+
imports: [CommonModule, ClrIconModule, ClrDropdownModule, ClrDropdownOverflowModule],
|
|
4346
4443
|
exports: [LocationBarComponent],
|
|
4347
4444
|
}]
|
|
4348
4445
|
}] });
|
|
@@ -4399,103 +4496,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
4399
4496
|
}]
|
|
4400
4497
|
}] });
|
|
4401
4498
|
|
|
4402
|
-
/*
|
|
4403
|
-
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
4404
|
-
* This software is released under MIT license.
|
|
4405
|
-
* The full license information can be found in LICENSE in the root directory of this project.
|
|
4406
|
-
*/
|
|
4407
|
-
class ClrDropdownOverflowDirective {
|
|
4408
|
-
constructor(elRef) {
|
|
4409
|
-
this.elRef = elRef;
|
|
4410
|
-
this.defaultItemMinHeightRem = 1.5;
|
|
4411
|
-
this.marginBottomRem = 0.1;
|
|
4412
|
-
}
|
|
4413
|
-
ngAfterViewInit() {
|
|
4414
|
-
this.calculateDropdownMenu();
|
|
4415
|
-
}
|
|
4416
|
-
calculateDropdownMenu() {
|
|
4417
|
-
// the vertical position of our element in the current window
|
|
4418
|
-
const y = this.elRef.nativeElement.getBoundingClientRect().y;
|
|
4419
|
-
const itemMinHeightPx = this.getItemMinHeight(this.clrDropdownMenuItemMinHeight);
|
|
4420
|
-
// see https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
|
|
4421
|
-
for (const item of this.elRef.nativeElement.getElementsByClassName('dropdown-item')) {
|
|
4422
|
-
item.style.minHeight = itemMinHeightPx + 'px';
|
|
4423
|
-
}
|
|
4424
|
-
this.elRef.nativeElement.style.maxHeight =
|
|
4425
|
-
this.getMenuMaxHeight(this.clrDropdownMenuMaxHeight, window.innerHeight - y - this.convertRemToPixels(this.marginBottomRem)) + 'px';
|
|
4426
|
-
this.elRef.nativeElement.style.overflowY = 'auto';
|
|
4427
|
-
}
|
|
4428
|
-
getMenuMaxHeight(menuMaxHeightProvided, menuMaxHeightPx) {
|
|
4429
|
-
if (menuMaxHeightProvided) {
|
|
4430
|
-
const maxHeightPx = this.convertToPixels(menuMaxHeightProvided);
|
|
4431
|
-
return maxHeightPx > menuMaxHeightPx ? menuMaxHeightPx : maxHeightPx;
|
|
4432
|
-
}
|
|
4433
|
-
return menuMaxHeightPx;
|
|
4434
|
-
}
|
|
4435
|
-
getItemMinHeight(itemMinHeightProvided) {
|
|
4436
|
-
if (itemMinHeightProvided) {
|
|
4437
|
-
return this.convertToPixels(itemMinHeightProvided);
|
|
4438
|
-
}
|
|
4439
|
-
return this.convertRemToPixels(this.defaultItemMinHeightRem);
|
|
4440
|
-
}
|
|
4441
|
-
convertToPixels(value) {
|
|
4442
|
-
if (typeof value === 'string') {
|
|
4443
|
-
if (value.endsWith('px')) {
|
|
4444
|
-
return parseFloat(value.replace('px', ''));
|
|
4445
|
-
}
|
|
4446
|
-
else if (value.endsWith('rem')) {
|
|
4447
|
-
return this.convertRemToPixels(parseFloat(value.replace('rem', '')));
|
|
4448
|
-
}
|
|
4449
|
-
else if (value.endsWith('vh')) {
|
|
4450
|
-
return this.convertVhToPixels(parseFloat(value.replace('vh', '')));
|
|
4451
|
-
}
|
|
4452
|
-
return parseFloat(value);
|
|
4453
|
-
}
|
|
4454
|
-
return value;
|
|
4455
|
-
}
|
|
4456
|
-
convertRemToPixels(rem) {
|
|
4457
|
-
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
4458
|
-
}
|
|
4459
|
-
convertVhToPixels(vh) {
|
|
4460
|
-
const pxPerVhUnit = window.innerHeight / 100;
|
|
4461
|
-
return vh * pxPerVhUnit;
|
|
4462
|
-
}
|
|
4463
|
-
}
|
|
4464
|
-
ClrDropdownOverflowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4465
|
-
ClrDropdownOverflowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrDropdownOverflowDirective, selector: "clr-dropdown-menu", inputs: { clrDropdownMenuMaxHeight: "clrDropdownMenuMaxHeight", clrDropdownMenuItemMinHeight: "clrDropdownMenuItemMinHeight" }, ngImport: i0 });
|
|
4466
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowDirective, decorators: [{
|
|
4467
|
-
type: Directive,
|
|
4468
|
-
args: [{ selector: 'clr-dropdown-menu' }]
|
|
4469
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clrDropdownMenuMaxHeight: [{
|
|
4470
|
-
type: Input
|
|
4471
|
-
}], clrDropdownMenuItemMinHeight: [{
|
|
4472
|
-
type: Input
|
|
4473
|
-
}] } });
|
|
4474
|
-
|
|
4475
|
-
/*
|
|
4476
|
-
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
4477
|
-
* This software is released under MIT license.
|
|
4478
|
-
* The full license information can be found in LICENSE in the root directory of this project.
|
|
4479
|
-
*/
|
|
4480
|
-
class ClrDropdownOverflowModule {
|
|
4481
|
-
}
|
|
4482
|
-
ClrDropdownOverflowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4483
|
-
ClrDropdownOverflowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, declarations: [ClrDropdownOverflowDirective], exports: [ClrDropdownOverflowDirective] });
|
|
4484
|
-
ClrDropdownOverflowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule });
|
|
4485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrDropdownOverflowModule, decorators: [{
|
|
4486
|
-
type: NgModule,
|
|
4487
|
-
args: [{
|
|
4488
|
-
declarations: [ClrDropdownOverflowDirective],
|
|
4489
|
-
exports: [ClrDropdownOverflowDirective],
|
|
4490
|
-
}]
|
|
4491
|
-
}] });
|
|
4492
|
-
|
|
4493
|
-
/*
|
|
4494
|
-
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
4495
|
-
* This software is released under MIT license.
|
|
4496
|
-
* The full license information can be found in LICENSE in the root directory of this project.
|
|
4497
|
-
*/
|
|
4498
|
-
|
|
4499
4499
|
/*
|
|
4500
4500
|
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
4501
4501
|
* This software is released under MIT license.
|