@porscheinformatik/clr-addons 11.1.0 → 11.2.0

package/bundles/clr-addons.umd.js

@@ -2826,7 +2826,7 @@
     var CLR_BLANK_OPTION = { id: '-BLANK-', label: '- Select an option -', value: null };
 
     /*
-     * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+     * Copyright (c) 2018-2022 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.
      */
@@ -2835,6 +2835,7 @@
             this.mandatory = false;
             this.allValues = [];
             this.excludedValues = [];
+            this.disabled = false;
             this.valueChanged = new i0.EventEmitter();
             this.remove = new i0.EventEmitter();
         }
@@ -2865,7 +2866,7 @@
     ClrAddOption.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-add-option',
-                    template: "<div *ngIf=\"!(readonly || readonly === ''); else readonlyView\" class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\">\n    <option *ngIf=\"blankOption.id === selectedValue\" [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">\n      {{blankOption.label}}\n    </option>\n    <option *ngFor=\"let val of getValues()\" [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">\n      {{val.label}}\n    </option>\n  </select>\n</div>\n\n<ng-template #readonlyView>\n  <span>{{value.label}}</span>\n</ng-template>\n\n<button\n  *ngIf=\"!(readonly || readonly === '')\"\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [disabled]=\"trashDisabled()\"\n  (click)=\"remove.emit()\"\n>\n  <clr-icon shape=\"trash\"></clr-icon>\n</button>\n",
+                    template: "<div *ngIf=\"!(readonly || readonly === ''); else readonlyView\" class=\"clr-select-wrapper quick-list-input\">\n  <select #select clr-select class=\"quick-list-select\" name=\"options\" [(ngModel)]=\"selectedValue\" [disabled]=\"disabled\">\n    <option *ngIf=\"blankOption.id === selectedValue\" [selected]=\"true\" [disabled]=\"true\" [ngValue]=\"blankOption.id\">\n      {{blankOption.label}}\n    </option>\n    <option *ngFor=\"let val of getValues()\" [selected]=\"val.id === selectedValue\" [ngValue]=\"val.id\">\n      {{val.label}}\n    </option>\n  </select>\n</div>\n\n<ng-template #readonlyView>\n  <span>{{value.label}}</span>\n</ng-template>\n\n<button\n  *ngIf=\"!(readonly || readonly === '')\"\n  type=\"button\"\n  class=\"btn btn-icon btn-link quick-list-trash\"\n  [disabled]=\"trashDisabled() || disabled\"\n  (click)=\"remove.emit()\"\n>\n  <clr-icon shape=\"trash\"></clr-icon>\n</button>\n",
                     host: { '[class.quick-list-option]': 'true' }
                 },] }
     ];
@@ -2876,51 +2877,61 @@
         allValues: [{ type: i0.Input }],
         excludedValues: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
         valueChanged: [{ type: i0.Output }],
         remove: [{ type: i0.Output }],
         select: [{ type: i0.ViewChild, args: ['select', { static: false },] }]
     };
 
-    /*
-     * 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.
-     */
-    var ClrQuickList = /** @class */ (function () {
+    var ClrQuickList = /** @class */ (function (_super) {
+        __extends(ClrQuickList, _super);
         function ClrQuickList() {
-            this.blankOption = CLR_BLANK_OPTION;
-            this.allValues = [this.blankOption];
-            this.mandatory = false;
-            this.values = [];
-            this.addLabel = 'ADD';
-            this.controlClasses = 'clr-col-md-10';
-            this.valuesChanged = new i0.EventEmitter();
-            this.emptyOptionAdded = new i0.EventEmitter();
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.blankOption = CLR_BLANK_OPTION;
+            _this.allValues = [_this.blankOption];
+            _this.mandatory = false;
+            _this.values = [];
+            _this.addLabel = 'ADD';
+            _this.controlClasses = 'clr-col-md-10';
+            _this.valuesChanged = new i0.EventEmitter();
+            _this.emptyOptionAdded = new i0.EventEmitter();
+            return _this;
         }
         ClrQuickList.prototype.ngOnInit = function () {
-            if (this.values.length === 0 && this.mandatory) {
-                this.values.push(this.blankOption);
+            var _a;
+            if (this.values.length === 0) {
+                (_a = this.values).push.apply(_a, __spreadArray([], __read(this.getEmptyValues())));
             }
         };
+        ClrQuickList.prototype.writeValue = function (value) {
+            this.values = (value === null || value === void 0 ? void 0 : value.length) ? __spreadArray([], __read(value)) : this.getEmptyValues();
+        };
+        ClrQuickList.prototype.getEmptyValues = function () {
+            return this.mandatory ? [this.blankOption] : [];
+        };
         ClrQuickList.prototype.onValueChanged = function (value, i) {
             if (value) {
                 this.values[i] = value;
-                this.valuesChanged.emit(this.values);
+                this.emitValueChanged();
                 this.focusOption(value);
             }
         };
         ClrQuickList.prototype.onRemoveValue = function (i) {
             this.values.splice(i, 1);
-            this.valuesChanged.emit(this.values);
+            this.emitValueChanged();
         };
         ClrQuickList.prototype.addBlankOption = function () {
             if (!this.hasBlankOption()) {
                 this.values.push(this.blankOption);
-                this.valuesChanged.emit(this.values);
+                this.emitValueChanged();
                 this.emptyOptionAdded.emit();
                 this.focusOption(this.blankOption);
             }
         };
+        ClrQuickList.prototype.emitValueChanged = function () {
+            this.valuesChanged.emit(this.values);
+            this.onChange(this.values);
+        };
         ClrQuickList.prototype.focusOption = function (option) {
             var _this = this;
             setTimeout(function () {
@@ -2937,12 +2948,19 @@
             return this.hasBlankOption() || this.values.length === this.allValues.length;
         };
         return ClrQuickList;
-    }());
+    }(ClrAbstractFormComponent));
     ClrQuickList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-quick-list',
                     host: { '[class.quick-list]': 'true' },
-                    template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-container *ngFor=\"let value of values; index as i\">\n    <clr-add-option\n      [allValues]=\"allValues\"\n      [excludedValues]=\"values\"\n      (remove)=\"onRemoveValue(i)\"\n      [value]=\"value\"\n      (valueChanged)=\"onValueChanged($event, i)\"\n      [blankOption]=\"blankOption\"\n      [mandatory]=\"mandatory\"\n      [readonly]=\"readonly\"\n    >\n    </clr-add-option>\n  </ng-container>\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm quick-list-add\"\n    (click)=\"addBlankOption()\"\n    [disabled]=\"addNotPossible()\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n"
+                    template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n  <ng-container *ngFor=\"let value of values; index as i\">\n    <clr-add-option\n      [allValues]=\"allValues\"\n      [excludedValues]=\"values\"\n      (remove)=\"onRemoveValue(i)\"\n      [value]=\"value\"\n      (valueChanged)=\"onValueChanged($event, i)\"\n      [blankOption]=\"blankOption\"\n      [mandatory]=\"mandatory\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n    >\n    </clr-add-option>\n  </ng-container>\n  <button\n    *ngIf=\"!(readonly || readonly === '')\"\n    type=\"button\"\n    class=\"btn btn-link btn-sm quick-list-add\"\n    (click)=\"addBlankOption()\"\n    [disabled]=\"addNotPossible() || disabled\"\n  >\n    {{addLabel}}\n  </button>\n</div>\n",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return ClrQuickList; }),
+                            multi: true,
+                        },
+                    ]
                 },] }
     ];
     ClrQuickList.propDecorators = {
@@ -4189,10 +4207,10 @@
                 },] }
     ];
     LocationBarComponent.propDecorators = {
-        iconShape: [{ type: i0.Input }],
-        iconTitle: [{ type: i0.Input }],
-        roots: [{ type: i0.Input }],
-        selectionChanged: [{ type: i0.Output }]
+        iconShape: [{ type: i0.Input, args: ['clrIconShape',] }],
+        iconTitle: [{ type: i0.Input, args: ['clrIconTitle',] }],
+        roots: [{ type: i0.Input, args: ['clrRoots',] }],
+        selectionChanged: [{ type: i0.Output, args: ['clrSelectionChanged',] }]
     };
 
     var CONTENT_PROVIDER = new i0.InjectionToken('CONTENT_PROVIDER');
@@ -5089,9 +5107,9 @@
     exports["ɵb"] = TreetableHeaderRenderer;
     exports["ɵc"] = TreetableRowRenderer;
     exports["ɵd"] = TreetableCellRenderer;
-    exports["ɵe"] = ClrAddOption;
-    exports["ɵf"] = ClrMultilingualAbstract;
-    exports["ɵg"] = ClrAbstractFormComponent;
+    exports["ɵe"] = ClrAbstractFormComponent;
+    exports["ɵf"] = ClrAddOption;
+    exports["ɵg"] = ClrMultilingualAbstract;
     exports["ɵh"] = ClrAutocompleteOffModule;
     exports["ɵi"] = ClrAutocompleteOff;
     exports["ɵj"] = LocationBarComponent;