npm - carbon-components-angular - Versions diffs - 3.8.0 → 3.9.3 - Mend

carbon-components-angular 3.8.0 → 3.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (127) hide show

package/checkbox/checkbox.component.d.ts CHANGED Viewed

@@ -86,6 +86,10 @@ export declare class Checkbox implements ControlValueAccessor, AfterViewInit {
      * Set to `true` for a loading checkbox.
      */
     skeleton: boolean;
+    /**
+     * Set to `true` to hide the checkbox labels.
+     */
+    hideLabel: boolean;
     /**
      * Sets the name attribute on the `input` element.
      */

package/checkbox/checkbox.component.js CHANGED Viewed

@@ -77,6 +77,10 @@ var Checkbox = /** @class */ (function () {
          * Set to `true` for a loading checkbox.
          */
         this.skeleton = false;
+        /**
+         * Set to `true` to hide the checkbox labels.
+         */
+        this.hideLabel = false;
         /**
          * The unique id for the checkbox component.
          */
@@ -277,7 +281,7 @@ var Checkbox = /** @class */ (function () {
     Checkbox.decorators = [
         { type: Component, args: [{
                     selector: "ibm-checkbox",
-                    template: "\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t",
+                    template: "\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<span [ngClass]=\"{'bx--visually-hidden' : hideLabel}\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</label>\n\t",
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -298,6 +302,7 @@ var Checkbox = /** @class */ (function () {
         inline: [{ type: Input }],
         disabled: [{ type: Input }],
         skeleton: [{ type: Input }],
+        hideLabel: [{ type: Input }],
         name: [{ type: Input }],
         id: [{ type: Input }],
         required: [{ type: Input }],

package/checkbox/checkbox.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../src/checkbox/checkbox.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tViewChild,\n\tHostBinding\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n\n/*\n Defines the set of states for a checkbox component.\n * @export\n * @enum {number}\n /\nexport enum CheckboxState {\n\tInit,\n\tIndeterminate,\n\tChecked,\n\tUnchecked\n}\n\n/\n Used to emit changes performed on checkbox components.\n * @export\n * @class CheckboxChange\n /\nexport class CheckboxChange {\n\t/\n\t Contains the `Checkbox` that has been changed.\n\t * @type {Checkbox}\n\t * @memberof CheckboxChange\n\t /\n\tsource: Checkbox;\n\t/\n\t The state of the `Checkbox` encompassed in the `CheckboxChange` class.\n\t * @type {boolean}\n\t * @memberof CheckboxChange\n\t /\n\tchecked: boolean;\n}\n\n/\n [See demo](../../?path=/story/checkbox--basic)\n \n <example-url>../../iframe.html?id=checkbox--basic</example-url>\n \n @export\n * @class Checkbox\n * @implements {ControlValueAccessor}\n * @implements {AfterViewInit}\n /\n@Component({\n\tselector: \"ibm-checkbox\",\n\ttemplate: `\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Checkbox,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class Checkbox implements ControlValueAccessor, AfterViewInit {\n\t/\n\t Variable used for creating unique ids for checkbox components.\n\t /\n\tstatic checkboxCount = 0;\n\n\t/\n\t Size of the checkbox.\n\t /\n\t@Input() size: \"sm\" \| \"md\" = \"md\";\n\t/\n\t Set to `true` for checkbox to be rendered with nested styles.\n\t /\n\t@Input() nested: boolean;\n\t/\n\t Set to `true` for checkbox to be rendered without any classes on the host element.\n\t /\n\t@Input() inline = false;\n\t/\n\t Set to `true` for a disabled checkbox.\n\t /\n\t@Input() disabled = false;\n\t/\n\t Set to `true` for a loading checkbox.\n\t /\n\t@Input() skeleton = false;\n\t/\n\t Sets the name attribute on the `input` element.\n\t /\n\t@Input() name: string;\n\t/\n\t The unique id for the checkbox component.\n\t /\n\t@Input() id = `checkbox-${Checkbox.checkboxCount}`;\n\t/\n\t Reflects the required attribute of the `input` element.\n\t /\n\t@Input() required: boolean;\n\t/\n\t Sets the value attribute on the `input` element.\n\t /\n\t@Input() value: string;\n\t/\n\t Used to set the `aria-label` attribute on the input element.\n\t /\n\t// tslint:disable-next-line:no-input-rename\n\t@Input(\"aria-label\") ariaLabel = \"\";\n\t/\n\t Used to set the `aria-labelledby` attribute on the input element.\n\t /\n\t// tslint:disable-next-line:no-input-rename\n\t@Input(\"aria-labelledby\") ariaLabelledby: string;\n\t/\n\t Reflects whether the checkbox state is indeterminate.\n\t * @readonly\n\t /\n\tget indeterminate() {\n\t\treturn this._indeterminate;\n\t}\n\n\t/\n\t Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\t /\n\t@Input() set indeterminate(indeterminate: boolean) {\n\t\tlet changed = this._indeterminate !== indeterminate;\n\t\tthis._indeterminate = indeterminate;\n\n\t\tif (changed) {\n\t\t\tthis.transitionCheckboxState(CheckboxState.Indeterminate);\n\t\t} else {\n\t\t\tthis.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t}\n\n\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t}\n\n\t/\n\t Returns value `true` if state is selected for the checkbox.\n\t * @readonly\n\t /\n\tget checked() {\n\t\treturn this._checked;\n\t}\n\n\t/\n\t Updating the state of a checkbox to match the state of the parameter passed in.\n\t /\n\t@Input() set checked (checked: boolean) {\n\t\tif (checked !== this.checked) {\n\t\t\tif (this._indeterminate) {\n\t\t\t\tPromise.resolve().then(() => {\n\t\t\t\t\tthis._indeterminate = false;\n\t\t\t\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t\t\t\t});\n\t\t\t}\n\t\t\tthis._checked = checked;\n\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t}\n\t}\n\n\t@HostBinding(\"class.bx--checkbox-wrapper\") get checkboxWrapperClass() {\n\t\treturn !this.inline;\n\t}\n\t@HostBinding(\"class.bx--form-item\") get formItemClass() {\n\t\treturn !this.inline;\n\t}\n\n\t/\n\t Emits event notifying other classes when a change in state occurs on a checkbox after a\n\t * click.\n\t /\n\t@Output() change = new EventEmitter<CheckboxChange>();\n\t/\n\t Emits event notifying other classes when a change in state occurs specifically\n\t * on an indeterminate checkbox.\n\t /\n\t@Output() indeterminateChange = new EventEmitter<boolean>();\n\n\t/\n\t Set to `true` if the input checkbox is selected (or checked).\n\t /\n\t_checked = false;\n\t/\n\t Set to `true` if the input checkbox is in state indeterminate.\n\t /\n\t_indeterminate = false;\n\n\tcurrentCheckboxState: CheckboxState = CheckboxState.Init;\n\n\t/\n\t Maintains a reference to the view DOM element of the `Checkbox`.\n\t /\n\t@ViewChild(\"inputCheckbox\") inputCheckbox: ElementRef;\n\n\t/\n\t Creates an instance of `Checkbox`.\n\t * @param {ChangeDetectorRef} changeDetectorRef\n\t * @memberof Checkbox\n\t /\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tCheckbox.checkboxCount++;\n\t}\n\n\t/\n\t Toggle the selected state of the checkbox.\n\t * @memberof Checkbox\n\t /\n\tpublic toggle() {\n\t\tthis.checked = !this.checked;\n\t}\n\n\t// this is the initial value set to the component\n\tpublic writeValue(value: any) {\n\t\tthis.checked = !!value;\n\t}\n\n\t/\n\t Sets a method in order to propagate changes back to the form.\n\t * @param {any} fn\n\t * @memberof Checkbox\n\t /\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/\n\t Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t /\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/\n\t Executes on the event of a change within `Checkbox` to block propagation.\n\t * @param {any} event\n\t * @memberof Checkbox\n\t /\n\tonChange(event) {\n\t\tevent.stopPropagation();\n\t}\n\n\t/\n\t Handles click events on the `Checkbox` and emits changes to other classes.\n\t * @param {any} event\n\t * @memberof Checkbox\n\t /\n\tonClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.toggle();\n\t\t\tthis.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\n\t/\n\t Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n\t * @memberof Checkbox\n\t /\n\tonTouched: () => any = () => {};\n\n\t/\n\t Handles changes between checkbox states.\n\t * @param {CheckboxState} newState\n\t * @returns {null}\n\t * @memberof Checkbox\n\t /\n\ttransitionCheckboxState(newState: CheckboxState) {\n\t\tlet oldState = this.currentCheckboxState;\n\n\t\t// Indeterminate has to be set always if it's transitioned to\n\t\t// checked has to be set before indeterminate or it overrides\n\t\t// indeterminate's dash\n\t\tif (newState === CheckboxState.Indeterminate) {\n\t\t\tthis.checked = false;\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = true;\n\t\t}\n\n\t\tif (oldState === newState) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.currentCheckboxState = newState;\n\t}\n\n\t/\n\t Creates instance of `CheckboxChange` used to propagate the change event.\n\t * @memberof Checkbox\n\t /\n\temitChangeEvent() {\n\t\tlet event = new CheckboxChange();\n\t\tevent.source = this;\n\t\tevent.checked = this.checked;\n\n\t\tthis.propagateChange(this.checked);\n\t\tthis.change.emit(event);\n\t}\n\n\t/\n\t Updates the checkbox if it is in the indeterminate state.\n\t * @memberof Checkbox\n\t /\n\tngAfterViewInit() {\n\t\tif (this.indeterminate) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = true;\n\t\t\tthis.checked = false;\n\t\t}\n\t}\n\n\t/\n\t Method set in `registerOnChange` to propagate changes back to the form.\n\t * @memberof Checkbox\n\t */\n\tpropagateChange = (_: any) => {};\n}\n"]}
1	+ {"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../src/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAwB,MAAM,gBAAgB,CAAC;AAGzE;;;;GAIG;AACH,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACxB,iDAAI,CAAA;IACJ,mEAAa,CAAA;IACb,uDAAO,CAAA;IACP,2DAAS,CAAA;AACV,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAED;;;;GAIG;AACH;IAAA;IAaA,CAAC;IAAD,qBAAC;AAAD,CAAC,AAbD,IAaC;;AAED;;;;;;;;;GASG;AACH;IAiLC;;;;OAIG;IACH,kBAAsB,iBAAoC;QAApC,sBAAiB,GAAjB,iBAAiB,CAAmB;QAzI1D;;WAEG;QACM,SAAI,GAAgB,IAAI,CAAC;QAKlC;;WAEG;QACM,WAAM,GAAG,KAAK,CAAC;QACxB;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,cAAS,GAAG,KAAK,CAAC;QAK3B;;WAEG;QACM,OAAE,GAAG,cAAY,QAAQ,CAAC,aAAe,CAAC;QASnD;;WAEG;QACH,2CAA2C;QACtB,cAAS,GAAG,EAAE,CAAC;QA6DpC;;;WAGG;QACO,WAAM,GAAG,IAAI,YAAY,EAAkB,CAAC;QACtD;;;WAGG;QACO,wBAAmB,GAAG,IAAI,YAAY,EAAW,CAAC;QAE5D;;WAEG;QACH,aAAQ,GAAG,KAAK,CAAC;QACjB;;WAEG;QACH,mBAAc,GAAG,KAAK,CAAC;QAEvB,yBAAoB,GAAkB,aAAa,CAAC,IAAI,CAAC;QAqEzD;;;WAGG;QACH,cAAS,GAAc,cAAO,CAAC,CAAC;QAkDhC;;;WAGG;QACH,oBAAe,GAAG,UAAC,CAAM,IAAM,CAAC,CAAC;QAlHhC,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC;IArFD,sBAAI,mCAAa;QAJjB;;;WAGG;aACH;YACC,OAAO,IAAI,CAAC,cAAc,CAAC;QAC5B,CAAC;QAED;;WAEG;aACH,UAA2B,aAAsB;YAChD,IAAI,OAAO,GAAG,IAAI,CAAC,cAAc,KAAK,aAAa,CAAC;YACpD,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;YAEpC,IAAI,OAAO,EAAE;gBACZ,IAAI,CAAC,uBAAuB,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;aAC1D;iBAAM;gBACN,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;aAC7F;YAED,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACpD,CAAC;;;OAhBA;IAsBD,sBAAI,6BAAO;QAJX;;;WAGG;aACH;YACC,OAAO,IAAI,CAAC,QAAQ,CAAC;QACtB,CAAC;QAED;;WAEG;aACH,UAAsB,OAAgB;YAAtC,iBAWC;YAVA,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE;gBAC7B,IAAI,IAAI,CAAC,cAAc,EAAE;oBACxB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC;wBACtB,KAAI,CAAC,cAAc,GAAG,KAAK,CAAC;wBAC5B,KAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAI,CAAC,cAAc,CAAC,CAAC;oBACpD,CAAC,CAAC,CAAC;iBACH;gBACD,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;gBACxB,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC;aACtC;QACF,CAAC;;;OAhBA;IAkBD,sBAA+C,0CAAoB;aAAnE;YACC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC;;;OAAA;IACD,sBAAwC,mCAAa;aAArD;YACC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC;;;OAAA;IAsCD;;;OAGG;IACI,yBAAM,GAAb;QACC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC9B,CAAC;IAED,iDAAiD;IAC1C,6BAAU,GAAjB,UAAkB,KAAU;QAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC;IACxB,CAAC;IAED;;;;OAIG;IACI,mCAAgB,GAAvB,UAAwB,EAAO;QAC9B,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACI,oCAAiB,GAAxB,UAAyB,EAAO;QAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACH,2BAAQ,GAAR,UAAS,KAAK;QACb,KAAK,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACH,0BAAO,GAAP,UAAQ,KAAK;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAC9F,IAAI,CAAC,eAAe,EAAE,CAAC;SACvB;IACF,CAAC;IASD;;;;;OAKG;IACH,0CAAuB,GAAvB,UAAwB,QAAuB;QAC9C,IAAI,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAEzC,6DAA6D;QAC7D,6DAA6D;QAC7D,uBAAuB;QACvB,IAAI,QAAQ,KAAK,aAAa,CAAC,aAAa,EAAE;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,aAAa,GAAG,IAAI,CAAC;SACtD;QAED,IAAI,QAAQ,KAAK,QAAQ,EAAE;YAC1B,OAAO;SACP;QAED,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC;IACtC,CAAC;IAED;;;OAGG;IACH,kCAAe,GAAf;QACC,IAAI,KAAK,GAAG,IAAI,cAAc,EAAE,CAAC;QACjC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QACpB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,kCAAe,GAAf;QACC,IAAI,IAAI,CAAC,aAAa,EAAE;YACvB,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,aAAa,GAAG,IAAI,CAAC;YACtD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACrB;IACF,CAAC;IA3PD;;OAEG;IACI,sBAAa,GAAG,CAAC,CAAC;;gBA3CzB,SAAS,SAAC;oBACV,QAAQ,EAAE,cAAc;oBACxB,QAAQ,EAAE,kxBA2BT;oBACD,SAAS,EAAE;wBACV;4BACC,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,QAAQ;4BACrB,KAAK,EAAE,IAAI;yBACX;qBACD;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAC/C;;;;gBA5FA,iBAAiB;;;uBAsGhB,KAAK;yBAIL,KAAK;yBAIL,KAAK;2BAIL,KAAK;2BAIL,KAAK;4BAIL,KAAK;uBAIL,KAAK;qBAIL,KAAK;2BAIL,KAAK;wBAIL,KAAK;4BAKL,KAAK,SAAC,YAAY;iCAKlB,KAAK,SAAC,iBAAiB;gCAYvB,KAAK;0BAwBL,KAAK;uCAaL,WAAW,SAAC,4BAA4B;gCAGxC,WAAW,SAAC,qBAAqB;yBAQjC,MAAM;sCAKN,MAAM;gCAgBN,SAAS,SAAC,eAAe;;IA2H3B,eAAC;CAAA,AA1SD,IA0SC;SAnQY,QAAQ","sourcesContent":["import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tViewChild,\n\tHostBinding\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n\n/*\n Defines the set of states for a checkbox component.\n * @export\n * @enum {number}\n /\nexport enum CheckboxState {\n\tInit,\n\tIndeterminate,\n\tChecked,\n\tUnchecked\n}\n\n/\n Used to emit changes performed on checkbox components.\n * @export\n * @class CheckboxChange\n /\nexport class CheckboxChange {\n\t/\n\t Contains the `Checkbox` that has been changed.\n\t * @type {Checkbox}\n\t * @memberof CheckboxChange\n\t /\n\tsource: Checkbox;\n\t/\n\t The state of the `Checkbox` encompassed in the `CheckboxChange` class.\n\t * @type {boolean}\n\t * @memberof CheckboxChange\n\t /\n\tchecked: boolean;\n}\n\n/\n [See demo](../../?path=/story/checkbox--basic)\n \n <example-url>../../iframe.html?id=checkbox--basic</example-url>\n \n @export\n * @class Checkbox\n * @implements {ControlValueAccessor}\n * @implements {AfterViewInit}\n /\n@Component({\n\tselector: \"ibm-checkbox\",\n\ttemplate: `\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<span [ngClass]=\"{'bx--visually-hidden' : hideLabel}\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</label>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Checkbox,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class Checkbox implements ControlValueAccessor, AfterViewInit {\n\t/\n\t Variable used for creating unique ids for checkbox components.\n\t /\n\tstatic checkboxCount = 0;\n\n\t/\n\t Size of the checkbox.\n\t /\n\t@Input() size: \"sm\" \| \"md\" = \"md\";\n\t/\n\t Set to `true` for checkbox to be rendered with nested styles.\n\t /\n\t@Input() nested: boolean;\n\t/\n\t Set to `true` for checkbox to be rendered without any classes on the host element.\n\t /\n\t@Input() inline = false;\n\t/\n\t Set to `true` for a disabled checkbox.\n\t /\n\t@Input() disabled = false;\n\t/\n\t Set to `true` for a loading checkbox.\n\t /\n\t@Input() skeleton = false;\n\t/\n\t Set to `true` to hide the checkbox labels.\n\t /\n\t@Input() hideLabel = false;\n\t/\n\t Sets the name attribute on the `input` element.\n\t /\n\t@Input() name: string;\n\t/\n\t The unique id for the checkbox component.\n\t /\n\t@Input() id = `checkbox-${Checkbox.checkboxCount}`;\n\t/\n\t Reflects the required attribute of the `input` element.\n\t /\n\t@Input() required: boolean;\n\t/\n\t Sets the value attribute on the `input` element.\n\t /\n\t@Input() value: string;\n\t/\n\t Used to set the `aria-label` attribute on the input element.\n\t /\n\t// tslint:disable-next-line:no-input-rename\n\t@Input(\"aria-label\") ariaLabel = \"\";\n\t/\n\t Used to set the `aria-labelledby` attribute on the input element.\n\t /\n\t// tslint:disable-next-line:no-input-rename\n\t@Input(\"aria-labelledby\") ariaLabelledby: string;\n\t/\n\t Reflects whether the checkbox state is indeterminate.\n\t * @readonly\n\t /\n\tget indeterminate() {\n\t\treturn this._indeterminate;\n\t}\n\n\t/\n\t Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\t /\n\t@Input() set indeterminate(indeterminate: boolean) {\n\t\tlet changed = this._indeterminate !== indeterminate;\n\t\tthis._indeterminate = indeterminate;\n\n\t\tif (changed) {\n\t\t\tthis.transitionCheckboxState(CheckboxState.Indeterminate);\n\t\t} else {\n\t\t\tthis.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t}\n\n\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t}\n\n\t/\n\t Returns value `true` if state is selected for the checkbox.\n\t * @readonly\n\t /\n\tget checked() {\n\t\treturn this._checked;\n\t}\n\n\t/\n\t Updating the state of a checkbox to match the state of the parameter passed in.\n\t /\n\t@Input() set checked (checked: boolean) {\n\t\tif (checked !== this.checked) {\n\t\t\tif (this._indeterminate) {\n\t\t\t\tPromise.resolve().then(() => {\n\t\t\t\t\tthis._indeterminate = false;\n\t\t\t\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t\t\t\t});\n\t\t\t}\n\t\t\tthis._checked = checked;\n\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t}\n\t}\n\n\t@HostBinding(\"class.bx--checkbox-wrapper\") get checkboxWrapperClass() {\n\t\treturn !this.inline;\n\t}\n\t@HostBinding(\"class.bx--form-item\") get formItemClass() {\n\t\treturn !this.inline;\n\t}\n\n\t/\n\t Emits event notifying other classes when a change in state occurs on a checkbox after a\n\t * click.\n\t /\n\t@Output() change = new EventEmitter<CheckboxChange>();\n\t/\n\t Emits event notifying other classes when a change in state occurs specifically\n\t * on an indeterminate checkbox.\n\t /\n\t@Output() indeterminateChange = new EventEmitter<boolean>();\n\n\t/\n\t Set to `true` if the input checkbox is selected (or checked).\n\t /\n\t_checked = false;\n\t/\n\t Set to `true` if the input checkbox is in state indeterminate.\n\t /\n\t_indeterminate = false;\n\n\tcurrentCheckboxState: CheckboxState = CheckboxState.Init;\n\n\t/\n\t Maintains a reference to the view DOM element of the `Checkbox`.\n\t /\n\t@ViewChild(\"inputCheckbox\") inputCheckbox: ElementRef;\n\n\t/\n\t Creates an instance of `Checkbox`.\n\t * @param {ChangeDetectorRef} changeDetectorRef\n\t * @memberof Checkbox\n\t /\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tCheckbox.checkboxCount++;\n\t}\n\n\t/\n\t Toggle the selected state of the checkbox.\n\t * @memberof Checkbox\n\t /\n\tpublic toggle() {\n\t\tthis.checked = !this.checked;\n\t}\n\n\t// this is the initial value set to the component\n\tpublic writeValue(value: any) {\n\t\tthis.checked = !!value;\n\t}\n\n\t/\n\t Sets a method in order to propagate changes back to the form.\n\t * @param {any} fn\n\t * @memberof Checkbox\n\t /\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/\n\t Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t /\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/\n\t Executes on the event of a change within `Checkbox` to block propagation.\n\t * @param {any} event\n\t * @memberof Checkbox\n\t /\n\tonChange(event) {\n\t\tevent.stopPropagation();\n\t}\n\n\t/\n\t Handles click events on the `Checkbox` and emits changes to other classes.\n\t * @param {any} event\n\t * @memberof Checkbox\n\t /\n\tonClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.toggle();\n\t\t\tthis.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\n\t/\n\t Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n\t * @memberof Checkbox\n\t /\n\tonTouched: () => any = () => {};\n\n\t/\n\t Handles changes between checkbox states.\n\t * @param {CheckboxState} newState\n\t * @returns {null}\n\t * @memberof Checkbox\n\t /\n\ttransitionCheckboxState(newState: CheckboxState) {\n\t\tlet oldState = this.currentCheckboxState;\n\n\t\t// Indeterminate has to be set always if it's transitioned to\n\t\t// checked has to be set before indeterminate or it overrides\n\t\t// indeterminate's dash\n\t\tif (newState === CheckboxState.Indeterminate) {\n\t\t\tthis.checked = false;\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = true;\n\t\t}\n\n\t\tif (oldState === newState) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.currentCheckboxState = newState;\n\t}\n\n\t/\n\t Creates instance of `CheckboxChange` used to propagate the change event.\n\t * @memberof Checkbox\n\t /\n\temitChangeEvent() {\n\t\tlet event = new CheckboxChange();\n\t\tevent.source = this;\n\t\tevent.checked = this.checked;\n\n\t\tthis.propagateChange(this.checked);\n\t\tthis.change.emit(event);\n\t}\n\n\t/\n\t Updates the checkbox if it is in the indeterminate state.\n\t * @memberof Checkbox\n\t /\n\tngAfterViewInit() {\n\t\tif (this.indeterminate) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = true;\n\t\t\tthis.checked = false;\n\t\t}\n\t}\n\n\t/\n\t Method set in `registerOnChange` to propagate changes back to the form.\n\t * @memberof Checkbox\n\t */\n\tpropagateChange = (_: any) => {};\n}\n"]}

package/checkbox/checkbox.component.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"CheckboxState":{"Init":0,"Indeterminate":1,"Checked":2,"Unchecked":3},"CheckboxChange":{"__symbolic":"class"},"Checkbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":57,"character":1},"arguments":[{"selector":"ibm-checkbox","template":"\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":87,"character":12},"useExisting":{"__symbolic":"reference","name":"Checkbox"},"multi":true}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":92,"character":18},"member":"OnPush"}}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~103~~,"character":2}}]}],"nested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~107~~,"character":2}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~111~~,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~115~~,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~119~~,"character":2}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~123~~,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~127~~,"character":2}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~131~~,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~135~~,"character":2}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~140~~,"character":2},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~145~~,"character":2},"arguments":["aria-labelledby"]}]}],"indeterminate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~157~~,"character":2}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~181~~,"character":2}}]}],"checkboxWrapperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":~~194~~,"character":2},"arguments":["class.bx--checkbox-wrapper"]}]}],"formItemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":~~197~~,"character":2},"arguments":["class.bx--form-item"]}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~205~~,"character":2}}]}],"indeterminateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~210~~,"character":2}}]}],"inputCheckbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":~~226~~,"character":2},"arguments":["inputCheckbox"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":~~233~~,"character":42}]}],"toggle":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"transitionCheckboxState":[{"__symbolic":"method"}],"emitChangeEvent":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]},"statics":{"checkboxCount":0}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"CheckboxState":{"Init":0,"Indeterminate":1,"Checked":2,"Unchecked":3},"CheckboxChange":{"__symbolic":"class"},"Checkbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":57,"character":1},"arguments":[{"selector":"ibm-checkbox","template":"\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<span [ngClass]=\"{'bx--visually-hidden' : hideLabel}\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</label>\n\t","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":89,"character":12},"useExisting":{"__symbolic":"reference","name":"Checkbox"},"multi":true}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":94,"character":18},"member":"OnPush"}}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":2}}]}],"nested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":2}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":2}}]}],"hideLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":2}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":2}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":2}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":2},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":2},"arguments":["aria-labelledby"]}]}],"indeterminate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":2}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":187,"character":2}}]}],"checkboxWrapperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":200,"character":2},"arguments":["class.bx--checkbox-wrapper"]}]}],"formItemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":203,"character":2},"arguments":["class.bx--form-item"]}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":211,"character":2}}]}],"indeterminateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":216,"character":2}}]}],"inputCheckbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":232,"character":2},"arguments":["inputCheckbox"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":239,"character":42}]}],"toggle":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"transitionCheckboxState":[{"__symbolic":"method"}],"emitChangeEvent":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]},"statics":{"checkboxCount":0}}}}]

package/checkbox/checkbox.component.ngfactory.js CHANGED Viewed

@@ -37,8 +37,8 @@ export function View_Checkbox_0(_l) { return i0.ɵvid(2, [i0.ɵqud(402653184, 1,
     } if (("click" === en)) {
         var pd_1 = (_co.onClick($event) !== false);
         ad = (pd_1 && ad);
-    } return ad; }, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 3, "label", [["class", "bx--checkbox-label"]], [[8, "htmlFor", 0]], null, null, null, null)), i0.ɵdid(3, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(4, { "bx--skeleton": 0 }), i0.ɵncd(null, 0)], function (_ck, _v) { var _co = _v.component; var currVal_11 = "bx--checkbox-label"; var currVal_12 = _ck(_v, 4, 0, _co.skeleton); _ck(_v, 3, 0, currVal_11, currVal_12); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; var currVal_1 = _co.value; var currVal_2 = _co.name; var currVal_3 = _co.required; var currVal_4 = _co.checked; var currVal_5 = _co.disabled; var currVal_6 = _co.indeterminate; var currVal_7 = _co.ariaLabel; var currVal_8 = _co.ariaLabelledby; var currVal_9 = (_co.indeterminate ? "mixed" : _co.checked); _ck(_v, 1, 0, currVal_0, currVal_1, currVal_2, currVal_3, currVal_4, currVal_5, currVal_6, currVal_7, currVal_8, currVal_9); var currVal_10 = _co.id; _ck(_v, 2, 0, currVal_10); }); }
+    } return ad; }, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 6, "label", [["class", "bx--checkbox-label"]], [[8, "htmlFor", 0]], null, null, null, null)), i0.ɵdid(3, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(4, { "bx--skeleton": 0 }), (_l()(), i0.ɵeld(5, 0, null, null, 3, "span", [], null, null, null, null, null)), i0.ɵdid(6, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { ngClass: [0, "ngClass"] }, null), i0.ɵpod(7, { "bx--visually-hidden": 0 }), i0.ɵncd(null, 0)], function (_ck, _v) { var _co = _v.component; var currVal_11 = "bx--checkbox-label"; var currVal_12 = _ck(_v, 4, 0, _co.skeleton); _ck(_v, 3, 0, currVal_11, currVal_12); var currVal_13 = _ck(_v, 7, 0, _co.hideLabel); _ck(_v, 6, 0, currVal_13); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; var currVal_1 = _co.value; var currVal_2 = _co.name; var currVal_3 = _co.required; var currVal_4 = _co.checked; var currVal_5 = _co.disabled; var currVal_6 = _co.indeterminate; var currVal_7 = _co.ariaLabel; var currVal_8 = _co.ariaLabelledby; var currVal_9 = (_co.indeterminate ? "mixed" : _co.checked); _ck(_v, 1, 0, currVal_0, currVal_1, currVal_2, currVal_3, currVal_4, currVal_5, currVal_6, currVal_7, currVal_8, currVal_9); var currVal_10 = _co.id; _ck(_v, 2, 0, currVal_10); }); }
 export function View_Checkbox_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-checkbox", [], [[2, "bx--checkbox-wrapper", null], [2, "bx--form-item", null]], null, null, View_Checkbox_0, RenderType_Checkbox)), i0.ɵprd(5120, null, i2.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i3.Checkbox]), i0.ɵdid(2, 4243456, null, 0, i3.Checkbox, [i0.ChangeDetectorRef], null, null)], null, function (_ck, _v) { var currVal_0 = i0.ɵnov(_v, 2).checkboxWrapperClass; var currVal_1 = i0.ɵnov(_v, 2).formItemClass; _ck(_v, 0, 0, currVal_0, currVal_1); }); }
-var CheckboxNgFactory = i0.ɵccf("ibm-checkbox", i3.Checkbox, View_Checkbox_Host_0, { size: "size", nested: "nested", inline: "inline", disabled: "disabled", skeleton: "skeleton", name: "name", id: "id", required: "required", value: "value", ariaLabel: "aria-label", ariaLabelledby: "aria-labelledby", indeterminate: "indeterminate", checked: "checked" }, { change: "change", indeterminateChange: "indeterminateChange" }, ["*"]);
+var CheckboxNgFactory = i0.ɵccf("ibm-checkbox", i3.Checkbox, View_Checkbox_Host_0, { size: "size", nested: "nested", inline: "inline", disabled: "disabled", skeleton: "skeleton", hideLabel: "hideLabel", name: "name", id: "id", required: "required", value: "value", ariaLabel: "aria-label", ariaLabelledby: "aria-labelledby", indeterminate: "indeterminate", checked: "checked" }, { change: "change", indeterminateChange: "indeterminateChange" }, ["*"]);
 export { CheckboxNgFactory as CheckboxNgFactory };
 //# sourceMappingURL=checkbox.component.ngfactory.js.map

package/checkbox/checkbox.component.ngfactory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.component.ngfactory.js","sourceRoot":"","sources":["../src/checkbox/checkbox.component.ngfactory.ts","../src/checkbox/checkbox.component.ts.Checkbox.html"],"names":[],"mappings":";;;;;;;;;;;;;uGCCE,qaAe2B,YAD1B;;wBAA2B;MAC3B;;wBAAyB;MAf1B,wBAe2B,KAC3B,qSAKI,GAFH,8BAEE,~~KACF~~,eAAY,~~iDAJZ~~,qCAA0B,EAC1B,kCAEE,YALH,YAKI,EAHH,UAA0B,EAC1B,UAEE,~~mDAjBF~~,mBAAS,KACT,mBAAe,QACf,mBAAa,OACb,mBAAqB,WACrB,mBAAmB,UACnB,mBAAqB,WACrB,mBAA+B,gBAC/B,mBAA6B,YAC7B,mBAAuC,iBACvC,kDAAyD,WAb1D,YAe2B,EAX1B,SAAS,EACT,SAAe,EACf,SAAa,EACb,SAAqB,EACrB,SAAmB,EACnB,SAAqB,EACrB,SAA+B,EAC/B,SAA6B,EAC7B,SAAuC,EACvC,SAAyD,GAIzD,oBAAU,KADX,YAKI,EAJH,UAAU","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t"]}
1	+ {"version":3,"file":"checkbox.component.ngfactory.js","sourceRoot":"","sources":["../src/checkbox/checkbox.component.ngfactory.ts","../src/checkbox/checkbox.component.ts.Checkbox.html"],"names":[],"mappings":";;;;;;;;;;;;;uGCCE,qaAe2B,YAD1B;;wBAA2B;MAC3B;;wBAAyB;MAf1B,wBAe2B,KAC3B,qSAKI,GAFH,8BAEE,MACF,iOAAsD,GAAhD,qCAA+C,KACpD,eAAY,iDALb,qCAA0B,EAC1B,kCAEE,YALH,YAKI,EAHH,UAA0B,EAC1B,UAEE,GACI,kCAA+C,aAArD,YAAsD,EAAhD,UAA+C,mDAlBrD,mBAAS,KACT,mBAAe,QACf,mBAAa,OACb,mBAAqB,WACrB,mBAAmB,UACnB,mBAAqB,WACrB,mBAA+B,gBAC/B,mBAA6B,YAC7B,mBAAuC,iBACvC,kDAAyD,WAb1D,YAe2B,EAX1B,SAAS,EACT,SAAe,EACf,SAAa,EACb,SAAqB,EACrB,SAAmB,EACnB,SAAqB,EACrB,SAA+B,EAC/B,SAA6B,EAC7B,SAAuC,EACvC,SAAyD,GAIzD,oBAAU,KADX,YAKI,EAJH,UAAU","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<span [ngClass]=\"{'bx--visually-hidden' : hideLabel}\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</label>\n\t"]}

package/checkbox/checkbox.component.ngsummary.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"Init":0,"Indeterminate":1,"Checked":2,"Unchecked":3}},{"symbol":{"__symbol":1,"members":[]},"metadata":{"__symbolic":"class"}},{"symbol":{"__symbol":2,"members":[]},"metadata":{"__symbolic":"class","members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"nested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":["aria-labelledby"]}]}],"indeterminate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"checkboxWrapperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["class.bx--checkbox-wrapper"]}]}],"formItemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["class.bx--form-item"]}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":5,"members":[]}}]}],"indeterminateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":5,"members":[]}}]}],"inputCheckbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["inputCheckbox"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":7,"members":[]}]}],"toggle":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"transitionCheckboxState":[{"__symbolic":"method"}],"emitChangeEvent":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]},"statics":{"checkboxCount":0}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":2,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":7,"members":[]}}}}],"lifecycleHooks":[6]},"isComponent":true,"selector":"ibm-checkbox","exportAs":null,"inputs":{"size":"size","nested":"nested","inline":"inline","disabled":"disabled","skeleton":"skeleton","name":"name","id":"id","required":"required","value":"value","ariaLabel":"aria-label","ariaLabelledby":"aria-labelledby","indeterminate":"indeterminate","checked":"checked"},"outputs":{"change":"change","indeterminateChange":"indeterminateChange"},"hostListeners":{},"hostProperties":{"class.bx--checkbox-wrapper":"checkboxWrapperClass","class.bx--form-item":"formItemClass"},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":8,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":2,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[],"guards":{},"viewQueries":[{"selectors":[{"value":"inputCheckbox"}],"first":true,"descendants":true,"propertyName":"inputCheckbox","read":null}],"entryComponents":[],"changeDetection":0,"template":{"ngContentSelectors":["*"],"encapsulation":2},"componentViewType":{"__symbol":9,"members":[]},"rendererType":{"__symbol":10,"members":[]},"componentFactory":{"__symbol":11,"members":[]}}}],"symbols":[{"__symbol":0,"name":"CheckboxState","filePath":"./checkbox.component"},{"__symbol":1,"name":"CheckboxChange","filePath":"./checkbox.component"},{"__symbol":2,"name":"Checkbox","filePath":"./checkbox.component"},{"__symbol":3,"name":"Input","filePath":"@angular/core"},{"__symbol":4,"name":"HostBinding","filePath":"@angular/core"},{"__symbol":5,"name":"Output","filePath":"@angular/core"},{"__symbol":6,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":7,"name":"ChangeDetectorRef","filePath":"@angular/core"},{"__symbol":8,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":9,"name":"View_Checkbox_0","filePath":"./checkbox.component.ngfactory"},{"__symbol":10,"name":"RenderType_Checkbox","filePath":"./checkbox.component.ngfactory"},{"__symbol":11,"name":"CheckboxNgFactory","filePath":"./checkbox.component.ngfactory"}]}
1	+ {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"Init":0,"Indeterminate":1,"Checked":2,"Unchecked":3}},{"symbol":{"__symbol":1,"members":[]},"metadata":{"__symbolic":"class"}},{"symbol":{"__symbol":2,"members":[]},"metadata":{"__symbolic":"class","members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"nested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"hideLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":["aria-labelledby"]}]}],"indeterminate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]}}]}],"checkboxWrapperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["class.bx--checkbox-wrapper"]}]}],"formItemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["class.bx--form-item"]}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":5,"members":[]}}]}],"indeterminateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":5,"members":[]}}]}],"inputCheckbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["inputCheckbox"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":7,"members":[]}]}],"toggle":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"transitionCheckboxState":[{"__symbolic":"method"}],"emitChangeEvent":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]},"statics":{"checkboxCount":0}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":2,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":7,"members":[]}}}}],"lifecycleHooks":[6]},"isComponent":true,"selector":"ibm-checkbox","exportAs":null,"inputs":{"size":"size","nested":"nested","inline":"inline","disabled":"disabled","skeleton":"skeleton","hideLabel":"hideLabel","name":"name","id":"id","required":"required","value":"value","ariaLabel":"aria-label","ariaLabelledby":"aria-labelledby","indeterminate":"indeterminate","checked":"checked"},"outputs":{"change":"change","indeterminateChange":"indeterminateChange"},"hostListeners":{},"hostProperties":{"class.bx--checkbox-wrapper":"checkboxWrapperClass","class.bx--form-item":"formItemClass"},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":8,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":2,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[],"guards":{},"viewQueries":[{"selectors":[{"value":"inputCheckbox"}],"first":true,"descendants":true,"propertyName":"inputCheckbox","read":null}],"entryComponents":[],"changeDetection":0,"template":{"ngContentSelectors":["*"],"encapsulation":2},"componentViewType":{"__symbol":9,"members":[]},"rendererType":{"__symbol":10,"members":[]},"componentFactory":{"__symbol":11,"members":[]}}}],"symbols":[{"__symbol":0,"name":"CheckboxState","filePath":"./checkbox.component"},{"__symbol":1,"name":"CheckboxChange","filePath":"./checkbox.component"},{"__symbol":2,"name":"Checkbox","filePath":"./checkbox.component"},{"__symbol":3,"name":"Input","filePath":"@angular/core"},{"__symbol":4,"name":"HostBinding","filePath":"@angular/core"},{"__symbol":5,"name":"Output","filePath":"@angular/core"},{"__symbol":6,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":7,"name":"ChangeDetectorRef","filePath":"@angular/core"},{"__symbol":8,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":9,"name":"View_Checkbox_0","filePath":"./checkbox.component.ngfactory"},{"__symbol":10,"name":"RenderType_Checkbox","filePath":"./checkbox.component.ngfactory"},{"__symbol":11,"name":"CheckboxNgFactory","filePath":"./checkbox.component.ngfactory"}]}

package/checkbox/checkbox.module.ngfactory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.module.ngfactory.js","sourceRoot":"","sources":["../src/checkbox/checkbox.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './checkbox.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from '@angular/forms';\nimport * as i4 from './checkbox.component';\nexport const CheckboxModuleNgFactory:i0.NgModuleFactory<i1.CheckboxModule> = (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.ɵangular_packages_forms_forms_bg = (<any>(null as any));\nvar _decl0_12:i3.NgSelectOption = (<any>(null as any));\nvar _decl0_13:i3.ɵangular_packages_forms_forms_r = (<any>(null as any));\nvar _decl0_14:i3.DefaultValueAccessor = (<any>(null as any));\nvar _decl0_15:i3.ɵangular_packages_forms_forms_bd = (<any>(null as any));\nvar _decl0_16:i3.ɵangular_packages_forms_forms_bf = (<any>(null as any));\nvar _decl0_17:i3.CheckboxControlValueAccessor = (<any>(null as any));\nvar _decl0_18:i3.SelectControlValueAccessor = (<any>(null as any));\nvar _decl0_19:i3.SelectMultipleControlValueAccessor = (<any>(null as any));\nvar _decl0_20:i3.RadioControlValueAccessor = (<any>(null as any));\nvar _decl0_21:i3.NgControlStatus = (<any>(null as any));\nvar _decl0_22:i3.NgControlStatusGroup = (<any>(null as any));\nvar _decl0_23:i3.RequiredValidator = (<any>(null as any));\nvar _decl0_24:i3.MinLengthValidator = (<any>(null as any));\nvar _decl0_25:i3.MaxLengthValidator = (<any>(null as any));\nvar _decl0_26:i3.PatternValidator = (<any>(null as any));\nvar _decl0_27:i3.CheckboxRequiredValidator = (<any>(null as any));\nvar _decl0_28:i3.EmailValidator = (<any>(null as any));\nvar _decl0_29:i3.NgModel = (<any>(null as any));\nvar _decl0_30:i3.NgModelGroup = (<any>(null as any));\nvar _decl0_31:i3.NgForm = (<any>(null as any));\nvar _decl0_32:i4.Checkbox = (<any>(null as any));\nvar _decl0_33:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_34:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_35:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_36:i2.JsonPipe = (<any>(null as any));\nvar _decl0_37:i2.SlicePipe = (<any>(null as any));\nvar _decl0_38:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_39:i2.PercentPipe = (<any>(null as any));\nvar _decl0_40:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_41:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_42:i2.DatePipe = (<any>(null as any));\nvar _decl0_43:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_44:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_45:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_46:i2.CommonModule = (<any>(null as any));\nvar _decl0_47:i3.FormsModule = (<any>(null as any));\nvar _decl0_48:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_49:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_Checkbox_Host_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Checkbox_1_0():void {\n var _any:any = (null as any);\n const currVal_0:any = _decl0_32.id;\n currVal_0;\n const currVal_1:any = _decl0_32.value;\n currVal_1;\n const currVal_2:any = _decl0_32.name;\n currVal_2;\n const currVal_3:any = _decl0_32.required;\n currVal_3;\n const currVal_4:any = _decl0_32.checked;\n currVal_4;\n const currVal_5:any = _decl0_32.disabled;\n currVal_5;\n const currVal_6:any = _decl0_32.indeterminate;\n currVal_6;\n const currVal_7:any = _decl0_32.ariaLabel;\n currVal_7;\n const currVal_8:any = _decl0_32.ariaLabelledby;\n currVal_8;\n const currVal_9:any = (_decl0_32.indeterminate? 'mixed': _decl0_32.checked);\n currVal_9;\n const currVal_10:any = 'bx--checkbox-label';\n currVal_10;\n const currVal_11:any = (<any>{'bx--skeleton':_decl0_32.skeleton});\n currVal_11;\n const currVal_12:any = _decl0_32.id;\n currVal_12;\n const ~~pd_13~~:any = ((<any>_decl0_32.onChange(_any)) !== false);\n const ~~pd_14~~:any = ((<any>_decl0_32.onClick(_any)) !== false);\n}\n"]}
1	+ {"version":3,"file":"checkbox.module.ngfactory.js","sourceRoot":"","sources":["../src/checkbox/checkbox.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './checkbox.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from '@angular/forms';\nimport * as i4 from './checkbox.component';\nexport const CheckboxModuleNgFactory:i0.NgModuleFactory<i1.CheckboxModule> = (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.ɵangular_packages_forms_forms_bg = (<any>(null as any));\nvar _decl0_12:i3.NgSelectOption = (<any>(null as any));\nvar _decl0_13:i3.ɵangular_packages_forms_forms_r = (<any>(null as any));\nvar _decl0_14:i3.DefaultValueAccessor = (<any>(null as any));\nvar _decl0_15:i3.ɵangular_packages_forms_forms_bd = (<any>(null as any));\nvar _decl0_16:i3.ɵangular_packages_forms_forms_bf = (<any>(null as any));\nvar _decl0_17:i3.CheckboxControlValueAccessor = (<any>(null as any));\nvar _decl0_18:i3.SelectControlValueAccessor = (<any>(null as any));\nvar _decl0_19:i3.SelectMultipleControlValueAccessor = (<any>(null as any));\nvar _decl0_20:i3.RadioControlValueAccessor = (<any>(null as any));\nvar _decl0_21:i3.NgControlStatus = (<any>(null as any));\nvar _decl0_22:i3.NgControlStatusGroup = (<any>(null as any));\nvar _decl0_23:i3.RequiredValidator = (<any>(null as any));\nvar _decl0_24:i3.MinLengthValidator = (<any>(null as any));\nvar _decl0_25:i3.MaxLengthValidator = (<any>(null as any));\nvar _decl0_26:i3.PatternValidator = (<any>(null as any));\nvar _decl0_27:i3.CheckboxRequiredValidator = (<any>(null as any));\nvar _decl0_28:i3.EmailValidator = (<any>(null as any));\nvar _decl0_29:i3.NgModel = (<any>(null as any));\nvar _decl0_30:i3.NgModelGroup = (<any>(null as any));\nvar _decl0_31:i3.NgForm = (<any>(null as any));\nvar _decl0_32:i4.Checkbox = (<any>(null as any));\nvar _decl0_33:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_34:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_35:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_36:i2.JsonPipe = (<any>(null as any));\nvar _decl0_37:i2.SlicePipe = (<any>(null as any));\nvar _decl0_38:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_39:i2.PercentPipe = (<any>(null as any));\nvar _decl0_40:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_41:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_42:i2.DatePipe = (<any>(null as any));\nvar _decl0_43:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_44:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_45:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_46:i2.CommonModule = (<any>(null as any));\nvar _decl0_47:i3.FormsModule = (<any>(null as any));\nvar _decl0_48:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_49:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_Checkbox_Host_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Checkbox_1_0():void {\n var _any:any = (null as any);\n const currVal_0:any = _decl0_32.id;\n currVal_0;\n const currVal_1:any = _decl0_32.value;\n currVal_1;\n const currVal_2:any = _decl0_32.name;\n currVal_2;\n const currVal_3:any = _decl0_32.required;\n currVal_3;\n const currVal_4:any = _decl0_32.checked;\n currVal_4;\n const currVal_5:any = _decl0_32.disabled;\n currVal_5;\n const currVal_6:any = _decl0_32.indeterminate;\n currVal_6;\n const currVal_7:any = _decl0_32.ariaLabel;\n currVal_7;\n const currVal_8:any = _decl0_32.ariaLabelledby;\n currVal_8;\n const currVal_9:any = (_decl0_32.indeterminate? 'mixed': _decl0_32.checked);\n currVal_9;\n const currVal_10:any = 'bx--checkbox-label';\n currVal_10;\n const currVal_11:any = (<any>{'bx--skeleton':_decl0_32.skeleton});\n currVal_11;\n const currVal_12:any = _decl0_32.id;\n currVal_12;\n const currVal_13:any = (<any>{'bx--visually-hidden':_decl0_32.hideLabel});\n currVal_13;\n const pd_14:any = ((<any>_decl0_32.onChange(_any)) !== false);\n const pd_15:any = ((<any>_decl0_32.onClick(_any)) !== false);\n}\n"]}

package/combobox/combobox.component.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@
  */
-import { OnChanges, ElementRef, EventEmitter, AfterViewInit, AfterContentInit, OnInit } from "@angular/core";
+import { OnChanges, ElementRef, EventEmitter, AfterViewInit, AfterContentInit, TemplateRef } from "@angular/core";
 import { AbstractDropdownView } from "./../dropdown/abstract-dropdown-view.class";
 import { ListItem } from "./../dropdown/list-item.interface";
 /**
@@ -35,8 +35,10 @@ import { ListItem } from "./../dropdown/list-item.interface";
  * @implements {AfterViewInit}
  * @implements {AfterContentInit}
  */
-export declare class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentInit {
+export declare class ComboBox implements OnChanges, AfterViewInit, AfterContentInit {
     protected elementRef: ElementRef;
+    static comboBoxCount: number;
+    id: string;
     /**
      * List of items to fill the content with.
      *
@@ -76,6 +78,14 @@ export declare class ComboBox implements OnChanges, OnInit, AfterViewInit, After
      * Combo box render size.
      */
     size: "sm" | "md" | "lg";
+    /**
+     * Label for the combobox.
+     */
+    label: string | TemplateRef<any>;
+    /**
+     * Sets the optional helper text.
+     */
+    helperText: string | TemplateRef<any>;
     /**
      * Set to `true` to disable combobox.
      */
@@ -124,7 +134,7 @@ export declare class ComboBox implements OnChanges, OnInit, AfterViewInit, After
     /** ContentChild reference to the instantiated dropdown list */
     view: AbstractDropdownView;
     dropdownMenu: any;
-    class: string;
+    hostClass: boolean;
     role: string;
     display: string;
     open: boolean;
@@ -145,7 +155,6 @@ export declare class ComboBox implements OnChanges, OnInit, AfterViewInit, After
      *
      */
     ngOnChanges(changes: any): void;
-    ngOnInit(): void;
     /**
      * Sets initial state that depends on child components
      * Subscribes to select events and handles focus/filtering/initial list updates
@@ -199,5 +208,6 @@ export declare class ComboBox implements OnChanges, OnInit, AfterViewInit, After
      * ```
      */
     onSubmit(ev: any): void;
+    isTemplate(value: any): boolean;
     protected updateSelected(): void;
 }

package/combobox/combobox.component.js CHANGED Viewed

@@ -18,7 +18,7 @@
  */
-import { Component, ContentChild, Input, Output, HostListener, ElementRef, ViewChild, EventEmitter, HostBinding } from "@angular/core";
+import { Component, ContentChild, Input, Output, HostListener, ElementRef, ViewChild, EventEmitter, HostBinding, TemplateRef } from "@angular/core";
 import { AbstractDropdownView } from "./../dropdown/abstract-dropdown-view.class";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { filter } from "rxjs/operators";
@@ -42,6 +42,7 @@ var ComboBox = /** @class */ (function () {
      */
     function ComboBox(elementRef) {
         this.elementRef = elementRef;
+        this.id = "dropdown-" + ComboBox.comboBoxCount++;
         /**
          * List of items to fill the content with.
          *
@@ -126,7 +127,7 @@ var ComboBox = /** @class */ (function () {
         this.submit = new EventEmitter();
         /** emits an empty event when the menu is closed */
         this.close = new EventEmitter();
-        this.class = "bx--combo-box bx--list-box";
+        this.hostClass = true;
         this.role = "combobox";
         this.display = "block";
         this.open = false;
@@ -149,11 +150,6 @@ var ComboBox = /** @class */ (function () {
             this.updateSelected();
         }
     };
-    ComboBox.prototype.ngOnInit = function () {
-        if (this.type === "multi") {
-            this.class = "bx--multi-select bx--combo-box bx--list-box";
-        }
-    };
     /**
      * Sets initial state that depends on child components
      * Subscribes to select events and handles focus/filtering/initial list updates
@@ -349,6 +345,9 @@ var ComboBox = /** @class */ (function () {
             }
         });
     };
+    ComboBox.prototype.isTemplate = function (value) {
+        return value instanceof TemplateRef;
+    };
     ComboBox.prototype.updateSelected = function () {
         var selected = this.view.getSelected();
         if (selected) {
@@ -361,10 +360,11 @@ var ComboBox = /** @class */ (function () {
             }
         }
     };
+    ComboBox.comboBoxCount = 0;
     ComboBox.decorators = [
         { type: Component, args: [{
                     selector: "ibm-combo-box",
-                    template: "\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",
+                    template: "\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",
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -379,17 +379,20 @@ var ComboBox = /** @class */ (function () {
         { type: ElementRef }
     ]; };
     ComboBox.propDecorators = {
+        id: [{ type: Input }],
         items: [{ type: Input }],
         placeholder: [{ type: Input }],
         type: [{ type: Input }],
         size: [{ type: Input }],
+        label: [{ type: Input }],
+        helperText: [{ type: Input }],
         disabled: [{ type: HostBinding, args: ["attr.aria-disabled",] }, { type: Input }],
         selected: [{ type: Output }],
         submit: [{ type: Output }],
         close: [{ type: Output }],
         view: [{ type: ContentChild, args: [AbstractDropdownView,] }],
         dropdownMenu: [{ type: ViewChild, args: ["dropdownMenu",] }],
-        class: [{ type: HostBinding, args: ["class",] }],
+        hostClass: [{ type: HostBinding, args: ["class.bx--list-box__wrapper",] }],
         role: [{ type: HostBinding, args: ["attr.role",] }],
         display: [{ type: HostBinding, args: ["style.display",] }],
         hostkeys: [{ type: HostListener, args: ["keydown", ["$event"],] }]

package/combobox/combobox.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox.component.js","sourceRoot":"","sources":["../src/combobox/combobox.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tOnInit\n} from \"@angular/core\";\nimport { AbstractDropdownView } from \"./../dropdown/abstract-dropdown-view.class\";\nimport { ListItem } from \"./../dropdown/list-item.interface\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\n\n/*\n ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n \n [See demo](../../?path=/story/combobox--basic)\n \n <example-url>../../iframe.html?id=combobox--basic</example-url>\n \n @export\n * @class ComboBox\n * @implements {OnChanges}\n * @implements {AfterViewInit}\n * @implements {AfterContentInit}\n /\n@Component({\n\tselector: \"ibm-combo-box\",\n\ttemplate: `\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\tngIf=\"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\tngIf=\"open\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentInit {\n\t/\n\t List of items to fill the content with.\n\t \n\t Example:\n\t * ```javascript\n\t * items = [\n\t \t\t{\n\t \t\t\tcontent: \"Abacus\",\n\t \t\t\tselected: false\n\t \t\t},\n\t \t\t{\n\t \t\t\tcontent: \"Byte\",\n\t \t\t\tselected: false,\n\t \t\t},\n\t \t\t{\n\t \t\t\tcontent: \"Computer\",\n\t \t\t\tselected: false\n\t \t\t},\n\t \t\t{\n\t \t\t\tcontent: \"Digital\",\n\t \t\t\tselected: false\n\t \t\t}\n\t * ];\n\t * ```\n\t \n\t /\n\t@Input() items: Array<ListItem> = [];\n\t/*\n\t Text to show when nothing is selected.\n\t /\n\t@Input() placeholder = \"Filter...\";\n\t/\n\t Combo box type (supporting single or multi selection of items).\n\t /\n\t@Input() type: \"single\" \| \"multi\" = \"single\";\n\t/\n\t Combo box render size.\n\t /\n\t@Input() size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n\t/\n\t Set to `true` to disable combobox.\n\t /\n\t@HostBinding(\"attr.aria-disabled\") @Input() disabled = false;\n\t/\n\t Emits a ListItem\n\t \n\t Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t /\n\t@Output() selected = new EventEmitter<ListItem \| ListItem[]>();\n\t/\n\t Intended to be used to add items to the list.\n\t \n\t Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t \n\t Example:\n\t * ```javascript\n\t \t{\n\t \t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t \t\tindex: 1,\n\t \t\tvalue: {\n\t \t\t\tcontent: \"some user string\",\n\t \t\t\tselected: false\n\t \t\t}\n\t \t}\n\t * ```\n\t \n\t \n\t * Example:\n\t * ```javascript\n\t * {\n\t \tafter: 1,\n\t \tvalue: \"some user string\"\n\t * }\n\t * ```\n\t /\n\t@Output() submit: EventEmitter<any> = new EventEmitter<any>();\n\t/* emits an empty event when the menu is closed /\n\t@Output() close: EventEmitter<any> = new EventEmitter<any>();\n\t/* ContentChild reference to the instantiated dropdown list /\n\t@ContentChild(AbstractDropdownView) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@HostBinding(\"class\") class = \"bx--combo-box bx--list-box\";\n\t@HostBinding(\"attr.role\") role = \"combobox\";\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\t/* Selected items for multi-select combo-boxes. /\n\tpublic pills = [];\n\t/* used to update the displayValue /\n\tpublic selectedValue = \"\";\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\t/\n\t Creates an instance of ComboBox.\n\t /\n\tconstructor(protected elementRef: ElementRef) {}\n\n\t/\n\t Lifecycle hook.\n\t * Updates pills if necessary.\n\t \n\t /\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t}\n\t}\n\n\tngOnInit() {\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.class = \"bx--multi-select bx--combo-box bx--list-box\";\n\t\t}\n\t}\n\n\t/*\n\t Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t /\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (this.type === \"multi\") {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t} else {\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t\tthis.selected.emit(event);\n\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t});\n\t\t\tthis.view.items = this.items;\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".bx--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/\n\t Binds event handlers against the rendered view\n\t /\n\tngAfterViewInit() {\n\t\tdocument.addEventListener(\"click\", ev => {\n\t\t\tif (!this.elementRef.nativeElement.contains(ev.target)) {\n\t\t\t\tif (this.open) {\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/\n\t Handles `Escape` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t /\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\" \|\| ev.key === \"Down\") // `\"Down\"` is IE specific value\n\t\t\t&& (!this.dropdownMenu \|\| !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.stopPropagation();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => this.view.getCurrentElement().focus(), 0);\n\t\t}\n\t}\n\n\t/\n\t * no-op method for null event listeners, and other no op calls\n\t /\n\t_noop() {}\n\n\t/\n\t * propagates the value provided from ngModel\n\t /\n\twriteValue(value: any) {\n\t\tif (value) {\n\t\t\tif (this.type === \"single\") {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t}\n\t\t}\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/\n\t Called by `n-pill-input` when the selected pills have changed.\n\t /\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() \|\| [];\n\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t}\n\n\tpublic clearSelected() {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tthis.selected.emit(this.view.getSelected() as any);\n\t}\n\n\t/\n\t Closes the dropdown and emits the close event.\n\t /\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.close.emit();\n\t}\n\n\t/\n\t Opens the dropdown.\n\t /\n\tpublic openDropdown() {\n\t\tthis.open = true;\n\t}\n\n\t/\n\t Toggles the dropdown.\n\t /\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/\n\t Sets the list group filter, and manages single select item selection.\n\t /\n\tpublic onSearch(searchString) {\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tthis.openDropdown();\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (selected) {\n\t\t\t\t\tselected[0].selected = false;\n\t\t\t\t\t// notify that the selection has changed\n\t\t\t\t\tthis.view.select.emit({ item: selected[0] });\n\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t} else {\n\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Bubbles from `n-pill-input` when the user types a value and presses enter. Intended to be used to add items to the list.\n\t \n\t @param {any} ev event from `n-pill-input`, includes the typed value and the index of the pill the user typed after\n\t \n\t Example:\n\t * ```javascript\n\t \t{\n\t \tafter: 1,\n\t \tvalue: \"some user string\"\n\t \t}\n\t * ```\n\t */\n\tpublic onSubmit(ev) {\n\t\tlet index = 0;\n\t\tif (ev.after) {\n\t\t\tindex = this.view.getListItems().indexOf(ev.after) + 1;\n\t\t}\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex,\n\t\t\tvalue: {\n\t\t\t\tcontent: ev.value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (selected) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\tthis.updatePills();\n\t\t\t} else {\n\t\t\t\tthis.selectedValue = selected[0].content;\n\t\t\t\tthis.propagateChangeCallback(selected[0]);\n\t\t\t}\n\t\t}\n\t}\n}\n"]}
1	+ {"version":3,"file":"combobox.component.js","sourceRoot":"","sources":["../src/combobox/combobox.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { AbstractDropdownView } from \"./../dropdown/abstract-dropdown-view.class\";\nimport { ListItem } from \"./../dropdown/list-item.interface\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\n\n/*\n ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n \n [See demo](../../?path=/story/combobox--basic)\n \n <example-url>../../iframe.html?id=combobox--basic</example-url>\n \n @export\n * @class ComboBox\n * @implements {OnChanges}\n * @implements {AfterViewInit}\n * @implements {AfterContentInit}\n /\n@Component({\n\tselector: \"ibm-combo-box\",\n\ttemplate: `\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\tngIf=\"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\tngIf=\"open\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit {\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t/*\n\t List of items to fill the content with.\n\t \n\t Example:\n\t * ```javascript\n\t * items = [\n\t \t\t{\n\t \t\t\tcontent: \"Abacus\",\n\t \t\t\tselected: false\n\t \t\t},\n\t \t\t{\n\t \t\t\tcontent: \"Byte\",\n\t \t\t\tselected: false,\n\t \t\t},\n\t \t\t{\n\t \t\t\tcontent: \"Computer\",\n\t \t\t\tselected: false\n\t \t\t},\n\t \t\t{\n\t \t\t\tcontent: \"Digital\",\n\t \t\t\tselected: false\n\t \t\t}\n\t * ];\n\t * ```\n\t \n\t /\n\t@Input() items: Array<ListItem> = [];\n\t/*\n\t Text to show when nothing is selected.\n\t /\n\t@Input() placeholder = \"Filter...\";\n\t/\n\t Combo box type (supporting single or multi selection of items).\n\t /\n\t@Input() type: \"single\" \| \"multi\" = \"single\";\n\t/\n\t Combo box render size.\n\t /\n\t@Input() size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n\t/\n\t Label for the combobox.\n\t /\n\t@Input() label: string \| TemplateRef<any>;\n\t/\n\t Sets the optional helper text.\n\t /\n\t@Input() helperText: string \| TemplateRef<any>;\n\t/\n\t Set to `true` to disable combobox.\n\t /\n\t@HostBinding(\"attr.aria-disabled\") @Input() disabled = false;\n\t/\n\t Emits a ListItem\n\t \n\t Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t /\n\t@Output() selected = new EventEmitter<ListItem \| ListItem[]>();\n\t/\n\t Intended to be used to add items to the list.\n\t \n\t Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t \n\t Example:\n\t * ```javascript\n\t \t{\n\t \t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t \t\tindex: 1,\n\t \t\tvalue: {\n\t \t\t\tcontent: \"some user string\",\n\t \t\t\tselected: false\n\t \t\t}\n\t \t}\n\t * ```\n\t \n\t \n\t * Example:\n\t * ```javascript\n\t * {\n\t \tafter: 1,\n\t \tvalue: \"some user string\"\n\t * }\n\t * ```\n\t /\n\t@Output() submit: EventEmitter<any> = new EventEmitter<any>();\n\t/* emits an empty event when the menu is closed /\n\t@Output() close: EventEmitter<any> = new EventEmitter<any>();\n\t/* ContentChild reference to the instantiated dropdown list /\n\t@ContentChild(AbstractDropdownView) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@HostBinding(\"class.bx--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"attr.role\") role = \"combobox\";\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\t/* Selected items for multi-select combo-boxes. /\n\tpublic pills = [];\n\t/* used to update the displayValue /\n\tpublic selectedValue = \"\";\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\t/\n\t Creates an instance of ComboBox.\n\t /\n\tconstructor(protected elementRef: ElementRef) {}\n\n\t/\n\t Lifecycle hook.\n\t * Updates pills if necessary.\n\t \n\t /\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t}\n\t}\n\n\t/*\n\t Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t /\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (this.type === \"multi\") {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t} else {\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t\tthis.selected.emit(event);\n\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t});\n\t\t\tthis.view.items = this.items;\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".bx--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/\n\t Binds event handlers against the rendered view\n\t /\n\tngAfterViewInit() {\n\t\tdocument.addEventListener(\"click\", ev => {\n\t\t\tif (!this.elementRef.nativeElement.contains(ev.target)) {\n\t\t\t\tif (this.open) {\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/\n\t Handles `Escape` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t /\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\" \|\| ev.key === \"Down\") // `\"Down\"` is IE specific value\n\t\t\t&& (!this.dropdownMenu \|\| !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.stopPropagation();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => this.view.getCurrentElement().focus(), 0);\n\t\t}\n\t}\n\n\t/\n\t * no-op method for null event listeners, and other no op calls\n\t /\n\t_noop() {}\n\n\t/\n\t * propagates the value provided from ngModel\n\t /\n\twriteValue(value: any) {\n\t\tif (value) {\n\t\t\tif (this.type === \"single\") {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t}\n\t\t}\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/\n\t Called by `n-pill-input` when the selected pills have changed.\n\t /\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() \|\| [];\n\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t}\n\n\tpublic clearSelected() {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tthis.selected.emit(this.view.getSelected() as any);\n\t}\n\n\t/\n\t Closes the dropdown and emits the close event.\n\t /\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.close.emit();\n\t}\n\n\t/\n\t Opens the dropdown.\n\t /\n\tpublic openDropdown() {\n\t\tthis.open = true;\n\t}\n\n\t/\n\t Toggles the dropdown.\n\t /\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/\n\t Sets the list group filter, and manages single select item selection.\n\t /\n\tpublic onSearch(searchString) {\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tthis.openDropdown();\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (selected) {\n\t\t\t\t\tselected[0].selected = false;\n\t\t\t\t\t// notify that the selection has changed\n\t\t\t\t\tthis.view.select.emit({ item: selected[0] });\n\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t} else {\n\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Bubbles from `n-pill-input` when the user types a value and presses enter. Intended to be used to add items to the list.\n\t \n\t @param {any} ev event from `n-pill-input`, includes the typed value and the index of the pill the user typed after\n\t \n\t Example:\n\t * ```javascript\n\t \t{\n\t \tafter: 1,\n\t \tvalue: \"some user string\"\n\t \t}\n\t * ```\n\t */\n\tpublic onSubmit(ev) {\n\t\tlet index = 0;\n\t\tif (ev.after) {\n\t\t\tindex = this.view.getListItems().indexOf(ev.after) + 1;\n\t\t}\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex,\n\t\t\tvalue: {\n\t\t\t\tcontent: ev.value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (selected) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\tthis.updatePills();\n\t\t\t} else {\n\t\t\t\tthis.selectedValue = selected[0].content;\n\t\t\t\tthis.propagateChangeCallback(selected[0]);\n\t\t\t}\n\t\t}\n\t}\n}\n"]}

package/combobox/combobox.component.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"ComboBox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"ibm-combo-box","template":"\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\tngIf=\"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\tngIf=\"open\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":90,"character":12},"useExisting":{"__symbolic":"reference","name":"ComboBox"},"multi":true}]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~123~~,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~127~~,"character":2}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~131~~,"character":2}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~135~~,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":~~139~~,"character":2},"arguments":["attr.aria-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~139~~,"character":37}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~151~~,"character":2}}]}],"submit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~178~~,"character":2}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~180~~,"character":2}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":~~182~~,"character":2},"arguments":[{"__symbolic":"reference","module":"./../dropdown/abstract-dropdown-view.class","name":"AbstractDropdownView","line":~~182~~,"character":15}]}]}],"dropdownMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":~~183~~,"character":2},"arguments":["dropdownMenu"]}]}],"~~class~~":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":~~184~~,"character":2},"arguments":["class"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":~~185~~,"character":2},"arguments":["attr.role"]}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":~~186~~,"character":2},"arguments":["style.display"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":~~202~~,"character":35}]}],"ngOnChanges":[{"__symbolic":"method"}],"~~ngOnInit":[{"__symbolic":"method"}],"~~ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":~~278~~,"character":2},"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"}]}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"ComboBox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"ibm-combo-box","template":"\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\tngIf=\"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","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":103,"character":12},"useExisting":{"__symbolic":"reference","name":"ComboBox"},"multi":true}]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":2}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":2}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":2}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":2}}]}],"helperText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":162,"character":2},"arguments":["attr.aria-disabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":37}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":174,"character":2}}]}],"submit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":201,"character":2}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":203,"character":2}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":205,"character":2},"arguments":[{"__symbolic":"reference","module":"./../dropdown/abstract-dropdown-view.class","name":"AbstractDropdownView","line":205,"character":15}]}]}],"dropdownMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":206,"character":2},"arguments":["dropdownMenu"]}]}],"hostClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":207,"character":2},"arguments":["class.bx--list-box__wrapper"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":208,"character":2},"arguments":["attr.role"]}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":209,"character":2},"arguments":["style.display"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":225,"character":35}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"hostkeys":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":295,"character":2},"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}}}}]