@porscheinformatik/clr-addons 12.3.1 → 12.4.2
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/location-bar/location-bar-node/location-bar-node.component.mjs +3 -3
- package/esm2020/multilingual/abstract-multilingual.mjs +74 -4
- package/esm2020/multilingual/multilingual-input/multilingual-input.mjs +3 -3
- package/esm2020/multilingual/multilingual-textarea/multilingual-textarea.mjs +3 -3
- package/fesm2015/clr-addons.mjs +80 -9
- package/fesm2015/clr-addons.mjs.map +1 -1
- package/fesm2020/clr-addons.mjs +79 -9
- package/fesm2020/clr-addons.mjs.map +1 -1
- package/multilingual/abstract-multilingual.d.ts +11 -1
- package/package.json +1 -1
- package/src/components.clr-addons.scss +3 -0
- package/src/components.variables.clr-addons.scss +1 -0
- package/src/location-bar/location-bar-node/location-bar-node.component.scss +3 -2
- package/src/view-edit-section/view-edit-section.scss +1 -1
- package/styles/clr-addons-phs.css +8 -3
- package/styles/clr-addons-phs.css.map +1 -1
- package/styles/clr-addons-phs.min.css +1 -1
- package/styles/clr-addons-phs.min.css.map +1 -1
package/fesm2020/clr-addons.mjs
CHANGED
|
@@ -1500,7 +1500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1500
1500
|
}] } });
|
|
1501
1501
|
|
|
1502
1502
|
/*
|
|
1503
|
-
* Copyright (c) 2018-
|
|
1503
|
+
* Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
|
|
1504
1504
|
* This software is released under MIT license.
|
|
1505
1505
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
1506
1506
|
*/
|
|
@@ -1509,18 +1509,79 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
|
|
|
1509
1509
|
super(injector);
|
|
1510
1510
|
this.multi = true;
|
|
1511
1511
|
this.controlClasses = 'clr-col-md-10';
|
|
1512
|
+
this.missingPrefix = '';
|
|
1513
|
+
}
|
|
1514
|
+
set fallbackLanguage(fallbackLang) {
|
|
1515
|
+
this.fallbackLang = fallbackLang;
|
|
1516
|
+
this.updateShownTexts();
|
|
1517
|
+
}
|
|
1518
|
+
set missingPre(missingPrefix) {
|
|
1519
|
+
this.missingPrefix = missingPrefix;
|
|
1520
|
+
this.updateShownTexts();
|
|
1521
|
+
}
|
|
1522
|
+
set langs(languages) {
|
|
1523
|
+
this.languages = languages;
|
|
1524
|
+
this.updateShownTexts();
|
|
1512
1525
|
}
|
|
1513
1526
|
writeValue(value) {
|
|
1514
1527
|
if (value) {
|
|
1515
1528
|
this.texts = new Map(value);
|
|
1516
1529
|
}
|
|
1530
|
+
this.updateShownTexts();
|
|
1517
1531
|
}
|
|
1518
1532
|
setText(key, value) {
|
|
1519
1533
|
this.texts.set(key, value);
|
|
1520
1534
|
this.onChange(new Map(this.texts));
|
|
1535
|
+
this.updateShownTexts(key);
|
|
1536
|
+
}
|
|
1537
|
+
updateShownTexts(currentlyEditingLang) {
|
|
1538
|
+
if (this.texts) {
|
|
1539
|
+
if (this.languages) {
|
|
1540
|
+
this.shownTexts = this.applyMissingPrefix(new Map(this.languages.map(lang => [lang, this.texts.get(lang) || ''])), currentlyEditingLang);
|
|
1541
|
+
}
|
|
1542
|
+
else {
|
|
1543
|
+
this.shownTexts = this.applyMissingPrefix(new Map(this.texts), currentlyEditingLang);
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
applyMissingPrefix(texts, currentlyEditingLang) {
|
|
1548
|
+
if (!this.missingPrefix) {
|
|
1549
|
+
return texts;
|
|
1550
|
+
}
|
|
1551
|
+
let fallbackText = this.determineFallbackText();
|
|
1552
|
+
if (!fallbackText) {
|
|
1553
|
+
return texts;
|
|
1554
|
+
}
|
|
1555
|
+
fallbackText = this.missingPrefix + fallbackText;
|
|
1556
|
+
for (const lang of texts.keys()) {
|
|
1557
|
+
if (!texts.get(lang) && lang !== currentlyEditingLang) {
|
|
1558
|
+
texts.set(lang, fallbackText);
|
|
1559
|
+
}
|
|
1560
|
+
}
|
|
1561
|
+
return texts;
|
|
1562
|
+
}
|
|
1563
|
+
determineFallbackText() {
|
|
1564
|
+
const fallbackText = this.fallbackLang && this.texts.get(this.fallbackLang);
|
|
1565
|
+
if (fallbackText) {
|
|
1566
|
+
return fallbackText;
|
|
1567
|
+
}
|
|
1568
|
+
const languages = [...(this.languages || [])].sort();
|
|
1569
|
+
const nonEmptyTextFromShownTexts = languages.map(lang => this.texts.get(lang)).find(text => text);
|
|
1570
|
+
if (nonEmptyTextFromShownTexts) {
|
|
1571
|
+
return nonEmptyTextFromShownTexts;
|
|
1572
|
+
}
|
|
1573
|
+
const nonEmptyTextFromHiddenTexts = [...this.texts.keys()]
|
|
1574
|
+
.sort()
|
|
1575
|
+
.filter(lang => !languages.includes(lang))
|
|
1576
|
+
.map(lang => this.texts.get(lang))
|
|
1577
|
+
.find(text => text);
|
|
1578
|
+
if (nonEmptyTextFromHiddenTexts) {
|
|
1579
|
+
return nonEmptyTextFromHiddenTexts;
|
|
1580
|
+
}
|
|
1581
|
+
return undefined;
|
|
1521
1582
|
}
|
|
1522
1583
|
showLanguageSelector() {
|
|
1523
|
-
return
|
|
1584
|
+
return this.shownTexts?.size > 1 || this.showSingleLanguageSelector;
|
|
1524
1585
|
}
|
|
1525
1586
|
changeLanguage(lang) {
|
|
1526
1587
|
// need as the click for closing the menu is registered on a single item
|
|
@@ -1532,7 +1593,7 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
|
|
|
1532
1593
|
}
|
|
1533
1594
|
}
|
|
1534
1595
|
ClrMultilingualAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualAbstract, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1535
|
-
ClrMultilingualAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualAbstract, inputs: { controlClasses: ["clrControlClasses", "controlClasses"], selectedLang: ["clrSelectedLang", "selectedLang"], readonly: "readonly", maxlength: "maxlength", showSingleLanguageSelector: ["clrShowSingleLanguageSelector", "showSingleLanguageSelector"] }, host: { properties: { "class.clr-multilingual": "this.multi" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
|
|
1596
|
+
ClrMultilingualAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: ClrMultilingualAbstract, inputs: { controlClasses: ["clrControlClasses", "controlClasses"], selectedLang: ["clrSelectedLang", "selectedLang"], readonly: "readonly", maxlength: "maxlength", showSingleLanguageSelector: ["clrShowSingleLanguageSelector", "showSingleLanguageSelector"], fallbackLanguage: ["clrFallbackLang", "fallbackLanguage"], missingPre: ["clrMissingPrefix", "missingPre"], langs: ["clrLanguages", "langs"] }, host: { properties: { "class.clr-multilingual": "this.multi" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
|
|
1536
1597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
|
|
1537
1598
|
type: Directive
|
|
1538
1599
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { multi: [{
|
|
@@ -1554,6 +1615,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1554
1615
|
}], inputElement: [{
|
|
1555
1616
|
type: ViewChild,
|
|
1556
1617
|
args: ['input']
|
|
1618
|
+
}], fallbackLanguage: [{
|
|
1619
|
+
type: Input,
|
|
1620
|
+
args: ['clrFallbackLang']
|
|
1621
|
+
}], missingPre: [{
|
|
1622
|
+
type: Input,
|
|
1623
|
+
args: ['clrMissingPrefix']
|
|
1624
|
+
}], langs: [{
|
|
1625
|
+
type: Input,
|
|
1626
|
+
args: ['clrLanguages']
|
|
1557
1627
|
}] } });
|
|
1558
1628
|
|
|
1559
1629
|
class ClrMultilingualSelector {
|
|
@@ -1651,7 +1721,7 @@ ClrMultilingualInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
|
1651
1721
|
multi: true,
|
|
1652
1722
|
},
|
|
1653
1723
|
ControlIdService,
|
|
1654
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"
|
|
1724
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-input-wrapper\">\n <input\n class=\"clr-input\"\n type=\"text\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n autocomplete=\"off\"\n [maxlength]=\"maxlength || null\"\n #input\n />\n <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n </div>\n <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n </div>\n</div>\n", components: [{ type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
|
|
1655
1725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualInput, decorators: [{
|
|
1656
1726
|
type: Component,
|
|
1657
1727
|
args: [{ selector: 'clr-multilingual-input', providers: [
|
|
@@ -1661,7 +1731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1661
1731
|
multi: true,
|
|
1662
1732
|
},
|
|
1663
1733
|
ControlIdService,
|
|
1664
|
-
], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"
|
|
1734
|
+
], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-input-wrapper\">\n <input\n class=\"clr-input\"\n type=\"text\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n autocomplete=\"off\"\n [maxlength]=\"maxlength || null\"\n #input\n />\n <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n </div>\n <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n </div>\n</div>\n" }]
|
|
1665
1735
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
1666
1736
|
|
|
1667
1737
|
/*
|
|
@@ -1682,7 +1752,7 @@ ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
|
|
|
1682
1752
|
multi: true,
|
|
1683
1753
|
},
|
|
1684
1754
|
ControlIdService,
|
|
1685
|
-
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"
|
|
1755
|
+
], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-textarea-wrapper\">\n <textarea\n class=\"clr-textarea\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n [maxlength]=\"maxlength || null\"\n #input\n ></textarea>\n <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n </div>\n <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n </div>\n</div>\n", components: [{ type: ClrMultilingualSelector, selector: "clr-multilingual-selector", inputs: ["disabled", "texts", "selectedLang"], outputs: ["selectedLangChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }] });
|
|
1686
1756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
|
|
1687
1757
|
type: Component,
|
|
1688
1758
|
args: [{ selector: 'clr-multilingual-textarea', providers: [
|
|
@@ -1692,7 +1762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1692
1762
|
multi: true,
|
|
1693
1763
|
},
|
|
1694
1764
|
ControlIdService,
|
|
1695
|
-
], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"
|
|
1765
|
+
], template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <clr-multilingual-selector\n *ngIf=\"showLanguageSelector()\"\n [disabled]=\"disabled\"\n [texts]=\"shownTexts\"\n [selectedLang]=\"selectedLang\"\n (selectedLangChange)=\"changeLanguage($event)\"\n >\n </clr-multilingual-selector>\n <div class=\"clr-multi-input-wrapper\">\n <div class=\"clr-textarea-wrapper\">\n <textarea\n class=\"clr-textarea\"\n [id]=\"inputId\"\n [ngModel]=\"!!shownTexts && !!selectedLang ? shownTexts.get(selectedLang) : ''\"\n (ngModelChange)=\"setText(selectedLang, $event)\"\n (blur)=\"onTouch()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly || readonly === ''\"\n [maxlength]=\"maxlength || null\"\n #input\n ></textarea>\n <clr-icon *ngIf=\"showError\" class=\"clr-validate-icon\" shape=\"exclamation-circle\" aria-hidden=\"true\"></clr-icon>\n </div>\n <ng-content select=\"clr-control-helper\" *ngIf=\"!showError\"></ng-content>\n <ng-content select=\"clr-control-error\" *ngIf=\"showError\"></ng-content>\n </div>\n</div>\n" }]
|
|
1696
1766
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
1697
1767
|
|
|
1698
1768
|
/*
|
|
@@ -4374,10 +4444,10 @@ class LocationBarNodeComponent {
|
|
|
4374
4444
|
}
|
|
4375
4445
|
}
|
|
4376
4446
|
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 });
|
|
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
|
|
4447
|
+
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\n class=\"text-truncate\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ node.label }}\"\n >\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 text-truncate\"\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"] }] });
|
|
4378
4448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: LocationBarNodeComponent, decorators: [{
|
|
4379
4449
|
type: Component,
|
|
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
|
|
4450
|
+
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\n class=\"text-truncate\"\n [class.last-level]=\"!parentNode.getSelectedChild().getSelectedChild()\"\n title=\"{{ node.label }}\"\n >\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 text-truncate\"\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" }]
|
|
4381
4451
|
}], ctorParameters: function () { return [{ type: LocationBarContentProvider, decorators: [{
|
|
4382
4452
|
type: Inject,
|
|
4383
4453
|
args: [CONTENT_PROVIDER]
|