pruebatlp20v17-design-system 0.0.4 → 0.0.7
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/esm2022/lib/checkbox/checkbox.component.mjs +7 -6
- package/esm2022/lib/combobox/combobox.component.mjs +2 -2
- package/esm2022/lib/input/input.component.mjs +2 -2
- package/fesm2022/pruebatlp20v17-design-system.mjs +10 -9
- package/fesm2022/pruebatlp20v17-design-system.mjs.map +1 -1
- package/lib/checkbox/checkbox.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -15,11 +15,12 @@ export class CheckboxComponent {
|
|
|
15
15
|
isTouched = false;
|
|
16
16
|
_onChangeCallback;
|
|
17
17
|
_onTouchCallback;
|
|
18
|
-
handleChange(
|
|
19
|
-
this.checked =
|
|
20
|
-
this._onChangeCallback?.(
|
|
18
|
+
handleChange(checked) {
|
|
19
|
+
this.checked = checked;
|
|
20
|
+
this._onChangeCallback?.(checked);
|
|
21
21
|
}
|
|
22
22
|
handleTouch(event) {
|
|
23
|
+
console.log(event);
|
|
23
24
|
if (!this.isTouched) {
|
|
24
25
|
this.isTouched = true;
|
|
25
26
|
this._onTouchCallback?.(event);
|
|
@@ -48,7 +49,7 @@ export class CheckboxComponent {
|
|
|
48
49
|
multi: true,
|
|
49
50
|
useExisting: CheckboxComponent,
|
|
50
51
|
},
|
|
51
|
-
], ngImport: i0, template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (
|
|
52
|
+
], ngImport: i0, template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (checkedChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n>\r\n {{ label }}\r\n</ibm-checkbox>\r\n", styles: [":host ::ng-deep .bx--checkbox-label:before{border-radius:2px}:host ::ng-deep .cds--checkbox-label{align-items:center}\n"], dependencies: [{ kind: "component", type: i1.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }] });
|
|
52
53
|
}
|
|
53
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
54
55
|
type: Component,
|
|
@@ -58,7 +59,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
58
59
|
multi: true,
|
|
59
60
|
useExisting: CheckboxComponent,
|
|
60
61
|
},
|
|
61
|
-
], template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (
|
|
62
|
+
], template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (checkedChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n>\r\n {{ label }}\r\n</ibm-checkbox>\r\n", styles: [":host ::ng-deep .bx--checkbox-label:before{border-radius:2px}:host ::ng-deep .cds--checkbox-label{align-items:center}\n"] }]
|
|
62
63
|
}], propDecorators: { label: [{
|
|
63
64
|
type: Input
|
|
64
65
|
}], name: [{
|
|
@@ -76,4 +77,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
76
77
|
}], indeterminateChange: [{
|
|
77
78
|
type: Output
|
|
78
79
|
}] } });
|
|
79
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vZGVzaWduLXN5c3RlbS9zcmMvbGliL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBZXpFLE1BQU0sT0FBTyxpQkFBaUI7SUFDbkIsS0FBSyxHQUFXLEVBQUUsQ0FBQztJQUNuQixJQUFJLEdBQVcsRUFBRSxDQUFDO0lBQ2xCLEVBQUUsR0FBVyxFQUFFLENBQUM7SUFDaEIsS0FBSyxHQUFrQixLQUFLLENBQUM7SUFDN0IsU0FBUyxHQUFZLEtBQUssQ0FBQztJQUMzQixhQUFhLEdBQVksS0FBSyxDQUFDO0lBQy9CLFFBQVEsR0FBWSxLQUFLLENBQUM7SUFDekIsbUJBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUU1RCxPQUFPLEdBQW1CLEtBQUssQ0FBQztJQUNoQyxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBRWxCLGlCQUFpQixDQUF5QztJQUMxRCxnQkFBZ0IsQ0FBdUM7SUFFdkQsWUFBWSxDQUFDLE9BQWdCO1FBQzNCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBWTtRQUN0QixPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ25CLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7WUFDdEIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDakMsQ0FBQztJQUNILENBQUM7SUFFRCxVQUFVLENBQUMsT0FBdUI7UUFDaEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7UUFDdkIsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7WUFDM0IsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDcEQsQ0FBQztJQUNILENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQzt3R0EvQ1UsaUJBQWlCOzRGQUFqQixpQkFBaUIsa1BBUmpCO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsS0FBSyxFQUFFLElBQUk7Z0JBQ1gsV0FBVyxFQUFFLGlCQUFpQjthQUMvQjtTQUNGLDBCQ2RILDhUQVlBOzs0RkRJYSxpQkFBaUI7a0JBWjdCLFNBQVM7K0JBQ0UsY0FBYyxhQUdiO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLEtBQUssRUFBRSxJQUFJOzRCQUNYLFdBQVcsbUJBQW1CO3lCQUMvQjtxQkFDRjs4QkFHUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksbUJBQW1CO3NCQUE1QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcclxuaW1wb3J0IHsgQ2hlY2tib3hWYWx1ZSB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL2NoZWNrYm94XCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogXCJ0bHAtY2hlY2tib3hcIixcclxuICB0ZW1wbGF0ZVVybDogXCIuL2NoZWNrYm94LmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL2NoZWNrYm94LmNvbXBvbmVudC5zY3NzXCJdLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgbXVsdGk6IHRydWUsXHJcbiAgICAgIHVzZUV4aXN0aW5nOiBDaGVja2JveENvbXBvbmVudCxcclxuICAgIH0sXHJcbiAgXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSBcIlwiO1xyXG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZyA9IFwiXCI7XHJcbiAgQElucHV0KCkgaWQ6IHN0cmluZyA9IFwiXCI7XHJcbiAgQElucHV0KCkgdmFsdWU6IENoZWNrYm94VmFsdWUgPSBmYWxzZTtcclxuICBASW5wdXQoKSBoaWRlTGFiZWw6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBpbmRldGVybWluYXRlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBAT3V0cHV0KCkgaW5kZXRlcm1pbmF0ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgY2hlY2tlZDogYm9vbGVhbiB8IG51bGwgPSBmYWxzZTtcclxuICBpc1RvdWNoZWQgPSBmYWxzZTtcclxuXHJcbiAgX29uQ2hhbmdlQ2FsbGJhY2s6ICgodmFsdWU6IGJvb2xlYW4pID0+IHZvaWQpIHwgdW5kZWZpbmVkO1xyXG4gIF9vblRvdWNoQ2FsbGJhY2s6ICgoZXZlbnQ6IEV2ZW50KSA9PiB2b2lkKSB8IHVuZGVmaW5lZDtcclxuXHJcbiAgaGFuZGxlQ2hhbmdlKGNoZWNrZWQ6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuY2hlY2tlZCA9IGNoZWNrZWQ7XHJcbiAgICB0aGlzLl9vbkNoYW5nZUNhbGxiYWNrPy4oY2hlY2tlZCk7XHJcbiAgfVxyXG5cclxuICBoYW5kbGVUb3VjaChldmVudDogRXZlbnQpIHtcclxuICAgIGNvbnNvbGUubG9nKGV2ZW50KTtcclxuICAgIGlmICghdGhpcy5pc1RvdWNoZWQpIHtcclxuICAgICAgdGhpcy5pc1RvdWNoZWQgPSB0cnVlO1xyXG4gICAgICB0aGlzLl9vblRvdWNoQ2FsbGJhY2s/LihldmVudCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICB3cml0ZVZhbHVlKGNoZWNrZWQ6IGJvb2xlYW4gfCBudWxsKTogdm9pZCB7XHJcbiAgICB0aGlzLmNoZWNrZWQgPSBjaGVja2VkO1xyXG4gICAgaWYgKHRoaXMuaW5kZXRlcm1pbmF0ZSkge1xyXG4gICAgICB0aGlzLmluZGV0ZXJtaW5hdGUgPSBmYWxzZTtcclxuICAgICAgdGhpcy5pbmRldGVybWluYXRlQ2hhbmdlLmVtaXQodGhpcy5pbmRldGVybWluYXRlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5fb25DaGFuZ2VDYWxsYmFjayA9IGZuO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5fb25Ub3VjaENhbGxiYWNrID0gZm47XHJcbiAgfVxyXG5cclxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xyXG4gIH1cclxufVxyXG4iLCI8aWJtLWNoZWNrYm94XHJcbiAgW2NoZWNrZWRdPVwiISFjaGVja2VkXCJcclxuICBbaGlkZUxhYmVsXT1cImhpZGVMYWJlbFwiXHJcbiAgW2luZGV0ZXJtaW5hdGVdPVwiaW5kZXRlcm1pbmF0ZVwiXHJcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICBbdmFsdWVdPVwidmFsdWVcIlxyXG4gIFtuYW1lXT1cIm5hbWVcIlxyXG4gIChjaGVja2VkQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcclxuICAoZm9jdXNvdXQpPVwiaGFuZGxlVG91Y2goJGV2ZW50KVwiXHJcbj5cclxuICB7eyBsYWJlbCB9fVxyXG48L2libS1jaGVja2JveD5cclxuIl19
|
|
@@ -140,7 +140,7 @@ export class ComboboxComponent {
|
|
|
140
140
|
multi: true,
|
|
141
141
|
useExisting: ComboboxComponent,
|
|
142
142
|
},
|
|
143
|
-
], ngImport: i0, template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] });
|
|
143
|
+
], ngImport: i0, template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--list-box--expanded,:host ::ng-deep .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}:host ::ng-deep .cds--list-box__menu-item:hover{background-color:#e0e0e0}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}:host ::ng-deep .cds--list-box__menu-item__option{border-top:1px solid transparent!important}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] });
|
|
144
144
|
}
|
|
145
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
146
146
|
type: Component,
|
|
@@ -150,7 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
150
150
|
multi: true,
|
|
151
151
|
useExisting: ComboboxComponent,
|
|
152
152
|
},
|
|
153
|
-
], template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"] }]
|
|
153
|
+
], template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--list-box--expanded,:host ::ng-deep .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}:host ::ng-deep .cds--list-box__menu-item:hover{background-color:#e0e0e0}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}:host ::ng-deep .cds--list-box__menu-item__option{border-top:1px solid transparent!important}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"] }]
|
|
154
154
|
}], propDecorators: { items: [{
|
|
155
155
|
type: Input
|
|
156
156
|
}], dropUp: [{
|
|
@@ -61,7 +61,7 @@ export class InputComponent {
|
|
|
61
61
|
multi: true,
|
|
62
62
|
useExisting: InputComponent,
|
|
63
63
|
},
|
|
64
|
-
], ngImport: i0, template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .
|
|
64
|
+
], ngImport: i0, template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .cds--text-input{border:1px solid #003c69;border-radius:4px;padding:0 .5rem;font-size:var(--cds-body-short-01-font-size, .875rem);font-weight:var(--cds-body-short-01-font-weight, 400);line-height:var(--cds-body-short-01-line-height, 1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing, .16px);background-color:var(--cds-field-01, #f4f4f4);color:var(--cds-text-01, #161616);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf;outline:2px solid transparent;outline-offset:-2px;border-bottom:1px solid transparent;background-color:#f4f4f4;color:var(--cds-text-disabled, #c6c6c6);cursor:not-allowed;-webkit-text-fill-color:var(--cds-disabled-02, #c6c6c6)}::ng-deep .cds--text-input:focus{border-color:#287eff}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}::ng-deep .cds--text-area__invalid-icon{top:50%}:host ::ng-deep .disabled{--cds-text-02: #afafaf}:host ::ng-deep .empty_label>.cds--label{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] });
|
|
65
65
|
}
|
|
66
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
67
67
|
type: Component,
|
|
@@ -71,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
71
71
|
multi: true,
|
|
72
72
|
useExisting: InputComponent,
|
|
73
73
|
},
|
|
74
|
-
], template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .
|
|
74
|
+
], template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .cds--text-input{border:1px solid #003c69;border-radius:4px;padding:0 .5rem;font-size:var(--cds-body-short-01-font-size, .875rem);font-weight:var(--cds-body-short-01-font-weight, 400);line-height:var(--cds-body-short-01-line-height, 1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing, .16px);background-color:var(--cds-field-01, #f4f4f4);color:var(--cds-text-01, #161616);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf;outline:2px solid transparent;outline-offset:-2px;border-bottom:1px solid transparent;background-color:#f4f4f4;color:var(--cds-text-disabled, #c6c6c6);cursor:not-allowed;-webkit-text-fill-color:var(--cds-disabled-02, #c6c6c6)}::ng-deep .cds--text-input:focus{border-color:#287eff}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}::ng-deep .cds--text-area__invalid-icon{top:50%}:host ::ng-deep .disabled{--cds-text-02: #afafaf}:host ::ng-deep .empty_label>.cds--label{margin-bottom:0}\n"] }]
|
|
75
75
|
}], propDecorators: { label: [{
|
|
76
76
|
type: Input
|
|
77
77
|
}], helperText: [{
|
|
@@ -140,7 +140,7 @@ class InputComponent {
|
|
|
140
140
|
multi: true,
|
|
141
141
|
useExisting: InputComponent,
|
|
142
142
|
},
|
|
143
|
-
], ngImport: i0, template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .
|
|
143
|
+
], ngImport: i0, template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .cds--text-input{border:1px solid #003c69;border-radius:4px;padding:0 .5rem;font-size:var(--cds-body-short-01-font-size, .875rem);font-weight:var(--cds-body-short-01-font-weight, 400);line-height:var(--cds-body-short-01-line-height, 1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing, .16px);background-color:var(--cds-field-01, #f4f4f4);color:var(--cds-text-01, #161616);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf;outline:2px solid transparent;outline-offset:-2px;border-bottom:1px solid transparent;background-color:#f4f4f4;color:var(--cds-text-disabled, #c6c6c6);cursor:not-allowed;-webkit-text-fill-color:var(--cds-disabled-02, #c6c6c6)}::ng-deep .cds--text-input:focus{border-color:#287eff}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}::ng-deep .cds--text-area__invalid-icon{top:50%}:host ::ng-deep .disabled{--cds-text-02: #afafaf}:host ::ng-deep .empty_label>.cds--label{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] });
|
|
144
144
|
}
|
|
145
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
146
146
|
type: Component,
|
|
@@ -150,7 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
150
150
|
multi: true,
|
|
151
151
|
useExisting: InputComponent,
|
|
152
152
|
},
|
|
153
|
-
], template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .
|
|
153
|
+
], template: "<!-- NOTE: keep in sync with below template for type=number -->\r\n<ng-container *ngIf=\"type !== 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n\r\n<!--\r\n Separate element with static type=number is needed for ngModel to model as number\r\n https://github.com/angular/angular/issues/13243\r\n\r\n NOTE: do not refactor by making the conditional only for the input,\r\n it will break stuff because Angular \u00AF\\_(\u30C4)_/\u00AF\r\n-->\r\n<ng-container *ngIf=\"type === 'number'\">\r\n <ibm-label\r\n [ngClass]=\"{ disabled: disabled, empty_label: !label }\"\r\n [helperText]=\"helperText\"\r\n [invalid]=\"invalid\"\r\n [invalidText]=\"invalidText\"\r\n >\r\n {{ label }}\r\n <input\r\n ibmText\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [invalid]=\"invalid\"\r\n [size]=\"size\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"handleModelChange($event)\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n (blur)=\"handleTouch($event)\"\r\n />\r\n </ibm-label>\r\n</ng-container>\r\n", styles: ["::ng-deep .cds--text-input{border:1px solid #003c69;border-radius:4px;padding:0 .5rem;font-size:var(--cds-body-short-01-font-size, .875rem);font-weight:var(--cds-body-short-01-font-weight, 400);line-height:var(--cds-body-short-01-line-height, 1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing, .16px);background-color:var(--cds-field-01, #f4f4f4);color:var(--cds-text-01, #161616);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf;outline:2px solid transparent;outline-offset:-2px;border-bottom:1px solid transparent;background-color:#f4f4f4;color:var(--cds-text-disabled, #c6c6c6);cursor:not-allowed;-webkit-text-fill-color:var(--cds-disabled-02, #c6c6c6)}::ng-deep .cds--text-input:focus{border-color:#287eff}::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}::ng-deep .cds--text-area__invalid-icon{top:50%}:host ::ng-deep .disabled{--cds-text-02: #afafaf}:host ::ng-deep .empty_label>.cds--label{margin-bottom:0}\n"] }]
|
|
154
154
|
}], propDecorators: { label: [{
|
|
155
155
|
type: Input
|
|
156
156
|
}], helperText: [{
|
|
@@ -418,11 +418,12 @@ class CheckboxComponent {
|
|
|
418
418
|
isTouched = false;
|
|
419
419
|
_onChangeCallback;
|
|
420
420
|
_onTouchCallback;
|
|
421
|
-
handleChange(
|
|
422
|
-
this.checked =
|
|
423
|
-
this._onChangeCallback?.(
|
|
421
|
+
handleChange(checked) {
|
|
422
|
+
this.checked = checked;
|
|
423
|
+
this._onChangeCallback?.(checked);
|
|
424
424
|
}
|
|
425
425
|
handleTouch(event) {
|
|
426
|
+
console.log(event);
|
|
426
427
|
if (!this.isTouched) {
|
|
427
428
|
this.isTouched = true;
|
|
428
429
|
this._onTouchCallback?.(event);
|
|
@@ -451,7 +452,7 @@ class CheckboxComponent {
|
|
|
451
452
|
multi: true,
|
|
452
453
|
useExisting: CheckboxComponent,
|
|
453
454
|
},
|
|
454
|
-
], ngImport: i0, template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (
|
|
455
|
+
], ngImport: i0, template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (checkedChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n>\r\n {{ label }}\r\n</ibm-checkbox>\r\n", styles: [":host ::ng-deep .bx--checkbox-label:before{border-radius:2px}:host ::ng-deep .cds--checkbox-label{align-items:center}\n"], dependencies: [{ kind: "component", type: i1$3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }] });
|
|
455
456
|
}
|
|
456
457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
457
458
|
type: Component,
|
|
@@ -461,7 +462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
461
462
|
multi: true,
|
|
462
463
|
useExisting: CheckboxComponent,
|
|
463
464
|
},
|
|
464
|
-
], template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (
|
|
465
|
+
], template: "<ibm-checkbox\r\n [checked]=\"!!checked\"\r\n [hideLabel]=\"hideLabel\"\r\n [indeterminate]=\"indeterminate\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n [name]=\"name\"\r\n (checkedChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n>\r\n {{ label }}\r\n</ibm-checkbox>\r\n", styles: [":host ::ng-deep .bx--checkbox-label:before{border-radius:2px}:host ::ng-deep .cds--checkbox-label{align-items:center}\n"] }]
|
|
465
466
|
}], propDecorators: { label: [{
|
|
466
467
|
type: Input
|
|
467
468
|
}], name: [{
|
|
@@ -2059,7 +2060,7 @@ class ComboboxComponent {
|
|
|
2059
2060
|
multi: true,
|
|
2060
2061
|
useExisting: ComboboxComponent,
|
|
2061
2062
|
},
|
|
2062
|
-
], ngImport: i0, template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$6.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i3$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] });
|
|
2063
|
+
], ngImport: i0, template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--list-box--expanded,:host ::ng-deep .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}:host ::ng-deep .cds--list-box__menu-item:hover{background-color:#e0e0e0}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}:host ::ng-deep .cds--list-box__menu-item__option{border-top:1px solid transparent!important}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$6.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i3$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] });
|
|
2063
2064
|
}
|
|
2064
2065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
2065
2066
|
type: Component,
|
|
@@ -2069,7 +2070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2069
2070
|
multi: true,
|
|
2070
2071
|
useExisting: ComboboxComponent,
|
|
2071
2072
|
},
|
|
2072
|
-
], template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"] }]
|
|
2073
|
+
], template: "<!-- $any because we don't want to require the `selected` property on consumer side-->\r\n<ibm-combo-box\r\n [items]=\"$any(items)\"\r\n [dropUp]=\"false\"\r\n [itemValueKey]=\"itemValueKey!\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"_value\"\r\n [type]=\"type\"\r\n [invalid]=\"invalid\"\r\n [label]=\"label\"\r\n [helperText]=\"helperText\"\r\n [invalidText]=\"invalidText\"\r\n [placeholder]=\"placeholder\"\r\n [selectionFeedback]=\"selectionFeedback\"\r\n [size]=\"size\"\r\n (ngModelChange)=\"handleChange($event)\"\r\n (focusout)=\"handleTouch($event)\"\r\n (clear)=\"onClear()\"\r\n (search)=\"onSearch($event)\"\r\n (close)=\"onClose()\"\r\n>\r\n <ibm-dropdown-list></ibm-dropdown-list>\r\n</ibm-combo-box>\r\n", styles: [":host ::ng-deep{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}:host ::ng-deep .cds--list-box{border:1px solid #003c69;border-radius:4px}:host ::ng-deep .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}:host ::ng-deep .cds--list-box--expanded,:host ::ng-deep .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}:host ::ng-deep .cds--list-box__menu-item:hover{background-color:#e0e0e0}:host ::ng-deep .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}:host ::ng-deep .cds--text-input,:host ::ng-deep .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}:host ::ng-deep .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}:host ::ng-deep .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}:host ::ng-deep .cds--list-box__menu-item__option{border-top:1px solid transparent!important}:host ::ng-deep .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--active:hover,:host ::ng-deep .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}:host ::ng-deep .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host ::ng-deep .cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep .cds--list-box__menu-item--highlighted{background:unset}\n"] }]
|
|
2073
2074
|
}], propDecorators: { items: [{
|
|
2074
2075
|
type: Input
|
|
2075
2076
|
}], dropUp: [{
|