pruebatlp20v17-design-system 0.0.7 → 0.0.9
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.
|
@@ -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: ["
|
|
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: ["::ng-deep tlp-combobox{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}::ng-deep tlp-combobox .cds--list-box{border:1px solid #003c69;border-radius:4px}::ng-deep tlp-combobox .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}::ng-deep tlp-combobox .cds--list-box--expanded,::ng-deep tlp-combobox .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}::ng-deep tlp-combobox .cds--list-box__menu-item:hover{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}::ng-deep tlp-combobox .cds--text-input,::ng-deep tlp-combobox .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}::ng-deep tlp-combobox .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}::ng-deep tlp-combobox .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--list-box__menu-item__option{border-top:1px solid transparent!important}::ng-deep tlp-combobox .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}::ng-deep tlp-combobox .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,::ng-deep tlp-combobox .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 tlp-combobox .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: ["
|
|
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: ["::ng-deep tlp-combobox{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}::ng-deep tlp-combobox .cds--list-box{border:1px solid #003c69;border-radius:4px}::ng-deep tlp-combobox .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}::ng-deep tlp-combobox .cds--list-box--expanded,::ng-deep tlp-combobox .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}::ng-deep tlp-combobox .cds--list-box__menu-item:hover{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}::ng-deep tlp-combobox .cds--text-input,::ng-deep tlp-combobox .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}::ng-deep tlp-combobox .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}::ng-deep tlp-combobox .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--list-box__menu-item__option{border-top:1px solid transparent!important}::ng-deep tlp-combobox .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}::ng-deep tlp-combobox .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,::ng-deep tlp-combobox .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 tlp-combobox .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 .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"] }] });
|
|
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: [":host ::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)}:host ::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)}:host ::ng-deep .cds--text-input:focus{border-color:#287eff}:host ::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}:host ::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}:host ::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 .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"] }]
|
|
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: [":host ::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)}:host ::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)}:host ::ng-deep .cds--text-input:focus{border-color:#287eff}:host ::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}:host ::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}:host ::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 .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"] }] });
|
|
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: [":host ::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)}:host ::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)}:host ::ng-deep .cds--text-input:focus{border-color:#287eff}:host ::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}:host ::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}:host ::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 .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"] }]
|
|
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: [":host ::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)}:host ::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)}:host ::ng-deep .cds--text-input:focus{border-color:#287eff}:host ::ng-deep .cds--text-input:disabled{border:1px solid #afafaf}:host ::ng-deep .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus){outline:none;border:1px solid #d52b1e}:host ::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: [{
|
|
@@ -2060,7 +2060,7 @@ class ComboboxComponent {
|
|
|
2060
2060
|
multi: true,
|
|
2061
2061
|
useExisting: ComboboxComponent,
|
|
2062
2062
|
},
|
|
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: ["
|
|
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: ["::ng-deep tlp-combobox{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}::ng-deep tlp-combobox .cds--list-box{border:1px solid #003c69;border-radius:4px}::ng-deep tlp-combobox .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}::ng-deep tlp-combobox .cds--list-box--expanded,::ng-deep tlp-combobox .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}::ng-deep tlp-combobox .cds--list-box__menu-item:hover{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}::ng-deep tlp-combobox .cds--text-input,::ng-deep tlp-combobox .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}::ng-deep tlp-combobox .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}::ng-deep tlp-combobox .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--list-box__menu-item__option{border-top:1px solid transparent!important}::ng-deep tlp-combobox .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}::ng-deep tlp-combobox .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,::ng-deep tlp-combobox .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 tlp-combobox .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"] }] });
|
|
2064
2064
|
}
|
|
2065
2065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
2066
2066
|
type: Component,
|
|
@@ -2070,7 +2070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2070
2070
|
multi: true,
|
|
2071
2071
|
useExisting: ComboboxComponent,
|
|
2072
2072
|
},
|
|
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: ["
|
|
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: ["::ng-deep tlp-combobox{--cds-selected-ui: var(--cds-layer-accent, #d0e2ff);color:var(--cds-text-02, #525252)}::ng-deep tlp-combobox .cds--list-box{border:1px solid #003c69;border-radius:4px}::ng-deep tlp-combobox .cds--list-box.cds--list-box--disabled{border:1px solid #afafaf;background-color:#f1f1f1}::ng-deep tlp-combobox .cds--list-box--expanded,::ng-deep tlp-combobox .cds--list-box__menu{margin:0;padding:0;list-style-type:none;background-color:#f4f4f4}::ng-deep tlp-combobox .cds--list-box__menu-item:hover{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input{background-color:unset}::ng-deep tlp-combobox .cds--text-input,::ng-deep tlp-combobox .cds--multi-select--filterable.cds--combo-box .cds--text-input{border:none}::ng-deep tlp-combobox .cds--combo-box[data-invalid] .cds--text-input:not(:focus){outline:none}::ng-deep tlp-combobox .cds--combo-box .cds--list-box__menu-item:first-child.cds--list-box__menu-item--highlighted:before{inline-size:99%!important}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:#e0e0e0}::ng-deep tlp-combobox .cds--list-box__menu-item__option{border-top:1px solid transparent!important}::ng-deep tlp-combobox .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-ui-03, #e0e0e0)}::ng-deep tlp-combobox .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)}::ng-deep tlp-combobox .cds--list-box__menu-item--active:hover,::ng-deep tlp-combobox .cds--list-box__menu-item--active.cds--list-box__menu-item--highlighted{background-color:var(--cds-selected-ui, #e0e0e0)}::ng-deep tlp-combobox .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,::ng-deep tlp-combobox .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 tlp-combobox .cds--list-box__menu-item--highlighted{background:unset}\n"] }]
|
|
2074
2074
|
}], propDecorators: { items: [{
|
|
2075
2075
|
type: Input
|
|
2076
2076
|
}], dropUp: [{
|