@porscheinformatik/clr-addons 12.3.1 → 12.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/multilingual/abstract-multilingual.mjs +70 -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 +74 -7
- package/fesm2015/clr-addons.mjs.map +1 -1
- package/fesm2020/clr-addons.mjs +73 -7
- 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/view-edit-section/view-edit-section.scss +1 -1
- package/styles/clr-addons-phs.css +5 -1
- 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,75 @@ 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();
|
|
1536
|
+
}
|
|
1537
|
+
updateShownTexts() {
|
|
1538
|
+
if (this.texts) {
|
|
1539
|
+
if (this.languages) {
|
|
1540
|
+
this.shownTexts = this.applyMissingPrefix(new Map(this.languages.map(lang => [lang, this.texts.get(lang) || ''])));
|
|
1541
|
+
}
|
|
1542
|
+
else {
|
|
1543
|
+
this.shownTexts = this.applyMissingPrefix(new Map(this.texts));
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
applyMissingPrefix(texts) {
|
|
1548
|
+
if (!this.missingPrefix) {
|
|
1549
|
+
return texts;
|
|
1550
|
+
}
|
|
1551
|
+
const fallbackText = this.missingPrefix + this.determineFallbackText();
|
|
1552
|
+
for (const lang of texts.keys()) {
|
|
1553
|
+
if (!texts.get(lang)) {
|
|
1554
|
+
texts.set(lang, fallbackText);
|
|
1555
|
+
}
|
|
1556
|
+
}
|
|
1557
|
+
return texts;
|
|
1558
|
+
}
|
|
1559
|
+
determineFallbackText() {
|
|
1560
|
+
const fallbackText = this.fallbackLang && this.texts.get(this.fallbackLang);
|
|
1561
|
+
if (fallbackText) {
|
|
1562
|
+
return fallbackText;
|
|
1563
|
+
}
|
|
1564
|
+
const languages = [...(this.languages || [])].sort();
|
|
1565
|
+
const nonEmptyTextFromShownTexts = languages.map(lang => this.texts.get(lang)).find(text => text);
|
|
1566
|
+
if (nonEmptyTextFromShownTexts) {
|
|
1567
|
+
return nonEmptyTextFromShownTexts;
|
|
1568
|
+
}
|
|
1569
|
+
const nonEmptyTextFromHiddenTexts = [...this.texts.keys()]
|
|
1570
|
+
.sort()
|
|
1571
|
+
.filter(lang => !languages.includes(lang))
|
|
1572
|
+
.map(lang => this.texts.get(lang))
|
|
1573
|
+
.find(text => text);
|
|
1574
|
+
if (nonEmptyTextFromHiddenTexts) {
|
|
1575
|
+
return nonEmptyTextFromHiddenTexts;
|
|
1576
|
+
}
|
|
1577
|
+
return '';
|
|
1521
1578
|
}
|
|
1522
1579
|
showLanguageSelector() {
|
|
1523
|
-
return
|
|
1580
|
+
return this.shownTexts?.size > 1 || this.showSingleLanguageSelector;
|
|
1524
1581
|
}
|
|
1525
1582
|
changeLanguage(lang) {
|
|
1526
1583
|
// need as the click for closing the menu is registered on a single item
|
|
@@ -1532,7 +1589,7 @@ class ClrMultilingualAbstract extends ClrAbstractFormComponent {
|
|
|
1532
1589
|
}
|
|
1533
1590
|
}
|
|
1534
1591
|
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 });
|
|
1592
|
+
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
1593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualAbstract, decorators: [{
|
|
1537
1594
|
type: Directive
|
|
1538
1595
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { multi: [{
|
|
@@ -1554,6 +1611,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1554
1611
|
}], inputElement: [{
|
|
1555
1612
|
type: ViewChild,
|
|
1556
1613
|
args: ['input']
|
|
1614
|
+
}], fallbackLanguage: [{
|
|
1615
|
+
type: Input,
|
|
1616
|
+
args: ['clrFallbackLang']
|
|
1617
|
+
}], missingPre: [{
|
|
1618
|
+
type: Input,
|
|
1619
|
+
args: ['clrMissingPrefix']
|
|
1620
|
+
}], langs: [{
|
|
1621
|
+
type: Input,
|
|
1622
|
+
args: ['clrLanguages']
|
|
1557
1623
|
}] } });
|
|
1558
1624
|
|
|
1559
1625
|
class ClrMultilingualSelector {
|
|
@@ -1651,7 +1717,7 @@ ClrMultilingualInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
|
1651
1717
|
multi: true,
|
|
1652
1718
|
},
|
|
1653
1719
|
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]=\"
|
|
1720
|
+
], 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
1721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualInput, decorators: [{
|
|
1656
1722
|
type: Component,
|
|
1657
1723
|
args: [{ selector: 'clr-multilingual-input', providers: [
|
|
@@ -1661,7 +1727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1661
1727
|
multi: true,
|
|
1662
1728
|
},
|
|
1663
1729
|
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]=\"
|
|
1730
|
+
], 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
1731
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
1666
1732
|
|
|
1667
1733
|
/*
|
|
@@ -1682,7 +1748,7 @@ ClrMultilingualTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
|
|
|
1682
1748
|
multi: true,
|
|
1683
1749
|
},
|
|
1684
1750
|
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]=\"
|
|
1751
|
+
], 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
1752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: ClrMultilingualTextarea, decorators: [{
|
|
1687
1753
|
type: Component,
|
|
1688
1754
|
args: [{ selector: 'clr-multilingual-textarea', providers: [
|
|
@@ -1692,7 +1758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
|
|
|
1692
1758
|
multi: true,
|
|
1693
1759
|
},
|
|
1694
1760
|
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]=\"
|
|
1761
|
+
], 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
1762
|
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
1697
1763
|
|
|
1698
1764
|
/*
|