carbon-components-angular 3.8.0 → 3.9.3

package/combobox/combobox.component.ngfactory.js

@@ -33,22 +33,29 @@ import * as i5 from "./combobox.component";
 var styles_ComboBox = [];
 var RenderType_ComboBox = i0.ɵcrt({ encapsulation: 2, styles: styles_ComboBox, data: {} });
 export { RenderType_ComboBox as RenderType_ComboBox };
-function View_ComboBox_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 3, "div", [["class", "bx--list-box__selection bx--list-box__selection--multi"], ["role", "button"], ["tabindex", "0"], ["title", "Clear all selected items"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
+function View_ComboBox_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }); }
+function View_ComboBox_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
+function View_ComboBox_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_3)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_ComboBox_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.helperText; _ck(_v, 1, 0, currVal_0); }); }
+function View_ComboBox_7(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
+function View_ComboBox_6(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_7)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.helperText; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_ComboBox_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 4, "div", [["class", "bx--form__helper-text"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_5)), i0.ɵdid(2, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_6)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.isTemplate(_co.helperText); _ck(_v, 2, 0, currVal_0); var currVal_1 = _co.isTemplate(_co.helperText); _ck(_v, 4, 0, currVal_1); }, null); }
+function View_ComboBox_8(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 3, "div", [["class", "bx--list-box__selection bx--list-box__selection--multi"], ["role", "button"], ["tabindex", "0"], ["title", "Clear all selected items"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
         var pd_0 = (_co.clearSelected() !== false);
         ad = (pd_0 && ad);
     } return ad; }, null, null)), (_l()(), i0.ɵted(1, null, [" ", " "])), (_l()(), i0.ɵeld(2, 0, null, null, 1, ":svg:svg", [["aria-hidden", "true"], ["focusable", "false"], ["height", "16"], ["preserveAspectRatio", "xMidYMid meet"], ["role", "img"], ["style", "will-change: transform;"], ["viewBox", "0 0 16 16"], ["width", "16"], ["xmlns", "http://www.w3.org/2000/svg"]], null, null, null, null, null)), (_l()(), i0.ɵeld(3, 0, null, null, 0, ":svg:path", [["d", "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"]], null, null, null, null, null))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.pills.length; _ck(_v, 1, 0, currVal_0); }); }
-function View_ComboBox_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, [[1, 0], ["dropdownMenu", 1]], null, 1, "div", [], null, null, null, null, null)), i0.ɵncd(null, 0)], null, null); }
-export function View_ComboBox_0(_l) { return i0.ɵvid(0, [i0.ɵqud(671088640, 1, { dropdownMenu: 0 }), (_l()(), i0.ɵeld(1, 0, null, null, 7, "div", [["aria-haspopup", "true"], ["aria-label", "close menu"], ["class", "bx--list-box__field"], ["role", "button"], ["tabindex", "0"], ["type", "button"]], [[1, "aria-expanded", 0]], [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
+function View_ComboBox_9(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, [[1, 0], ["dropdownMenu", 1]], null, 1, "div", [], null, null, null, null, null)), i0.ɵncd(null, 0)], null, null); }
+export function View_ComboBox_0(_l) { return i0.ɵvid(0, [i0.ɵqud(671088640, 1, { dropdownMenu: 0 }), (_l()(), i0.ɵeld(1, 0, null, null, 4, "label", [["class", "bx--label"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_1)), i0.ɵdid(3, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_2)), i0.ɵdid(5, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_4)), i0.ɵdid(7, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(8, 0, null, null, 12, "div", [["class", "bx--combo-box bx--list-box"]], null, null, null, null, null)), i0.ɵdid(9, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(10, { "bx--multi-select": 0 }), (_l()(), i0.ɵeld(11, 0, null, null, 7, "div", [["aria-haspopup", "true"], ["aria-label", "close menu"], ["class", "bx--list-box__field"], ["role", "button"], ["tabindex", "0"], ["type", "button"]], [[1, "aria-expanded", 0]], [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
         var pd_0 = (_co.toggleDropdown() !== false);
         ad = (pd_0 && ad);
-    } return ad; }, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_1)), i0.ɵdid(3, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(4, 0, null, null, 0, "input", [["aria-label", "ListBox input field"], ["autocomplete", "off"], ["class", "bx--text-input"], ["role", "combobox"]], [[8, "disabled", 0], [8, "value", 0], [8, "placeholder", 0]], [[null, "keyup"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("keyup" === en)) {
+    } return ad; }, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_8)), i0.ɵdid(13, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(14, 0, null, null, 0, "input", [["aria-label", "ListBox input field"], ["autocomplete", "off"], ["class", "bx--text-input"], ["role", "combobox"]], [[8, "id", 0], [8, "disabled", 0], [8, "value", 0], [8, "placeholder", 0]], [[null, "keyup"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("keyup" === en)) {
         var pd_0 = (_co.onSearch($event.target.value) !== false);
         ad = (pd_0 && ad);
-    } return ad; }, null, null)), (_l()(), i0.ɵeld(5, 0, null, null, 3, "ibm-icon-chevron-down16", [["ariaLabel", "Close menu"], ["class", "bx--list-box__menu-icon"]], null, null, null, i2.View_ChevronDown16_0, i2.RenderType_ChevronDown16)), i0.ɵdid(6, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(7, { "bx--list-box__menu-icon--open": 0 }), i0.ɵdid(8, 49152, null, 0, i3.ChevronDown16, [], { ariaLabel: [0, "ariaLabel"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_2)), i0.ɵdid(10, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_1 = ((_co.type === "multi") && (_co.pills.length > 0)); _ck(_v, 3, 0, currVal_1); var currVal_5 = "bx--list-box__menu-icon"; var currVal_6 = _ck(_v, 7, 0, _co.open); _ck(_v, 6, 0, currVal_5, currVal_6); var currVal_7 = "Close menu"; _ck(_v, 8, 0, currVal_7); var currVal_8 = _co.open; _ck(_v, 10, 0, currVal_8); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.open; _ck(_v, 1, 0, currVal_0); var currVal_2 = _co.disabled; var currVal_3 = _co.selectedValue; var currVal_4 = _co.placeholder; _ck(_v, 4, 0, currVal_2, currVal_3, currVal_4); }); }
-export function View_ComboBox_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 3, "ibm-combo-box", [], [[1, "aria-disabled", 0], [8, "className", 0], [1, "role", 0], [4, "display", null]], [[null, "keydown"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
+    } return ad; }, null, null)), (_l()(), i0.ɵeld(15, 0, null, null, 3, "ibm-icon-chevron-down16", [["ariaLabel", "Close menu"], ["class", "bx--list-box__menu-icon"]], null, null, null, i2.View_ChevronDown16_0, i2.RenderType_ChevronDown16)), i0.ɵdid(16, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(17, { "bx--list-box__menu-icon--open": 0 }), i0.ɵdid(18, 49152, null, 0, i3.ChevronDown16, [], { ariaLabel: [0, "ariaLabel"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_ComboBox_9)), i0.ɵdid(20, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_1 = !_co.isTemplate(_co.label); _ck(_v, 3, 0, currVal_1); var currVal_2 = _co.isTemplate(_co.label); _ck(_v, 5, 0, currVal_2); var currVal_3 = _co.helperText; _ck(_v, 7, 0, currVal_3); var currVal_4 = "bx--combo-box bx--list-box"; var currVal_5 = _ck(_v, 10, 0, (_co.type === "multi")); _ck(_v, 9, 0, currVal_4, currVal_5); var currVal_7 = ((_co.type === "multi") && (_co.pills.length > 0)); _ck(_v, 13, 0, currVal_7); var currVal_12 = "bx--list-box__menu-icon"; var currVal_13 = _ck(_v, 17, 0, _co.open); _ck(_v, 16, 0, currVal_12, currVal_13); var currVal_14 = "Close menu"; _ck(_v, 18, 0, currVal_14); var currVal_15 = _co.open; _ck(_v, 20, 0, currVal_15); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; _ck(_v, 1, 0, currVal_0); var currVal_6 = _co.open; _ck(_v, 11, 0, currVal_6); var currVal_8 = _co.id; var currVal_9 = _co.disabled; var currVal_10 = _co.selectedValue; var currVal_11 = _co.placeholder; _ck(_v, 14, 0, currVal_8, currVal_9, currVal_10, currVal_11); }); }
+export function View_ComboBox_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 3, "ibm-combo-box", [], [[1, "aria-disabled", 0], [2, "bx--list-box__wrapper", null], [1, "role", 0], [4, "display", null]], [[null, "keydown"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
         var pd_0 = (i0.ɵnov(_v, 2).hostkeys($event) !== false);
         ad = (pd_0 && ad);
-    } return ad; }, View_ComboBox_0, RenderType_ComboBox)), i0.ɵprd(5120, null, i4.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i5.ComboBox]), i0.ɵdid(2, 5881856, null, 1, i5.ComboBox, [i0.ElementRef], null, null), i0.ɵqud(335544320, 1, { view: 0 })], function (_ck, _v) { _ck(_v, 2, 0); }, function (_ck, _v) { var currVal_0 = i0.ɵnov(_v, 2).disabled; var currVal_1 = i0.ɵnov(_v, 2).class; var currVal_2 = i0.ɵnov(_v, 2).role; var currVal_3 = i0.ɵnov(_v, 2).display; _ck(_v, 0, 0, currVal_0, currVal_1, currVal_2, currVal_3); }); }
-var ComboBoxNgFactory = i0.ɵccf("ibm-combo-box", i5.ComboBox, View_ComboBox_Host_0, { items: "items", placeholder: "placeholder", type: "type", size: "size", disabled: "disabled" }, { selected: "selected", submit: "submit", close: "close" }, ["*"]);
+    } return ad; }, View_ComboBox_0, RenderType_ComboBox)), i0.ɵprd(5120, null, i4.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i5.ComboBox]), i0.ɵdid(2, 5816320, null, 1, i5.ComboBox, [i0.ElementRef], null, null), i0.ɵqud(335544320, 1, { view: 0 })], null, function (_ck, _v) { var currVal_0 = i0.ɵnov(_v, 2).disabled; var currVal_1 = i0.ɵnov(_v, 2).hostClass; var currVal_2 = i0.ɵnov(_v, 2).role; var currVal_3 = i0.ɵnov(_v, 2).display; _ck(_v, 0, 0, currVal_0, currVal_1, currVal_2, currVal_3); }); }
+var ComboBoxNgFactory = i0.ɵccf("ibm-combo-box", i5.ComboBox, View_ComboBox_Host_0, { id: "id", items: "items", placeholder: "placeholder", type: "type", size: "size", label: "label", helperText: "helperText", disabled: "disabled" }, { selected: "selected", submit: "submit", close: "close" }, ["*"]);
 export { ComboBoxNgFactory as ComboBoxNgFactory };
 //# sourceMappingURL=combobox.component.ngfactory.js.map

package/combobox/combobox.component.ngfactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.component.ngfactory.js","sourceRoot":"","sources":["../src/combobox/combobox.component.ngfactory.ts","../src/combobox/combobox.component.ts.ComboBox.html"],"names":[],"mappings":";;;;;;;;;;;;;;;mDCUG,iRAMkC,YAJjC;;wBAAyB;MAF1B,wBAMkC,KAAA,kCAEjC,MAAA,uUASoB,KACnB,uKAAuF,wDAZvD,yDAEjC;mDA4BF,qGAEc,IACb,eAAY;sGAhDb,ySAQ4B,YAA3B;;wBAA0B;MAR3B,wBAQ4B,KAC3B,wKAMkC,IAelC,2SAQ8B,YAN7B;;wBAAuC;MAFxC,wBAQ8B,KAC7B,oXAGwB,GAFvB,+CAAmD,KADpD,sFAGwB,IAG1B,yKAEc,iDArCZ,gEAA4C,IAD7C,YAMkC,EALjC,SAA4C,GA+B3C,yCAA+B,EAD/B,iCAAmD,QADpD,YAGwB,EADvB,SAA+B,EAD/B,SAAmD,GAEnD,4BAAsB,EAHvB,YAGwB,EAAvB,SAAsB,GAKxB,mBAAY,OAFb,aAEc,EAAb,SAAY,mDA9CZ,mBAA2B,OAD5B,YAQ4B,EAP3B,SAA2B,GA8B1B,mBAAqB,WAErB,mBAAuB,gBAKvB,mBAA2B,cAR5B,YAQ8B,EAP7B,SAAqB,EAErB,SAAuB,EAKvB,SAA2B","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<div\n\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\trole=\"button\"\n\t\t\tclass=\"bx--list-box__field\"\n\t\t\ttabindex=\"0\"\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"close menu\"\n\t\t\taria-haspopup=\"true\"\n\t\t\t(click)=\"toggleDropdown()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"bx--list-box__selection bx--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\ttitle=\"Clear all selected items\">\n\t\t\t\t{{ pills.length }}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(keyup)=\"onSearch($event.target.value)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"bx--text-input\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-label=\"ListBox input field\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t[ngClass]=\"{'bx--list-box__menu-icon--open': open}\"\n\t\t\t\t\tclass=\"bx--list-box__menu-icon\"\n\t\t\t\t\tariaLabel=\"Close menu\">\n\t\t\t\t</ibm-icon-chevron-down16>\n\t\t</div>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t*ngIf=\"open\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"]}
+{"version":3,"file":"combobox.component.ngfactory.js","sourceRoot":"","sources":["../src/combobox/combobox.component.ngfactory.ts","../src/combobox/combobox.component.ts.ComboBox.html"],"names":[],"mappings":";;;;;;;;;;;;;;;mDCEG,6EAAyC,KAAA,2IAAS;;mDAClD,6LAAkE,sFAA3B,mBAA0B,QAAjE,YAAkE,EAA3B,SAA0B;mDAGjE,6EAA8C,KAAA,gJAAc;;mDAC5D,6LAA4E,sFAAhC,mBAA+B,aAA3E,YAA4E,EAAhC,SAA+B;mDAF5E,8GAAsD,KACrD,wKAA8C,IAC9C,wKAA4E,iDAD9D,mCAA+B,cAA7C,YAA8C,EAAhC,SAA+B,GAChC,kCAA8B,cAA3C,YAA4E,EAA/D,SAA8B;mDAc1C,iRAMkC,YAJjC;;wBAAyB;MAF1B,wBAMkC,KAAA,kCAEjC,MAAA,uUASoB,KACnB,uKAAuF,wDAZvD,yDAEjC;mDA6BF,qGAEc,IACb,eAAY;sGA5Dd,mHAAoC,KACnC,wKAAyC,IACzC,wKAAkE,IAEnE,wKAAsD,IAItD,6RAEqD,GAApD,mCAAmD,MACnD,0SAQ4B,YAA3B;;wBAA0B;MAR3B,wBAQ4B,KAC3B,yKAMkC,IAelC,0TAS8B,YAN7B;;wBAAuC;MAHxC,wBAS8B,KAC7B,sXAGwB,GAFvB,gDAAmD,KADpD,uFAGwB,IAG1B,yKAEc,iDA1DA,mCAA0B,SAAxC,YAAyC,EAA3B,SAA0B,GAC3B,kCAAyB,SAAtC,YAAkE,EAArD,SAAyB,GAElC,mBAAkB,aAAvB,YAAsD,EAAjD,SAAkB,GAKtB,4CAAkC,EAClC,oDAAmD,IAFpD,YAEqD,EADpD,SAAkC,EAClC,SAAmD,GAWjD,gEAA4C,IAD7C,aAMkC,EALjC,SAA4C,GAgC3C,0CAA+B,EAD/B,mCAAmD,QADpD,aAGwB,EADvB,UAA+B,EAD/B,UAAmD,GAEnD,6BAAsB,EAHvB,aAGwB,EAAvB,UAAsB,GAKxB,oBAAY,OAFb,aAEc,EAAb,UAAY,mDA3DP,mBAAU,KAAjB,YAAoC,EAA7B,SAAU,GAYf,mBAA2B,OAD5B,aAQ4B,EAP3B,SAA2B,GA8B1B,mBAAS,KACT,mBAAqB,WAErB,oBAAuB,gBAKvB,oBAA2B,cAT5B,aAS8B,EAR7B,SAAS,EACT,SAAqB,EAErB,UAAuB,EAKvB,UAA2B","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div\n\t\t\tclass=\"bx--combo-box bx--list-box\"\n\t\t\t[ngClass]=\"{'bx--multi-select' : type === 'multi'}\">\n\t\t\t<div\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"bx--list-box__field\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label=\"close menu\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t(click)=\"toggleDropdown()\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tclass=\"bx--list-box__selection bx--list-box__selection--multi\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\ttitle=\"Clear all selected items\">\n\t\t\t\t\t{{ pills.length }}\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(keyup)=\"onSearch($event.target.value)\"\n\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\tclass=\"bx--text-input\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-label=\"ListBox input field\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\t[ngClass]=\"{'bx--list-box__menu-icon--open': open}\"\n\t\t\t\t\t\tclass=\"bx--list-box__menu-icon\"\n\t\t\t\t\t\tariaLabel=\"Close menu\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t#dropdownMenu\n\t\t\t\t*ngIf=\"open\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t"]}

package/combobox/combobox.component.ngsummary.json

@@ -1 +1 @@
-{"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["attr.aria-disabled"]},{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"submit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":[{"__symbol":5,"members":[]}]}]}],"dropdownMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["dropdownMenu"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["class"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["attr.role"]}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["style.display"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":7,"members":[]}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":8,"members":[]},"arguments":["keydown",["$event"]]}]}],"_noop":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"updatePills":[{"__symbolic":"method"}],"clearSelected":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"onSearch":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"updateSelected":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":7,"members":[]}}}}],"lifecycleHooks":[0,3,4,6]},"isComponent":true,"selector":"ibm-combo-box","exportAs":null,"inputs":{"items":"items","placeholder":"placeholder","type":"type","size":"size","disabled":"disabled"},"outputs":{"selected":"selected","submit":"submit","close":"close"},"hostListeners":{"keydown":"hostkeys($event)"},"hostProperties":{"attr.aria-disabled":"disabled","class":"class","attr.role":"role","style.display":"display"},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":9,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":0,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":5,"members":[]}}}],"first":true,"descendants":true,"propertyName":"view","read":null}],"guards":{},"viewQueries":[{"selectors":[{"value":"dropdownMenu"}],"first":true,"descendants":true,"propertyName":"dropdownMenu","read":null}],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*"],"encapsulation":2},"componentViewType":{"__symbol":10,"members":[]},"rendererType":{"__symbol":11,"members":[]},"componentFactory":{"__symbol":12,"members":[]}}}],"symbols":[{"__symbol":0,"name":"ComboBox","filePath":"./combobox.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"HostBinding","filePath":"@angular/core"},{"__symbol":3,"name":"Output","filePath":"@angular/core"},{"__symbol":4,"name":"ContentChild","filePath":"@angular/core"},{"__symbol":5,"name":"AbstractDropdownView","filePath":"../dropdown/abstract-dropdown-view.class"},{"__symbol":6,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":7,"name":"ElementRef","filePath":"@angular/core"},{"__symbol":8,"name":"HostListener","filePath":"@angular/core"},{"__symbol":9,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":10,"name":"View_ComboBox_0","filePath":"./combobox.component.ngfactory"},{"__symbol":11,"name":"RenderType_ComboBox","filePath":"./combobox.component.ngfactory"},{"__symbol":12,"name":"ComboBoxNgFactory","filePath":"./combobox.component.ngfactory"}]}
+{"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"helperText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["attr.aria-disabled"]},{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"submit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":[{"__symbol":5,"members":[]}]}]}],"dropdownMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["dropdownMenu"]}]}],"hostClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["class.bx--list-box__wrapper"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["attr.role"]}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["style.display"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":7,"members":[]}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":8,"members":[]},"arguments":["keydown",["$event"]]}]}],"_noop":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"updatePills":[{"__symbolic":"method"}],"clearSelected":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"onSearch":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"isTemplate":[{"__symbolic":"method"}],"updateSelected":[{"__symbolic":"method"}]},"statics":{"comboBoxCount":0}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":7,"members":[]}}}}],"lifecycleHooks":[3,4,6]},"isComponent":true,"selector":"ibm-combo-box","exportAs":null,"inputs":{"id":"id","items":"items","placeholder":"placeholder","type":"type","size":"size","label":"label","helperText":"helperText","disabled":"disabled"},"outputs":{"selected":"selected","submit":"submit","close":"close"},"hostListeners":{"keydown":"hostkeys($event)"},"hostProperties":{"attr.aria-disabled":"disabled","class.bx--list-box__wrapper":"hostClass","attr.role":"role","style.display":"display"},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":9,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":0,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":5,"members":[]}}}],"first":true,"descendants":true,"propertyName":"view","read":null}],"guards":{},"viewQueries":[{"selectors":[{"value":"dropdownMenu"}],"first":true,"descendants":true,"propertyName":"dropdownMenu","read":null}],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*"],"encapsulation":2},"componentViewType":{"__symbol":10,"members":[]},"rendererType":{"__symbol":11,"members":[]},"componentFactory":{"__symbol":12,"members":[]}}}],"symbols":[{"__symbol":0,"name":"ComboBox","filePath":"./combobox.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"HostBinding","filePath":"@angular/core"},{"__symbol":3,"name":"Output","filePath":"@angular/core"},{"__symbol":4,"name":"ContentChild","filePath":"@angular/core"},{"__symbol":5,"name":"AbstractDropdownView","filePath":"../dropdown/abstract-dropdown-view.class"},{"__symbol":6,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":7,"name":"ElementRef","filePath":"@angular/core"},{"__symbol":8,"name":"HostListener","filePath":"@angular/core"},{"__symbol":9,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":10,"name":"View_ComboBox_0","filePath":"./combobox.component.ngfactory"},{"__symbol":11,"name":"RenderType_ComboBox","filePath":"./combobox.component.ngfactory"},{"__symbol":12,"name":"ComboBoxNgFactory","filePath":"./combobox.component.ngfactory"}]}

package/combobox/combobox.module.ngfactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.module.ngfactory.js","sourceRoot":"","sources":["../src/combobox/combobox.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './combobox.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from '../dropdown/dropdown.component';\nimport * as i4 from '../dropdown/list/dropdown-list.component';\nimport * as i5 from '../dropdown/scrollable-list.directive';\nimport * as i6 from '@carbon/icons-angular/lib/chevron--down/16';\nimport * as i7 from '@carbon/icons-angular/lib/close/16';\nimport * as i8 from './combobox.component';\nimport * as i9 from '../dropdown/dropdown.module';\nexport const ComboBoxModuleNgFactory:i0.NgModuleFactory<i1.ComboBoxModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Dropdown = (<any>(null as any));\nvar _decl0_12:i4.DropdownList = (<any>(null as any));\nvar _decl0_13:i5.ScrollableList = (<any>(null as any));\nvar _decl0_14:i6.ChevronDown16 = (<any>(null as any));\nvar _decl0_15:i6.ChevronDown16Directive = (<any>(null as any));\nvar _decl0_16:i7.Close16 = (<any>(null as any));\nvar _decl0_17:i7.Close16Directive = (<any>(null as any));\nvar _decl0_18:i8.ComboBox = (<any>(null as any));\nvar _decl0_19:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_20:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_21:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_22:i2.JsonPipe = (<any>(null as any));\nvar _decl0_23:i2.SlicePipe = (<any>(null as any));\nvar _decl0_24:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_25:i2.PercentPipe = (<any>(null as any));\nvar _decl0_26:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_27:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_28:i2.DatePipe = (<any>(null as any));\nvar _decl0_29:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_30:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_31:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_32:i2.CommonModule = (<any>(null as any));\nvar _decl0_36:i9.DropdownModule = (<any>(null as any));\nvar _decl0_34:i6.ChevronDown16Module = (<any>(null as any));\nvar _decl0_35:i7.Close16Module = (<any>(null as any));\nvar _decl0_37:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_38:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_ComboBox_Host_1_0():void {\n  var _any:any = (null as any);\n}\nfunction _View_ComboBox_1_0():void {\n  var _any:any = (null as any);\n  const currVal_0:any = _decl0_18.open;\n  currVal_0;\n  const currVal_1:any = ((_decl0_18.type === 'multi') && (_decl0_18.pills.length > 0));\n  currVal_1;\n  const currVal_2:any = _decl0_18.disabled;\n  currVal_2;\n  const currVal_3:any = _decl0_18.selectedValue;\n  currVal_3;\n  const currVal_4:any = _decl0_18.placeholder;\n  currVal_4;\n  const currVal_5:any = 'bx--list-box__menu-icon';\n  currVal_5;\n  const currVal_6:any = (<any>{'bx--list-box__menu-icon--open':_decl0_18.open});\n  currVal_6;\n  const currVal_7:any = 'Close menu';\n  currVal_7;\n  const currVal_8:any = _decl0_18.open;\n  currVal_8;\n  const pd_9:any = ((<any>_decl0_18.toggleDropdown()) !== false);\n  const pd_10:any = ((<any>_decl0_18.onSearch(_any.target.value)) !== false);\n}\n"]}
+{"version":3,"file":"combobox.module.ngfactory.js","sourceRoot":"","sources":["../src/combobox/combobox.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './combobox.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from '../dropdown/dropdown.component';\nimport * as i4 from '../dropdown/list/dropdown-list.component';\nimport * as i5 from '../dropdown/scrollable-list.directive';\nimport * as i6 from '@carbon/icons-angular/lib/chevron--down/16';\nimport * as i7 from '@carbon/icons-angular/lib/close/16';\nimport * as i8 from './combobox.component';\nimport * as i9 from '../dropdown/dropdown.module';\nexport const ComboBoxModuleNgFactory:i0.NgModuleFactory<i1.ComboBoxModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Dropdown = (<any>(null as any));\nvar _decl0_12:i4.DropdownList = (<any>(null as any));\nvar _decl0_13:i5.ScrollableList = (<any>(null as any));\nvar _decl0_14:i6.ChevronDown16 = (<any>(null as any));\nvar _decl0_15:i6.ChevronDown16Directive = (<any>(null as any));\nvar _decl0_16:i7.Close16 = (<any>(null as any));\nvar _decl0_17:i7.Close16Directive = (<any>(null as any));\nvar _decl0_18:i8.ComboBox = (<any>(null as any));\nvar _decl0_19:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_20:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_21:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_22:i2.JsonPipe = (<any>(null as any));\nvar _decl0_23:i2.SlicePipe = (<any>(null as any));\nvar _decl0_24:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_25:i2.PercentPipe = (<any>(null as any));\nvar _decl0_26:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_27:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_28:i2.DatePipe = (<any>(null as any));\nvar _decl0_29:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_30:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_31:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_32:i2.CommonModule = (<any>(null as any));\nvar _decl0_36:i9.DropdownModule = (<any>(null as any));\nvar _decl0_34:i6.ChevronDown16Module = (<any>(null as any));\nvar _decl0_35:i7.Close16Module = (<any>(null as any));\nvar _decl0_37:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_38:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_ComboBox_Host_1_0():void {\n  var _any:any = (null as any);\n}\nfunction _View_ComboBox_1_0():void {\n  var _any:any = (null as any);\n  const currVal_0:any = _decl0_18.id;\n  currVal_0;\n  const currVal_1:any = !_decl0_18.isTemplate(_decl0_18.label);\n  currVal_1;\n  const currVal_2:any = _decl0_18.isTemplate(_decl0_18.label);\n  currVal_2;\n  const currVal_3:any = _decl0_18.helperText;\n  currVal_3;\n  const currVal_4:any = 'bx--combo-box bx--list-box';\n  currVal_4;\n  const currVal_5:any = (<any>{'bx--multi-select':(_decl0_18.type === 'multi')});\n  currVal_5;\n  const currVal_6:any = _decl0_18.open;\n  currVal_6;\n  const currVal_7:any = ((_decl0_18.type === 'multi') && (_decl0_18.pills.length > 0));\n  currVal_7;\n  const currVal_8:any = _decl0_18.id;\n  currVal_8;\n  const currVal_9:any = _decl0_18.disabled;\n  currVal_9;\n  const currVal_10:any = _decl0_18.selectedValue;\n  currVal_10;\n  const currVal_11:any = _decl0_18.placeholder;\n  currVal_11;\n  const currVal_12:any = 'bx--list-box__menu-icon';\n  currVal_12;\n  const currVal_13:any = (<any>{'bx--list-box__menu-icon--open':_decl0_18.open});\n  currVal_13;\n  const currVal_14:any = 'Close menu';\n  currVal_14;\n  const currVal_15:any = _decl0_18.open;\n  currVal_15;\n  const pd_16:any = ((<any>_decl0_18.toggleDropdown()) !== false);\n  const pd_17:any = ((<any>_decl0_18.onSearch(_any.target.value)) !== false);\n}\n"]}

package/content-switcher/content-switcher.component.d.ts

@@ -46,6 +46,7 @@ export declare class ContentSwitcher implements AfterViewInit {
      * aria-label for the content switcher. Should be set to something descriptive
      */
     label: string;
+    ariaLabel: string;
     /**
      * Emits the activated `ContentSwitcherOption`
      */

package/content-switcher/content-switcher.component.js

@@ -44,15 +44,27 @@ import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
 var ContentSwitcher = /** @class */ (function () {
     function ContentSwitcher(elementRef) {
         this.elementRef = elementRef;
-        /**
-         * aria-label for the content switcher. Should be set to something descriptive
-         */
-        this.label = "content switcher";
+        this.ariaLabel = "content switcher";
         /**
          * Emits the activated `ContentSwitcherOption`
          */
         this.selected = new EventEmitter();
     }
+    Object.defineProperty(ContentSwitcher.prototype, "label", {
+        get: function () {
+            console.warn("`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.");
+            return this.ariaLabel;
+        },
+        /**
+         * aria-label for the content switcher. Should be set to something descriptive
+         */
+        set: function (value) {
+            console.warn("`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.");
+            this.ariaLabel = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     ContentSwitcher.prototype.ngAfterViewInit = function () {
         var _this = this;
         var firstActive = this.options.find(function (option) { return option.active; });
@@ -111,7 +123,7 @@ var ContentSwitcher = /** @class */ (function () {
     ContentSwitcher.decorators = [
         { type: Component, args: [{
                     selector: "ibm-content-switcher",
-                    template: "\n\t\t<div\n\t\t\t[attr.aria-label]=\"label\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"
+                    template: "\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"
                 },] },
     ];
     /** @nocollapse */
@@ -120,6 +132,7 @@ var ContentSwitcher = /** @class */ (function () {
     ]; };
     ContentSwitcher.propDecorators = {
         label: [{ type: Input }],
+        ariaLabel: [{ type: Input }],
         selected: [{ type: Output }],
         options: [{ type: ContentChildren, args: [ContentSwitcherOption,] }],
         hostkeys: [{ type: HostListener, args: ["keydown", ["$event"],] }]

package/content-switcher/content-switcher.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher.component.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tHostListener,\n\tElementRef\n} from \"@angular/core\";\nimport { ContentSwitcherOption } from \"./content-switcher-option.directive\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"./../common/tab.service\";\n\n/**\n * The content switcher can be used for toggling between distinct options.\n * Similar to tabs, but without an associated content panel\n *\n * [See demo](../../?path=/story/content-switcher--basic)\n *\n * ```html\n * <ibm-content-switcher (selected)=\"selected($event)\">\n *\t\t<button ibmContentOption>First section</button>\n *\t\t<button ibmContentOption>Second section</button>\n *\t\t<button ibmContentOption>Third section</button>\n *\t</ibm-content-switcher>\n *\t```\n *\n * <example-url>../../iframe.html?id=content-switcher--basic</example-url>\n *\n * @export\n * @class ContentSwitcher\n * @implements {AfterViewInit}\n */\n@Component({\n\tselector: \"ibm-content-switcher\",\n\ttemplate: `\n\t\t<div\n\t\t\t[attr.aria-label]=\"label\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`\n})\nexport class ContentSwitcher implements AfterViewInit {\n\t/**\n\t * aria-label for the content switcher. Should be set to something descriptive\n\t */\n\t@Input() label = \"content switcher\";\n\n\t/**\n\t * Emits the activated `ContentSwitcherOption`\n\t */\n\t@Output() selected = new EventEmitter();\n\n\t@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tconst firstActive = this.options.find(option => option.active);\n\t\t// delay setting active until the DOM has settled\n\t\tif (!firstActive) {\n\t\t\tsetTimeout(() => this.options.first.active = true);\n\t\t}\n\t\t// subscribe to each item, emit when one is selected, and reset the active states\n\t\tthis.options.forEach(option => {\n\t\t\toption.selected.subscribe(_ => {\n\t\t\t\tconst active = option;\n\t\t\t\tthis.options.forEach(option => {\n\t\t\t\t\tif (option !== active) {\n\t\t\t\t\t\toption.active = false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tthis.selected.emit(active);\n\t\t\t});\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tconst buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(\"[ibmContentOption]\"));\n\n\t\tswitch (event.key) {\n\t\t\tcase \"Right\": // IE specific value\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInLastItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index + 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[0].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Left\": // IE specific value\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInFirstItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[0].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\tbreak;\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"content-switcher.component.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tHostListener,\n\tElementRef\n} from \"@angular/core\";\nimport { ContentSwitcherOption } from \"./content-switcher-option.directive\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"./../common/tab.service\";\n\n/**\n * The content switcher can be used for toggling between distinct options.\n * Similar to tabs, but without an associated content panel\n *\n * [See demo](../../?path=/story/content-switcher--basic)\n *\n * ```html\n * <ibm-content-switcher (selected)=\"selected($event)\">\n *\t\t<button ibmContentOption>First section</button>\n *\t\t<button ibmContentOption>Second section</button>\n *\t\t<button ibmContentOption>Third section</button>\n *\t</ibm-content-switcher>\n *\t```\n *\n * <example-url>../../iframe.html?id=content-switcher--basic</example-url>\n *\n * @export\n * @class ContentSwitcher\n * @implements {AfterViewInit}\n */\n@Component({\n\tselector: \"ibm-content-switcher\",\n\ttemplate: `\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`\n})\nexport class ContentSwitcher implements AfterViewInit {\n\t/**\n\t * aria-label for the content switcher. Should be set to something descriptive\n\t */\n\t@Input() set label(value: string) {\n\t\tconsole.warn(\"`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.\");\n\t\tthis.ariaLabel = value;\n\t}\n\n\tget label(): string {\n\t\tconsole.warn(\"`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.\");\n\t\treturn this.ariaLabel;\n\t}\n\n\t@Input() ariaLabel = \"content switcher\";\n\n\t/**\n\t * Emits the activated `ContentSwitcherOption`\n\t */\n\t@Output() selected = new EventEmitter();\n\n\t@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tconst firstActive = this.options.find(option => option.active);\n\t\t// delay setting active until the DOM has settled\n\t\tif (!firstActive) {\n\t\t\tsetTimeout(() => this.options.first.active = true);\n\t\t}\n\t\t// subscribe to each item, emit when one is selected, and reset the active states\n\t\tthis.options.forEach(option => {\n\t\t\toption.selected.subscribe(_ => {\n\t\t\t\tconst active = option;\n\t\t\t\tthis.options.forEach(option => {\n\t\t\t\t\tif (option !== active) {\n\t\t\t\t\t\toption.active = false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tthis.selected.emit(active);\n\t\t\t});\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tconst buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(\"[ibmContentOption]\"));\n\n\t\tswitch (event.key) {\n\t\t\tcase \"Right\": // IE specific value\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInLastItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index + 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[0].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Left\": // IE specific value\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInFirstItem(event, buttonList))  {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[0].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\tbreak;\n\t\t}\n\t}\n}\n"]}

package/content-switcher/content-switcher.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ContentSwitcher":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"ibm-content-switcher","template":"\n\t\t<div\n\t\t\t[attr.aria-label]=\"label\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":2}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":2}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":56,"character":2},"arguments":[{"__symbolic":"reference","module":"./content-switcher-option.directive","name":"ContentSwitcherOption","line":56,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":58,"character":35}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":80,"character":2},"arguments":["keydown",["$event"]]}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ContentSwitcher":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"ibm-content-switcher","template":"\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":2}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":2}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":2}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":66,"character":2},"arguments":[{"__symbolic":"reference","module":"./content-switcher-option.directive","name":"ContentSwitcherOption","line":66,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":68,"character":35}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":90,"character":2},"arguments":["keydown",["$event"]]}]}]}}}}]

package/content-switcher/content-switcher.component.ngfactory.js

@@ -29,11 +29,11 @@ import * as i1 from "./content-switcher.component";
 var styles_ContentSwitcher = [];
 var RenderType_ContentSwitcher = i0.ɵcrt({ encapsulation: 2, styles: styles_ContentSwitcher, data: {} });
 export { RenderType_ContentSwitcher as RenderType_ContentSwitcher };
-export function View_ContentSwitcher_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "div", [["class", "bx--content-switcher"], ["role", "tablist"]], [[1, "aria-label", 0]], null, null, null, null)), i0.ɵncd(null, 0)], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 0, 0, currVal_0); }); }
+export function View_ContentSwitcher_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "div", [["class", "bx--content-switcher"], ["role", "tablist"]], [[1, "aria-label", 0]], null, null, null, null)), i0.ɵncd(null, 0)], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.ariaLabel; _ck(_v, 0, 0, currVal_0); }); }
 export function View_ContentSwitcher_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-content-switcher", [], null, [[null, "keydown"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
         var pd_0 = (i0.ɵnov(_v, 1).hostkeys($event) !== false);
         ad = (pd_0 && ad);
     } return ad; }, View_ContentSwitcher_0, RenderType_ContentSwitcher)), i0.ɵdid(1, 4243456, null, 1, i1.ContentSwitcher, [i0.ElementRef], null, null), i0.ɵqud(603979776, 1, { options: 1 })], null, null); }
-var ContentSwitcherNgFactory = i0.ɵccf("ibm-content-switcher", i1.ContentSwitcher, View_ContentSwitcher_Host_0, { label: "label" }, { selected: "selected" }, ["*"]);
+var ContentSwitcherNgFactory = i0.ɵccf("ibm-content-switcher", i1.ContentSwitcher, View_ContentSwitcher_Host_0, { label: "label", ariaLabel: "ariaLabel" }, { selected: "selected" }, ["*"]);
 export { ContentSwitcherNgFactory as ContentSwitcherNgFactory };
 //# sourceMappingURL=content-switcher.component.ngfactory.js.map

package/content-switcher/content-switcher.component.ngfactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher.component.ngfactory.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher.component.ngfactory.ts","../src/content-switcher/content-switcher.component.ts.ContentSwitcher.html"],"names":[],"mappings":";;;;;;;;;;;iECCE,oJAGgB,IACf,eAAY,uDAHZ,mBAAyB,QAD1B,YAGgB,EAFf,SAAyB","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<div\n\t\t\t[attr.aria-label]=\"label\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"]}
+{"version":3,"file":"content-switcher.component.ngfactory.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher.component.ngfactory.ts","../src/content-switcher/content-switcher.component.ts.ContentSwitcher.html"],"names":[],"mappings":";;;;;;;;;;;iECCE,oJAGgB,IACf,eAAY,uDAHZ,mBAA6B,YAD9B,YAGgB,EAFf,SAA6B","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"]}

package/content-switcher/content-switcher.component.ngsummary.json

@@ -1 +1 @@
-{"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":[{"__symbol":4,"members":[]}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":5,"members":[]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["keydown",["$event"]]}]}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":5,"members":[]}}}}],"lifecycleHooks":[6]},"isComponent":true,"selector":"ibm-content-switcher","exportAs":null,"inputs":{"label":"label"},"outputs":{"selected":"selected"},"hostListeners":{"keydown":"hostkeys($event)"},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":4,"members":[]}}}],"first":false,"descendants":false,"propertyName":"options","read":null}],"guards":{},"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*"],"encapsulation":2},"componentViewType":{"__symbol":7,"members":[]},"rendererType":{"__symbol":8,"members":[]},"componentFactory":{"__symbol":9,"members":[]}}}],"symbols":[{"__symbol":0,"name":"ContentSwitcher","filePath":"./content-switcher.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"Output","filePath":"@angular/core"},{"__symbol":3,"name":"ContentChildren","filePath":"@angular/core"},{"__symbol":4,"name":"ContentSwitcherOption","filePath":"./content-switcher-option.directive"},{"__symbol":5,"name":"ElementRef","filePath":"@angular/core"},{"__symbol":6,"name":"HostListener","filePath":"@angular/core"},{"__symbol":7,"name":"View_ContentSwitcher_0","filePath":"./content-switcher.component.ngfactory"},{"__symbol":8,"name":"RenderType_ContentSwitcher","filePath":"./content-switcher.component.ngfactory"},{"__symbol":9,"name":"ContentSwitcherNgFactory","filePath":"./content-switcher.component.ngfactory"}]}
+{"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":[{"__symbol":4,"members":[]}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":5,"members":[]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["keydown",["$event"]]}]}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":5,"members":[]}}}}],"lifecycleHooks":[6]},"isComponent":true,"selector":"ibm-content-switcher","exportAs":null,"inputs":{"label":"label","ariaLabel":"ariaLabel"},"outputs":{"selected":"selected"},"hostListeners":{"keydown":"hostkeys($event)"},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":4,"members":[]}}}],"first":false,"descendants":false,"propertyName":"options","read":null}],"guards":{},"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*"],"encapsulation":2},"componentViewType":{"__symbol":7,"members":[]},"rendererType":{"__symbol":8,"members":[]},"componentFactory":{"__symbol":9,"members":[]}}}],"symbols":[{"__symbol":0,"name":"ContentSwitcher","filePath":"./content-switcher.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"Output","filePath":"@angular/core"},{"__symbol":3,"name":"ContentChildren","filePath":"@angular/core"},{"__symbol":4,"name":"ContentSwitcherOption","filePath":"./content-switcher-option.directive"},{"__symbol":5,"name":"ElementRef","filePath":"@angular/core"},{"__symbol":6,"name":"HostListener","filePath":"@angular/core"},{"__symbol":7,"name":"View_ContentSwitcher_0","filePath":"./content-switcher.component.ngfactory"},{"__symbol":8,"name":"RenderType_ContentSwitcher","filePath":"./content-switcher.component.ngfactory"},{"__symbol":9,"name":"ContentSwitcherNgFactory","filePath":"./content-switcher.component.ngfactory"}]}

package/content-switcher/content-switcher.module.ngfactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher.module.ngfactory.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './content-switcher.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from './content-switcher.component';\nimport * as i4 from './content-switcher-option.directive';\nexport const ContentSwitcherModuleNgFactory:i0.NgModuleFactory<i1.ContentSwitcherModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.ContentSwitcher = (<any>(null as any));\nvar _decl0_12:i4.ContentSwitcherOption = (<any>(null as any));\nvar _decl0_13:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_14:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_15:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_16:i2.JsonPipe = (<any>(null as any));\nvar _decl0_17:i2.SlicePipe = (<any>(null as any));\nvar _decl0_18:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_19:i2.PercentPipe = (<any>(null as any));\nvar _decl0_20:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_21:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_22:i2.DatePipe = (<any>(null as any));\nvar _decl0_23:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_24:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_25:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_26:i2.CommonModule = (<any>(null as any));\nvar _decl0_27:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_28:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_ContentSwitcher_Host_1_0():void {\n  var _any:any = (null as any);\n}\nfunction _View_ContentSwitcher_1_0():void {\n  var _any:any = (null as any);\n  const currVal_0:any = _decl0_11.label;\n  currVal_0;\n}\n"]}
+{"version":3,"file":"content-switcher.module.ngfactory.js","sourceRoot":"","sources":["../src/content-switcher/content-switcher.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './content-switcher.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from './content-switcher.component';\nimport * as i4 from './content-switcher-option.directive';\nexport const ContentSwitcherModuleNgFactory:i0.NgModuleFactory<i1.ContentSwitcherModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.ContentSwitcher = (<any>(null as any));\nvar _decl0_12:i4.ContentSwitcherOption = (<any>(null as any));\nvar _decl0_13:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_14:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_15:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_16:i2.JsonPipe = (<any>(null as any));\nvar _decl0_17:i2.SlicePipe = (<any>(null as any));\nvar _decl0_18:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_19:i2.PercentPipe = (<any>(null as any));\nvar _decl0_20:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_21:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_22:i2.DatePipe = (<any>(null as any));\nvar _decl0_23:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_24:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_25:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_26:i2.CommonModule = (<any>(null as any));\nvar _decl0_27:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_28:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_ContentSwitcher_Host_1_0():void {\n  var _any:any = (null as any);\n}\nfunction _View_ContentSwitcher_1_0():void {\n  var _any:any = (null as any);\n  const currVal_0:any = _decl0_11.ariaLabel;\n  currVal_0;\n}\n"]}

package/datepicker/datepicker.component.d.ts

@@ -42,7 +42,7 @@ export declare class DatePicker implements OnDestroy {
      * For reference: https://flatpickr.js.org/formatting/
      */
     dateFormat: string;
-    label: string;
+    label: string | TemplateRef<any>;
     rangeLabel: string;
     placeholder: string;
     pattern: string;

package/datepicker/datepicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.component.js","sourceRoot":"","sources":["../src/datepicker/datepicker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tTemplateRef\n} from \"@angular/core\";\nimport { FlatpickrOptions } from \"ng2-flatpickr\";\nimport flatpickr from \"flatpickr\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\n\n/**\n * [See demo](../../?path=/story/date-picker--single)\n *\n * <example-url>../../iframe.html?id=date-picker--single</example-url>\n *\n * @export\n * @class DatePicker\n * @implements {OnDestroy}\n */\n@Component({\n\tselector: \"ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"bx--form-item\">\n\t\t<ng2-flatpickr\n\t\t\t[setDate]= \"value\"\n\t\t\t[config]= \"range ? flatpickrOptionsRange : flatpickrOptions\"\n\t\t\t[hideButton]=\"true\">\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div\n\t\t\t\t\tdata-date-picker\n\t\t\t\t\t[attr.data-date-picker-type]= \"range ? 'range' : 'single'\"\n\t\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t\t}\">\n\t\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t\t[label]= \"label\"\n\t\t\t\t\t\t\t[placeholder]= \"placeholder\"\n\t\t\t\t\t\t\t[pattern]= \"pattern\"\n\t\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t\t[type]= \"range ? 'range' : 'single'\"\n\t\t\t\t\t\t\t[hasIcon]= \"range ? false : true\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t\t(valueChange)=\"onInputValueChange($event, 0)\">\n\t\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div *ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t\t[label]= \"rangeLabel\"\n\t\t\t\t\t\t\t[placeholder]= \"placeholder\"\n\t\t\t\t\t\t\t[pattern]= \"pattern\"\n\t\t\t\t\t\t\t[id]= \"id + '-rangeInput'\"\n\t\t\t\t\t\t\t[type]= \"range ? 'range' : 'single'\"\n\t\t\t\t\t\t\t[hasIcon]= \"range ? true : null\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t\t(valueChange)=\"onInputValueChange($event, 1)\">\n\t\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng2-flatpickr>\n\t</div>\n\t`,\n\tstyles: [\n\t\t`.dayContainer {\n\t\t\tjustify-content: initial;\n\t\t}`\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements OnDestroy {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range: boolean;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t@Input() label: string;\n\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() value: Array<any> = [];\n\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() invalid = false;\n\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\tflatpickrOptions: FlatpickrOptions = {\n\t\tdateFormat: this.dateFormat,\n\t\tallowInput: true,\n\t\tonChange: (selectedValue: any) => { this.doSelect(selectedValue); },\n\t\tonOpen: () => { this.updateClassNames(); },\n\t\tvalue: this.value\n\t};\n\n\tflatpickrOptionsRange: FlatpickrOptions = {\n\t\tdateFormat: this.dateFormat,\n\t\t\"plugins\": [rangePlugin({ input: \"#\" + this.id + \"-rangeInput\"})],\n\t\tallowInput: true,\n\t\tonChange: (selectedValue: any) => { this.doSelect(selectedValue); },\n\t\tonOpen: () => { this.updateClassNames(); },\n\t\tvalue: this.value\n\t};\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tdoSelect(selectedValue) {\n\t\tthis.valueChange.emit(selectedValue);\n\t}\n\n\tupdateClassNames() {\n\t\tconst ng2FlatPickrElement = this.elementRef.nativeElement.querySelector(\".ng2-flatpickr-input-container\");\n\t\tng2FlatPickrElement._flatpickr._positionCalendar();\n\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"bx--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"bx--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"bx--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tonInputValueChange(event: string, index: number): void {\n\t\tconst eventDate = flatpickr.parseDate(event, this.dateFormat, true);\n\t\tconst previousDate = flatpickr.parseDate(this.value[index], this.dateFormat, true);\n\t\tif (eventDate) {\n\t\t\tif (!previousDate || previousDate.getTime() !== eventDate.getTime()) {\n\t\t\t\tthis.value = [...this.value];\n\t\t\t\tthis.value[index] = eventDate;\n\t\t\t}\n\t\t} else {\n\t\t\tif (previousDate || event) {\n\t\t\t\tthis.value = [...this.value];\n\t\t\t\tthis.value[index] = undefined;\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\t// clean up our flatpickr element - needed because the wrapper doesn't handle this\n\t\tconst ng2FlatPickrElement = this.elementRef.nativeElement.querySelector(\".ng2-flatpickr-input-container\");\n\t\tng2FlatPickrElement._flatpickr.destroy();\n\t}\n}\n"]}
+{"version":3,"file":"datepicker.component.js","sourceRoot":"","sources":["../src/datepicker/datepicker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tTemplateRef\n} from \"@angular/core\";\nimport { FlatpickrOptions } from \"ng2-flatpickr\";\nimport flatpickr from \"flatpickr\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\n\n/**\n * [See demo](../../?path=/story/date-picker--single)\n *\n * <example-url>../../iframe.html?id=date-picker--single</example-url>\n *\n * @export\n * @class DatePicker\n * @implements {OnDestroy}\n */\n@Component({\n\tselector: \"ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"bx--form-item\">\n\t\t<ng2-flatpickr\n\t\t\t[setDate]= \"value\"\n\t\t\t[config]= \"range ? flatpickrOptionsRange : flatpickrOptions\"\n\t\t\t[hideButton]=\"true\">\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div\n\t\t\t\t\tdata-date-picker\n\t\t\t\t\t[attr.data-date-picker-type]= \"range ? 'range' : 'single'\"\n\t\t\t\t\tclass=\"bx--date-picker\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--date-picker--range' : range,\n\t\t\t\t\t\t'bx--date-picker--single' : !range,\n\t\t\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t\t\t}\">\n\t\t\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t\t[label]= \"label\"\n\t\t\t\t\t\t\t[placeholder]= \"placeholder\"\n\t\t\t\t\t\t\t[pattern]= \"pattern\"\n\t\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t\t[type]= \"range ? 'range' : 'single'\"\n\t\t\t\t\t\t\t[hasIcon]= \"range ? false : true\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t\t(valueChange)=\"onInputValueChange($event, 0)\">\n\t\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div *ngIf=\"range\" class=\"bx--date-picker-container\">\n\t\t\t\t\t\t<ibm-date-picker-input\n\t\t\t\t\t\t\t[label]= \"rangeLabel\"\n\t\t\t\t\t\t\t[placeholder]= \"placeholder\"\n\t\t\t\t\t\t\t[pattern]= \"pattern\"\n\t\t\t\t\t\t\t[id]= \"id + '-rangeInput'\"\n\t\t\t\t\t\t\t[type]= \"range ? 'range' : 'single'\"\n\t\t\t\t\t\t\t[hasIcon]= \"range ? true : null\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t\t(valueChange)=\"onInputValueChange($event, 1)\">\n\t\t\t\t\t\t</ibm-date-picker-input>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng2-flatpickr>\n\t</div>\n\t`,\n\tstyles: [\n\t\t`.dayContainer {\n\t\t\tjustify-content: initial;\n\t\t}`\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements OnDestroy {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range: boolean;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t@Input() label: string  | TemplateRef<any>;\n\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() value: Array<any> = [];\n\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() invalid = false;\n\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\tflatpickrOptions: FlatpickrOptions = {\n\t\tdateFormat: this.dateFormat,\n\t\tallowInput: true,\n\t\tonChange: (selectedValue: any) => { this.doSelect(selectedValue); },\n\t\tonOpen: () => { this.updateClassNames(); },\n\t\tvalue: this.value\n\t};\n\n\tflatpickrOptionsRange: FlatpickrOptions = {\n\t\tdateFormat: this.dateFormat,\n\t\t\"plugins\": [rangePlugin({ input: \"#\" + this.id + \"-rangeInput\"})],\n\t\tallowInput: true,\n\t\tonChange: (selectedValue: any) => { this.doSelect(selectedValue); },\n\t\tonOpen: () => { this.updateClassNames(); },\n\t\tvalue: this.value\n\t};\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tdoSelect(selectedValue) {\n\t\tthis.valueChange.emit(selectedValue);\n\t}\n\n\tupdateClassNames() {\n\t\tconst ng2FlatPickrElement = this.elementRef.nativeElement.querySelector(\".ng2-flatpickr-input-container\");\n\t\tng2FlatPickrElement._flatpickr._positionCalendar();\n\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"bx--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"bx--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"bx--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"bx--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tonInputValueChange(event: string, index: number): void {\n\t\tconst eventDate = flatpickr.parseDate(event, this.dateFormat, true);\n\t\tconst previousDate = flatpickr.parseDate(this.value[index], this.dateFormat, true);\n\t\tif (eventDate) {\n\t\t\tif (!previousDate || previousDate.getTime() !== eventDate.getTime()) {\n\t\t\t\tthis.value = [...this.value];\n\t\t\t\tthis.value[index] = eventDate;\n\t\t\t}\n\t\t} else {\n\t\t\tif (previousDate || event) {\n\t\t\t\tthis.value = [...this.value];\n\t\t\t\tthis.value[index] = undefined;\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\t// clean up our flatpickr element - needed because the wrapper doesn't handle this\n\t\tconst ng2FlatPickrElement = this.elementRef.nativeElement.querySelector(\".ng2-flatpickr-input-container\");\n\t\tng2FlatPickrElement._flatpickr.destroy();\n\t}\n}\n"]}

package/datepicker-input/datepicker-input.component.d.ts

@@ -28,7 +28,7 @@ export declare class DatePickerInput {
     type: "simple" | "single" | "range";
     id: string;
     hasIcon: boolean;
-    label: string;
+    label: string | TemplateRef<any>;
     placeholder: string;
     pattern: string;
     valueChange: EventEmitter<string>;
@@ -37,5 +37,5 @@ export declare class DatePickerInput {
     invalid: boolean;
     invalidText: string | TemplateRef<any>;
     skeleton: boolean;
-    protected isTemplate(value: any): boolean;
+    isTemplate(value: any): boolean;
 }

package/datepicker-input/datepicker-input.component.js

@@ -43,7 +43,7 @@ var DatePickerInput = /** @class */ (function () {
     DatePickerInput.decorators = [
         { type: Component, args: [{
                     selector: "ibm-date-picker-input",
-                    template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t{{label}}\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"
+                    template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"
                 },] },
     ];
     DatePickerInput.propDecorators = {

package/datepicker-input/datepicker-input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-input.component.js","sourceRoot":"","sources":["../src/datepicker-input/datepicker-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,MAAM,eAAe,CAAC;AAEvB;IAAA;QAqDC;;;WAGG;QACM,SAAI,GAAkC,QAAQ,CAAC;QAE/C,OAAE,GAAG,gBAAc,eAAe,CAAC,eAAe,EAAI,CAAC;QAEvD,YAAO,GAAG,KAAK,CAAC;QAIhB,gBAAW,GAAG,YAAY,CAAC;QAE3B,YAAO,GAAG,0BAA0B,CAAC;QAEpC,gBAAW,GAAyB,IAAI,YAAY,EAAE,CAAC;QAExD,UAAK,GAAqB,MAAM,CAAC;QAEjC,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,KAAK,CAAC;QAIhB,aAAQ,GAAG,KAAK,CAAC;IAK3B,CAAC;IAHU,oCAAU,GAApB,UAAqB,KAAK;QACzB,OAAO,KAAK,YAAY,WAAW,CAAC;IACrC,CAAC;IAhCc,+BAAe,GAAG,CAAC,CAAC;;gBAnDnC,SAAS,SAAC;oBACV,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE,4qDA8CT;iBACD;;;uBAQC,KAAK;qBAEL,KAAK;0BAEL,KAAK;wBAEL,KAAK;8BAEL,KAAK;0BAEL,KAAK;8BAEL,MAAM;wBAEN,KAAK;2BAEL,KAAK;0BAEL,KAAK;8BAEL,KAAK;2BAEL,KAAK;;IAKP,sBAAC;CAAA,AApFD,IAoFC;SAlCY,eAAe","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"ibm-date-picker-input\",\n\ttemplate: `\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t{{label}}\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() invalid = false;\n\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\tprotected isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n"]}
+{"version":3,"file":"datepicker-input.component.js","sourceRoot":"","sources":["../src/datepicker-input/datepicker-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,MAAM,eAAe,CAAC;AAEvB;IAAA;QAsDC;;;WAGG;QACM,SAAI,GAAkC,QAAQ,CAAC;QAE/C,OAAE,GAAG,gBAAc,eAAe,CAAC,eAAe,EAAI,CAAC;QAEvD,YAAO,GAAG,KAAK,CAAC;QAIhB,gBAAW,GAAG,YAAY,CAAC;QAE3B,YAAO,GAAG,0BAA0B,CAAC;QAEpC,gBAAW,GAAyB,IAAI,YAAY,EAAE,CAAC;QAExD,UAAK,GAAqB,MAAM,CAAC;QAEjC,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,KAAK,CAAC;QAIhB,aAAQ,GAAG,KAAK,CAAC;IAK3B,CAAC;IAHO,oCAAU,GAAjB,UAAkB,KAAK;QACtB,OAAO,KAAK,YAAY,WAAW,CAAC;IACrC,CAAC;IAhCc,+BAAe,GAAG,CAAC,CAAC;;gBApDnC,SAAS,SAAC;oBACV,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE,s0DA+CT;iBACD;;;uBAQC,KAAK;qBAEL,KAAK;0BAEL,KAAK;wBAEL,KAAK;8BAEL,KAAK;0BAEL,KAAK;8BAEL,MAAM;wBAEN,KAAK;2BAEL,KAAK;0BAEL,KAAK;8BAEL,KAAK;2BAEL,KAAK;;IAKP,sBAAC;CAAA,AArFD,IAqFC;SAlCY,eAAe","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"ibm-date-picker-input\",\n\ttemplate: `\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef<any>;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() invalid = false;\n\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n"]}

package/datepicker-input/datepicker-input.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DatePickerInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"ibm-date-picker-input","template":"\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t{{label}}\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":2}}]}],"hasIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":2}}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":2}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":2}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":2}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":2}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":2}}]}],"isTemplate":[{"__symbolic":"method"}]},"statics":{"datePickerCount":0}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DatePickerInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"ibm-date-picker-input","template":"\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":2}}]}],"hasIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":2}}]}],"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":2}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":2}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":2}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":2}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":2}}]}],"isTemplate":[{"__symbolic":"method"}]},"statics":{"datePickerCount":0}}}}]

package/datepicker-input/datepicker-input.component.ngfactory.js

@@ -25,24 +25,27 @@
  * tslint:disable
  */ 
 import * as i0 from "@angular/core";
-import * as i1 from "../../../node_modules/@carbon/icons-angular/lib/calendar/16.ngfactory";
-import * as i2 from "@carbon/icons-angular/lib/calendar/16";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "../../../node_modules/@carbon/icons-angular/lib/calendar/16.ngfactory";
+import * as i3 from "@carbon/icons-angular/lib/calendar/16";
 import * as i4 from "./datepicker-input.component";
 var styles_DatePickerInput = [];
 var RenderType_DatePickerInput = i0.ɵcrt({ encapsulation: 2, styles: styles_DatePickerInput, data: {} });
 export { RenderType_DatePickerInput as RenderType_DatePickerInput };
-function View_DatePickerInput_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-calendar16", [["class", "bx--date-picker__icon"], ["data-date-picker-icon", ""], ["data-open", ""]], null, null, null, i1.View_Calendar16_0, i1.RenderType_Calendar16)), i0.ɵdid(1, 49152, null, 0, i2.Calendar16, [], null, null)], null, null); }
-function View_DatePickerInput_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, [["dateInput", 1]], null, 0, "input", [["autocomplete", "off"], ["class", "bx--date-picker__input"], ["data-date-picker-input", ""], ["type", "text"]], [[8, "pattern", 0], [8, "placeholder", 0], [1, "data-input", 0], [8, "id", 0], [8, "disabled", 0], [1, "data-invalid", 0]], [[null, "change"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("change" === en)) {
+function View_DatePickerInput_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }); }
+function View_DatePickerInput_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
+function View_DatePickerInput_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_3)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_DatePickerInput_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-calendar16", [["class", "bx--date-picker__icon"], ["data-date-picker-icon", ""], ["data-open", ""]], null, null, null, i2.View_Calendar16_0, i2.RenderType_Calendar16)), i0.ɵdid(1, 49152, null, 0, i3.Calendar16, [], null, null)], null, null); }
+function View_DatePickerInput_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, [["dateInput", 1]], null, 0, "input", [["autocomplete", "off"], ["class", "bx--date-picker__input"], ["data-date-picker-input", ""], ["type", "text"]], [[8, "pattern", 0], [8, "placeholder", 0], [1, "data-input", 0], [8, "id", 0], [8, "disabled", 0], [1, "data-invalid", 0]], [[null, "change"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("change" === en)) {
         var pd_0 = (_co.valueChange.emit(i0.ɵnov(_v, 0).value) !== false);
         ad = (pd_0 && ad);
     } return ad; }, null, null))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.pattern; var currVal_1 = _co.placeholder; var currVal_2 = (((_co.type == "single") || (_co.type == "range")) ? "" : null); var currVal_3 = _co.id; var currVal_4 = _co.disabled; var currVal_5 = (_co.invalid ? true : null); _ck(_v, 0, 0, currVal_0, currVal_1, currVal_2, currVal_3, currVal_4, currVal_5); }); }
-function View_DatePickerInput_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }); }
-function View_DatePickerInput_6(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
-function View_DatePickerInput_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_6)), i0.ɵdid(1, 540672, null, 0, i3.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }, null); }
-function View_DatePickerInput_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 4, "div", [["class", "bx--form-requirement"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_4)), i0.ɵdid(2, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_5)), i0.ɵdid(4, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.isTemplate(_co.invalidText); _ck(_v, 2, 0, currVal_0); var currVal_1 = _co.isTemplate(_co.invalidText); _ck(_v, 4, 0, currVal_1); }, null); }
-function View_DatePickerInput_7(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-calendar16", [["class", "bx--date-picker__icon"], ["data-date-picker-icon", ""], ["data-open", ""]], null, null, null, i1.View_Calendar16_0, i1.RenderType_Calendar16)), i0.ɵdid(1, 49152, null, 0, i2.Calendar16, [], null, null)], null, null); }
-export function View_DatePickerInput_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 14, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 13, "div", [["class", "bx--date-picker"]], null, null, null, null, null)), i0.ɵdid(2, 278528, null, 0, i3.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(3, { "bx--date-picker--single": 0, "bx--date-picker--range": 1, "bx--date-picker--light": 2, "bx--skeleton": 3 }), (_l()(), i0.ɵeld(4, 0, null, null, 8, "div", [["class", "bx--date-picker-container"]], null, null, null, null, null)), (_l()(), i0.ɵeld(5, 0, null, null, 1, "label", [["class", "bx--label"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵted(6, null, [" ", " "])), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_1)), i0.ɵdid(8, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_2)), i0.ɵdid(10, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_3)), i0.ɵdid(12, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_7)), i0.ɵdid(14, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = "bx--date-picker"; var currVal_1 = _ck(_v, 3, 0, (_co.type === "single"), (_co.type === "range"), (_co.theme === "light"), _co.skeleton); _ck(_v, 2, 0, currVal_0, currVal_1); var currVal_4 = (_co.type == "single"); _ck(_v, 8, 0, currVal_4); var currVal_5 = !_co.skeleton; _ck(_v, 10, 0, currVal_5); var currVal_6 = _co.invalid; _ck(_v, 12, 0, currVal_6); var currVal_7 = ((_co.type == "range") && _co.hasIcon); _ck(_v, 14, 0, currVal_7); }, function (_ck, _v) { var _co = _v.component; var currVal_2 = _co.id; _ck(_v, 5, 0, currVal_2); var currVal_3 = _co.label; _ck(_v, 6, 0, currVal_3); }); }
+function View_DatePickerInput_7(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }); }
+function View_DatePickerInput_9(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
+function View_DatePickerInput_8(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_9)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_DatePickerInput_6(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 4, "div", [["class", "bx--form-requirement"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_7)), i0.ɵdid(2, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_8)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.isTemplate(_co.invalidText); _ck(_v, 2, 0, currVal_0); var currVal_1 = _co.isTemplate(_co.invalidText); _ck(_v, 4, 0, currVal_1); }, null); }
+function View_DatePickerInput_10(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-calendar16", [["class", "bx--date-picker__icon"], ["data-date-picker-icon", ""], ["data-open", ""]], null, null, null, i2.View_Calendar16_0, i2.RenderType_Calendar16)), i0.ɵdid(1, 49152, null, 0, i3.Calendar16, [], null, null)], null, null); }
+export function View_DatePickerInput_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 17, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 16, "div", [["class", "bx--date-picker"]], null, null, null, null, null)), i0.ɵdid(2, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(3, { "bx--date-picker--single": 0, "bx--date-picker--range": 1, "bx--date-picker--light": 2, "bx--skeleton": 3 }), (_l()(), i0.ɵeld(4, 0, null, null, 11, "div", [["class", "bx--date-picker-container"]], null, null, null, null, null)), (_l()(), i0.ɵeld(5, 0, null, null, 4, "label", [["class", "bx--label"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_1)), i0.ɵdid(7, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_2)), i0.ɵdid(9, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_4)), i0.ɵdid(11, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_5)), i0.ɵdid(13, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_6)), i0.ɵdid(15, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_DatePickerInput_10)), i0.ɵdid(17, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = "bx--date-picker"; var currVal_1 = _ck(_v, 3, 0, (_co.type === "single"), (_co.type === "range"), (_co.theme === "light"), _co.skeleton); _ck(_v, 2, 0, currVal_0, currVal_1); var currVal_3 = !_co.isTemplate(_co.label); _ck(_v, 7, 0, currVal_3); var currVal_4 = _co.isTemplate(_co.label); _ck(_v, 9, 0, currVal_4); var currVal_5 = (_co.type == "single"); _ck(_v, 11, 0, currVal_5); var currVal_6 = !_co.skeleton; _ck(_v, 13, 0, currVal_6); var currVal_7 = _co.invalid; _ck(_v, 15, 0, currVal_7); var currVal_8 = ((_co.type == "range") && _co.hasIcon); _ck(_v, 17, 0, currVal_8); }, function (_ck, _v) { var _co = _v.component; var currVal_2 = _co.id; _ck(_v, 5, 0, currVal_2); }); }
 export function View_DatePickerInput_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-date-picker-input", [], null, null, null, View_DatePickerInput_0, RenderType_DatePickerInput)), i0.ɵdid(1, 49152, null, 0, i4.DatePickerInput, [], null, null)], null, null); }
 var DatePickerInputNgFactory = i0.ɵccf("ibm-date-picker-input", i4.DatePickerInput, View_DatePickerInput_Host_0, { type: "type", id: "id", hasIcon: "hasIcon", label: "label", placeholder: "placeholder", pattern: "pattern", theme: "theme", disabled: "disabled", invalid: "invalid", invalidText: "invalidText", skeleton: "skeleton" }, { valueChange: "valueChange" }, []);
 export { DatePickerInputNgFactory as DatePickerInputNgFactory };