@porscheinformatik/clr-addons 15.5.1 → 15.5.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/generic-quick-list/generic-quick-list.mjs +5 -5
- package/esm2020/quick-list/add-option.mjs +8 -5
- package/esm2020/quick-list/quick-list.mjs +5 -5
- package/fesm2015/clr-addons.mjs +13 -10
- package/fesm2015/clr-addons.mjs.map +1 -1
- package/fesm2020/clr-addons.mjs +13 -10
- package/fesm2020/clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/quick-list/add-option.d.ts +2 -1
- package/styles/clr-addons-phs.css +9 -65
- 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
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Component, NgModule, Injectable, EventEmitter, Input, Output, Directive, ViewChild, ContentChildren, TemplateRef, ViewChildren, HostBinding, ElementRef, Renderer2, forwardRef, Inject, ContentChild, Optional, HostListener, InjectionToken, LOCALE_ID, Self } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DOCUMENT, getLocaleDateFormat, FormatWidth } from '@angular/common';
|
|
5
|
-
import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon,
|
|
5
|
+
import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, pencilIcon, historyIcon, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon } from '@cds/core/icon';
|
|
6
6
|
import * as i1$1 from '@clr/angular';
|
|
7
7
|
import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule } from '@clr/angular';
|
|
8
8
|
import * as i3$1 from '@angular/forms';
|
|
@@ -1016,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
1016
1016
|
* This software is released under MIT license.
|
|
1017
1017
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
1018
1018
|
*/
|
|
1019
|
-
ClarityIcons.addIcons(trashIcon,
|
|
1019
|
+
ClarityIcons.addIcons(trashIcon, plusCircleIcon);
|
|
1020
1020
|
class ClrGenericQuickList {
|
|
1021
1021
|
constructor() {
|
|
1022
1022
|
this.allItems = [];
|
|
@@ -1064,10 +1064,10 @@ class ClrGenericQuickList {
|
|
|
1064
1064
|
}
|
|
1065
1065
|
}
|
|
1066
1066
|
ClrGenericQuickList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrGenericQuickList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1067
|
-
ClrGenericQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: ClrGenericQuickList, selector: "clr-generic-quick-list", inputs: { allItems: ["clrAllItems", "allItems"], addLabel: ["clrAddLabel", "addLabel"], addPossible: ["clrAddPossible", "addPossible"], blankItem: ["clrBlankItem", "blankItem"], controlClasses: ["clrControlClasses", "controlClasses"], required: ["clrMandatory", "required"], readonly: "readonly", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true" } }, queries: [{ propertyName: "itemTemplate", predicate: TemplateRef }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n <ng-container *ngFor=\"let item of allItems; index as i\">\n <div class=\"controls-wrapper\">\n <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n <button\n *ngIf=\"!(readonly || readonly === '')\"\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && compactMode && i === allItems.length - 1\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n >\n <cds-icon shape=\"plus\"></cds-icon>\n </button>\n </div>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && allItems.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n >\n <cds-icon shape=\"plus\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n {{addLabel}}\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }] });
|
|
1067
|
+
ClrGenericQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: ClrGenericQuickList, selector: "clr-generic-quick-list", inputs: { allItems: ["clrAllItems", "allItems"], addLabel: ["clrAddLabel", "addLabel"], addPossible: ["clrAddPossible", "addPossible"], blankItem: ["clrBlankItem", "blankItem"], controlClasses: ["clrControlClasses", "controlClasses"], required: ["clrMandatory", "required"], readonly: "readonly", compactMode: "compactMode" }, outputs: { added: "clrAdded", removed: "clrRemoved" }, host: { properties: { "class.generic-quick-list": "true", "class.clr-form-control": "true" } }, queries: [{ propertyName: "itemTemplate", predicate: TemplateRef }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n <ng-container *ngFor=\"let item of allItems; index as i\">\n <div class=\"controls-wrapper\">\n <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n <button\n *ngIf=\"!(readonly || readonly === '')\"\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && compactMode && i === allItems.length - 1\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n </div>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && allItems.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n {{addLabel}}\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }] });
|
|
1068
1068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrGenericQuickList, decorators: [{
|
|
1069
1069
|
type: Component,
|
|
1070
|
-
args: [{ selector: 'clr-generic-quick-list', host: { '[class.generic-quick-list]': 'true', '[class.clr-form-control]': 'true' }, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n <ng-container *ngFor=\"let item of allItems; index as i\">\n <div class=\"controls-wrapper\">\n <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n <button\n *ngIf=\"!(readonly || readonly === '')\"\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && compactMode && i === allItems.length - 1\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n >\n <cds-icon shape=\"plus\"></cds-icon>\n </button>\n </div>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && allItems.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n >\n <cds-icon shape=\"plus\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n {{addLabel}}\n </button>\n</div>\n" }]
|
|
1070
|
+
args: [{ selector: 'clr-generic-quick-list', host: { '[class.generic-quick-list]': 'true', '[class.clr-form-control]': 'true' }, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"clr-control-container\" [ngClass]=\"controlClasses\">\n <ng-content select=\".header-container\"></ng-content>\n\n <ng-container *ngFor=\"let item of allItems; index as i\">\n <div class=\"controls-wrapper\">\n <div class=\"controls-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate.get(0); context: {$implicit:item}\"></ng-container>\n </div>\n <button\n *ngIf=\"!(readonly || readonly === '')\"\n type=\"button\"\n class=\"btn btn-icon btn-link btn-trash\"\n [ngClass]=\"{'btn-trash-ext': !(compactMode && i === allItems.length - 1)}\"\n [disabled]=\"required && allItems.length === 1\"\n (click)=\"removeItem(item)\"\n >\n <cds-icon shape=\"trash\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && compactMode && i === allItems.length - 1\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n </div>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && allItems.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\n type=\"button\"\n class=\"btn btn-link btn-sm btn-add\"\n (click)=\"addItem()\"\n [disabled]=\"!addPossible\"\n >\n {{addLabel}}\n </button>\n</div>\n" }]
|
|
1071
1071
|
}], propDecorators: { allItems: [{
|
|
1072
1072
|
type: Input,
|
|
1073
1073
|
args: ['clrAllItems']
|
|
@@ -3162,13 +3162,14 @@ const CLR_BLANK_OPTION = { id: '-BLANK-', label: '- Select an option -', value:
|
|
|
3162
3162
|
* This software is released under MIT license.
|
|
3163
3163
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
3164
3164
|
*/
|
|
3165
|
-
ClarityIcons.addIcons(trashIcon,
|
|
3165
|
+
ClarityIcons.addIcons(trashIcon, plusCircleIcon);
|
|
3166
3166
|
class ClrAddOption {
|
|
3167
3167
|
constructor() {
|
|
3168
3168
|
this.mandatory = false;
|
|
3169
3169
|
this.allValues = [];
|
|
3170
3170
|
this.excludedValues = [];
|
|
3171
3171
|
this.disabled = false;
|
|
3172
|
+
this.disableAddButton = true;
|
|
3172
3173
|
this.showAddButton = false;
|
|
3173
3174
|
this.valueChanged = new EventEmitter();
|
|
3174
3175
|
this.remove = new EventEmitter();
|
|
@@ -3193,10 +3194,10 @@ class ClrAddOption {
|
|
|
3193
3194
|
}
|
|
3194
3195
|
}
|
|
3195
3196
|
ClrAddOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrAddOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3196
|
-
ClrAddOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: ClrAddOption, selector: "clr-add-option", inputs: { blankOption: "blankOption", value: "value", mandatory: "mandatory", allValues: "allValues", excludedValues: "excludedValues", readonly: "readonly", disabled: "disabled", showAddButton: "showAddButton" }, outputs: { valueChanged: "valueChanged", remove: "remove", add: "add" }, host: { properties: { "class.quick-list-option": "true" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, 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 [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n [disabled]=\"trashDisabled() || disabled\"\n (click)=\"remove.emit()\"\n>\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<button\n *ngIf=\"!(readonly || readonly === '') && showAddButton\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"add.emit()\"\n>\n <cds-icon shape=\"plus\"></cds-icon>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }] });
|
|
3197
|
+
ClrAddOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: ClrAddOption, selector: "clr-add-option", inputs: { blankOption: "blankOption", value: "value", mandatory: "mandatory", allValues: "allValues", excludedValues: "excludedValues", readonly: "readonly", disabled: "disabled", disableAddButton: "disableAddButton", showAddButton: "showAddButton" }, outputs: { valueChanged: "valueChanged", remove: "remove", add: "add" }, host: { properties: { "class.quick-list-option": "true" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, 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 [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n [disabled]=\"trashDisabled() || disabled\"\n (click)=\"remove.emit()\"\n>\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<button\n *ngIf=\"!(readonly || readonly === '') && showAddButton\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"add.emit()\"\n [disabled]=\"disableAddButton\"\n>\n <cds-icon shape=\"plus-circle\"></cds-icon>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }] });
|
|
3197
3198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrAddOption, decorators: [{
|
|
3198
3199
|
type: Component,
|
|
3199
|
-
args: [{ selector: 'clr-add-option', host: { '[class.quick-list-option]': 'true' }, 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 [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n [disabled]=\"trashDisabled() || disabled\"\n (click)=\"remove.emit()\"\n>\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<button\n *ngIf=\"!(readonly || readonly === '') && showAddButton\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"add.emit()\"\n>\n <cds-icon shape=\"plus\"></cds-icon>\n</button>\n" }]
|
|
3200
|
+
args: [{ selector: 'clr-add-option', host: { '[class.quick-list-option]': 'true' }, 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 [ngClass]=\"{'quick-list-trash-ext': !showAddButton}\"\n [disabled]=\"trashDisabled() || disabled\"\n (click)=\"remove.emit()\"\n>\n <cds-icon shape=\"trash\"></cds-icon>\n</button>\n<button\n *ngIf=\"!(readonly || readonly === '') && showAddButton\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"add.emit()\"\n [disabled]=\"disableAddButton\"\n>\n <cds-icon shape=\"plus-circle\"></cds-icon>\n</button>\n" }]
|
|
3200
3201
|
}], propDecorators: { blankOption: [{
|
|
3201
3202
|
type: Input
|
|
3202
3203
|
}], value: [{
|
|
@@ -3211,6 +3212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
3211
3212
|
type: Input
|
|
3212
3213
|
}], disabled: [{
|
|
3213
3214
|
type: Input
|
|
3215
|
+
}], disableAddButton: [{
|
|
3216
|
+
type: Input
|
|
3214
3217
|
}], showAddButton: [{
|
|
3215
3218
|
type: Input
|
|
3216
3219
|
}], valueChanged: [{
|
|
@@ -3229,7 +3232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
3229
3232
|
* This software is released under MIT license.
|
|
3230
3233
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
3231
3234
|
*/
|
|
3232
|
-
ClarityIcons.addIcons(
|
|
3235
|
+
ClarityIcons.addIcons(plusCircleIcon);
|
|
3233
3236
|
class ClrQuickList extends ClrAbstractFormComponent {
|
|
3234
3237
|
constructor() {
|
|
3235
3238
|
super(...arguments);
|
|
@@ -3299,7 +3302,7 @@ ClrQuickList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
3299
3302
|
useExisting: forwardRef(() => ClrQuickList),
|
|
3300
3303
|
multi: true,
|
|
3301
3304
|
},
|
|
3302
|
-
], viewQueries: [{ propertyName: "options", predicate: ClrAddOption, descendants: true }], usesInheritance: true, ngImport: i0, 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 (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [
|
|
3305
|
+
], viewQueries: [{ propertyName: "options", predicate: ClrAddOption, descendants: true }], usesInheritance: true, ngImport: i0, 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 (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [disableAddButton]=\"addNotPossible() || disabled\"\n [showAddButton]=\"compactMode && i === values.length - 1\"\n >\n </clr-add-option>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && values.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrAddOption, selector: "clr-add-option", inputs: ["blankOption", "value", "mandatory", "allValues", "excludedValues", "readonly", "disabled", "disableAddButton", "showAddButton"], outputs: ["valueChanged", "remove", "add"] }] });
|
|
3303
3306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrQuickList, decorators: [{
|
|
3304
3307
|
type: Component,
|
|
3305
3308
|
args: [{ selector: 'clr-quick-list', host: { '[class.quick-list]': 'true' }, providers: [
|
|
@@ -3308,7 +3311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
3308
3311
|
useExisting: forwardRef(() => ClrQuickList),
|
|
3309
3312
|
multi: true,
|
|
3310
3313
|
},
|
|
3311
|
-
], 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 (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [
|
|
3314
|
+
], 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 (add)=\"addBlankOption()\"\n [value]=\"value\"\n (valueChanged)=\"onValueChanged($event, i)\"\n [blankOption]=\"blankOption\"\n [mandatory]=\"mandatory\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [disableAddButton]=\"addNotPossible() || disabled\"\n [showAddButton]=\"compactMode && i === values.length - 1\"\n >\n </clr-add-option>\n </ng-container>\n <button\n *ngIf=\"!(readonly || readonly === '') && values.length === 0 && compactMode\"\n type=\"button\"\n class=\"btn btn-icon btn-link quick-list-addcompact\"\n (click)=\"addBlankOption()\"\n [disabled]=\"addNotPossible() || disabled\"\n >\n <cds-icon shape=\"plus-circle\"></cds-icon>\n </button>\n <button\n *ngIf=\"!(readonly || readonly === '') && !compactMode\"\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" }]
|
|
3312
3315
|
}], propDecorators: { blankOption: [{
|
|
3313
3316
|
type: Input,
|
|
3314
3317
|
args: ['clrBlankOption']
|