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/select/select.component.js CHANGED Viewed

@@ -48,10 +48,6 @@ var Select = /** @class */ (function () {
          * `inline` or `default` select displays
          */
         this.display = "default";
-        /**
-         * Label for the select. Appears above the input.
-         */
-        this.label = "Select label";
         /**
          * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
          */
@@ -124,15 +120,15 @@ var Select = /** @class */ (function () {
         this.onChangeHandler(event.target.value);
         this.selected.emit(event.target.value);
     };
+    Select.prototype.isTemplate = function (value) {
+        return value instanceof TemplateRef;
+    };
     /**
      * Listens for the host blurring, and notifies the model
      */
     Select.prototype.blur = function () {
         this.onTouchedHandler();
     };
-    Select.prototype.isTemplate = function (value) {
-        return value instanceof TemplateRef;
-    };
     /**
      * Tracks the total number of selects instantiated. Used to generate unique IDs
      */
@@ -140,7 +136,7 @@ var Select = /** @class */ (function () {
     Select.decorators = [
         { type: Component, args: [{
                     selector: "ibm-select",
-                    template: "\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label *ngIf=\"skeleton\" [attr.for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label *ngIf=\"!skeleton\" [attr.for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 *ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t",
+                    template: "\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label *ngIf=\"skeleton\" [for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label *ngIf=\"!skeleton\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 *ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t",
                     styles: ["\n\t\t[data-invalid] ~ .bx--select__arrow {\n\t\t\tbottom: 2.25rem;\n\t\t}\n\t"],
                     providers: [
                         {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"select.component.js","sourceRoot":"","sources":["../src/select/select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAwB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH;IAAA;~~QAyDC~~;;WAEG;QACM,YAAO,GAAyB,SAAS,CAAC;~~QACnD~~;;WAEG;QACM,~~UAAK,GAAG,cAAc,CAAC;QAShC;;WAEG;QACM,~~OAAE,GAAG,YAAU,MAAM,CAAC,WAAW,EAAI,CAAC;QAC/C;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,YAAO,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACM,UAAK,GAAqB,MAAM,CAAC;QAC1C;;WAEG;QACO,aAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;~~QAiDxC~~;;WAEG;QACO,oBAAe,GAAG,UAAC,CAAM,IAAO,CAAC,CAAC;QAClC,qBAAgB,GAAG,cAAQ,CAAC,CAAC;~~IAaxC~~,CAAC;IA9DA,sBAAI,yBAAK;aAAT;YACC,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,CAAC;aAED,UAAU,CAAC;YACV,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC;QACrC,CAAC;;;OAJA;IAMD;;OAEG;IACH,2BAAU,GAAV,UAAW,GAAQ;QAClB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;IAClB,CAAC;IAED;;OAEG;IACH,iCAAgB,GAAhB,UAAiB,EAAO;QACvB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IACH,kCAAiB,GAAjB,UAAkB,EAAO;QACxB,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,iCAAgB,GAAhB,UAAiB,UAAmB;QACnC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACH,yBAAQ,GAAR,UAAS,KAAK;QACb,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAQD;;OAEG;IAEO,qBAAI,GADd;QAEC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;~~IAES,2BAAU,GAApB,UAAqB,KAAK;QACzB,OAAO,KAAK,YAAY,WAAW,CAAC;IACrC,CAAC;~~IA9GD;;OAEG;IACI,kBAAW,GAAG,CAAC,CAAC;;~~gBAvDvB~~,SAAS,SAAC;oBACV,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE,~~sjDAmCT~~;oBACD,MAAM,EAAE,CAAC,gFAIR,CAAC;oBACF,SAAS,EAAE;wBACV;4BACC,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,MAAM;4BACnB,KAAK,EAAE,IAAI;yBACX;qBACD;iBACD;;;0BAUC,KAAK;wBAIL,KAAK;6BAIL,KAAK;8BAIL,KAAK;qBAIL,KAAK;2BAIL,KAAK;2BAIL,KAAK;0BAIL,KAAK;wBAKL,KAAK;2BAIL,MAAM;yBAEN,SAAS,SAAC,QAAQ;~~uBAwDlB~~,YAAY,SAAC,MAAM;;~~IAQrB~~,aAAC;CAAA,~~AAnKD~~,~~IAmKC~~;SAhHY,MAAM","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tViewChild,\n\tElementRef,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/*\n `ibm-select` provides a styled `select` component.\n \n [See demo](../../?path=/story/select--basic)\n \n Example:\n \n ```\n * <ibm-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n \t<option value=\"option2\">Option 2</option>\n \t<option value=\"option3\">Option 3</option>\n * </ibm-select>\n \t```\n \n * <example-url>../../iframe.html?id=select--basic</example-url>\n \n @export\n * @class Select\n * @implements {ControlValueAccessor}\n /\n@Component({\n\tselector: \"ibm-select\",\n\ttemplate: `\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label ngIf=\"skeleton\" [~~attr.~~for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label ngIf=\"!skeleton\" [~~attr.~~for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t\t\t<div ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\tngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t[data-invalid] ~ .bx--select__arrow {\n\t\t\tbottom: 2.25rem;\n\t\t}\n\t`],\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor {\n\t/\n\t Tracks the total number of selects instantiated. Used to generate unique IDs\n\t /\n\tstatic selectCount = 0;\n\n\t/\n\t `inline` or `default` select displays\n\t /\n\t@Input() display: \"inline\" \| \"default\" = \"default\";\n\t/\n\t Label for the select. Appears above the input.\n\t /\n\t@Input() label = ~~\"Select~~ ~~label\";\~~n\t/\n\t Optional helper text that appears under the label.\n\t /\n\t@Input() helperText: string;\n\t/\n\t Sets the invalid text.\n\t /\n\t@Input() invalidText: string \| TemplateRef<any>;\n\t/\n\t Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t /\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/\n\t Set to true to disable component.\n\t /\n\t@Input() disabled = false;\n\t/\n\t Set to true for a loading select.\n\t /\n\t@Input() skeleton = false;\n\t/\n\t Set to `true` for an invalid select component.\n\t /\n\t@Input() invalid = false;\n\n\t/\n\t `light` or `dark` select theme\n\t /\n\t@Input() theme: \"light\" \| \"dark\" = \"dark\";\n\t/\n\t emits the selected options `value`\n\t /\n\t@Output() selected = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\tget value() {\n\t\treturn this.select.nativeElement.value;\n\t}\n\n\tset value(v) {\n\t\tthis.select.nativeElement.value = v;\n\t}\n\n\t/\n\t Receives a value from the model.\n\t /\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/\n\t Registers a listener that notifies the model when the control updates\n\t /\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/\n\t Registers a listener that notifies the model when the control is blurred\n\t /\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/\n\t Sets the disabled state through the model\n\t /\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/\n\t Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t /\n\tonChange(event) {\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.selected.emit(event.target.value);\n\t}\n\n\t/\n\t placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t /\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n\n\t/\n\t Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"blur\")\n\tprotected blur() {\n\t\tthis.onTouchedHandler();\n\t}\n~~\n\tprotected isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t~~}\n~~}\n~~"]}
1	+ {"version":3,"file":"select.component.js","sourceRoot":"","sources":["../src/select/select.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAwB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH;IAAA;QA+DC;;WAEG;QACM,YAAO,GAAyB,SAAS,CAAC;QAanD;;WAEG;QACM,OAAE,GAAG,YAAU,MAAM,CAAC,WAAW,EAAI,CAAC;QAC/C;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,YAAO,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACM,UAAK,GAAqB,MAAM,CAAC;QAC1C;;WAEG;QACO,aAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;QAqDxC;;WAEG;QACO,oBAAe,GAAG,UAAC,CAAM,IAAO,CAAC,CAAC;QAClC,qBAAgB,GAAG,cAAQ,CAAC,CAAC;IASxC,CAAC;IA9DA,sBAAI,yBAAK;aAAT;YACC,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,CAAC;aAED,UAAU,CAAC;YACV,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC;QACrC,CAAC;;;OAJA;IAMD;;OAEG;IACH,2BAAU,GAAV,UAAW,GAAQ;QAClB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;IAClB,CAAC;IAED;;OAEG;IACH,iCAAgB,GAAhB,UAAiB,EAAO;QACvB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IACH,kCAAiB,GAAjB,UAAkB,EAAO;QACxB,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,iCAAgB,GAAhB,UAAiB,UAAmB;QACnC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACH,yBAAQ,GAAR,UAAS,KAAK;QACb,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAEM,2BAAU,GAAjB,UAAkB,KAAK;QACtB,OAAO,KAAK,YAAY,WAAW,CAAC;IACrC,CAAC;IAQD;;OAEG;IAEO,qBAAI,GADd;QAEC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IA9GD;;OAEG;IACI,kBAAW,GAAG,CAAC,CAAC;;gBA7DvB,SAAS,SAAC;oBACV,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE,25DAyCT;oBACD,MAAM,EAAE,CAAC,gFAIR,CAAC;oBACF,SAAS,EAAE;wBACV;4BACC,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,MAAM;4BACnB,KAAK,EAAE,IAAI;yBACX;qBACD;iBACD;;;0BAUC,KAAK;wBAIL,KAAK;6BAIL,KAAK;8BAIL,KAAK;qBAIL,KAAK;2BAIL,KAAK;2BAIL,KAAK;0BAIL,KAAK;wBAKL,KAAK;2BAIL,MAAM;yBAEN,SAAS,SAAC,QAAQ;uBA4DlB,YAAY,SAAC,MAAM;;IAIrB,aAAC;CAAA,AAzKD,IAyKC;SAhHY,MAAM","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tOutput,\n\tViewChild,\n\tElementRef,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/*\n `ibm-select` provides a styled `select` component.\n \n [See demo](../../?path=/story/select--basic)\n \n Example:\n \n ```\n * <ibm-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n \t<option value=\"option2\">Option 2</option>\n \t<option value=\"option3\">Option 3</option>\n * </ibm-select>\n \t```\n \n * <example-url>../../iframe.html?id=select--basic</example-url>\n \n @export\n * @class Select\n * @implements {ControlValueAccessor}\n /\n@Component({\n\tselector: \"ibm-select\",\n\ttemplate: `\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label ngIf=\"skeleton\" [for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label ngIf=\"!skeleton\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\tngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t[data-invalid] ~ .bx--select__arrow {\n\t\t\tbottom: 2.25rem;\n\t\t}\n\t`],\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor {\n\t/\n\t Tracks the total number of selects instantiated. Used to generate unique IDs\n\t /\n\tstatic selectCount = 0;\n\n\t/\n\t `inline` or `default` select displays\n\t /\n\t@Input() display: \"inline\" \| \"default\" = \"default\";\n\t/\n\t Label for the select. Appears above the input.\n\t /\n\t@Input() label: string \| TemplateRef<any>;\n\t/\n\t Optional helper text that appears under the label.\n\t /\n\t@Input() helperText: string \| TemplateRef<any>;\n\t/\n\t Sets the invalid text.\n\t /\n\t@Input() invalidText: string \| TemplateRef<any>;\n\t/\n\t Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t /\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/\n\t Set to true to disable component.\n\t /\n\t@Input() disabled = false;\n\t/\n\t Set to true for a loading select.\n\t /\n\t@Input() skeleton = false;\n\t/\n\t Set to `true` for an invalid select component.\n\t /\n\t@Input() invalid = false;\n\n\t/\n\t `light` or `dark` select theme\n\t /\n\t@Input() theme: \"light\" \| \"dark\" = \"dark\";\n\t/\n\t emits the selected options `value`\n\t /\n\t@Output() selected = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\tget value() {\n\t\treturn this.select.nativeElement.value;\n\t}\n\n\tset value(v) {\n\t\tthis.select.nativeElement.value = v;\n\t}\n\n\t/\n\t Receives a value from the model.\n\t /\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/\n\t Registers a listener that notifies the model when the control updates\n\t /\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/\n\t Registers a listener that notifies the model when the control is blurred\n\t /\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/\n\t Sets the disabled state through the model\n\t /\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/\n\t Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t /\n\tonChange(event) {\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.selected.emit(event.target.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/\n\t placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t /\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n\n\t/\n\t Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"blur\")\n\tprotected blur() {\n\t\tthis.onTouchedHandler();\n\t}\n}\n"]}

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

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"Select":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"ibm-select","template":"\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label ngIf=\"skeleton\" [~~attr.~~for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label ngIf=\"!skeleton\" [~~attr.~~for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t\t\t<div ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\tngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t","styles":["\n\t\t[data-invalid] ~ .bx--select__arrow {\n\t\t\tbottom: 2.25rem;\n\t\t}\n\t"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":79,"character":12},"useExisting":{"__symbolic":"reference","name":"Select"},"multi":true}]}]}],"members":{"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":2}}]}],"helperText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~102~~,"character":2}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~106~~,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~110~~,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~114~~,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~118~~,"character":2}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~122~~,"character":2}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~127~~,"character":2}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~131~~,"character":2}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":~~133~~,"character":2},"arguments":["select"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":~~189~~,"character":2},"arguments":["blur"]}]}]~~,"isTemplate":[{"__symbolic":"method"~~}]},"statics":{"selectCount":0}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"Select":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"ibm-select","template":"\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label ngIf=\"skeleton\" [for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label ngIf=\"!skeleton\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\tngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t","styles":["\n\t\t[data-invalid] ~ .bx--select__arrow {\n\t\t\tbottom: 2.25rem;\n\t\t}\n\t"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":85,"character":12},"useExisting":{"__symbolic":"reference","name":"Select"},"multi":true}]}]}],"members":{"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":2}}]}],"helperText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":2}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":2}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":2}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":2}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":2}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":139,"character":2},"arguments":["select"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"isTemplate":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":199,"character":2},"arguments":["blur"]}]}]},"statics":{"selectCount":0}}}}]

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

@@ -25,29 +25,35 @@
  * tslint:disable
  */
 import * as i0 from "@angular/core";
-import * as i1 from "../../../node_modules/@carbon/icons-angular/lib/warning--filled/16.ngfactory";
-import * as i2 from "@carbon/icons-angular/lib/warning--filled/16";
-import * as i3 from "../../../node_modules/@carbon/icons-angular/lib/chevron--down/16.ngfactory";
-import * as i4 from "@carbon/icons-angular/lib/chevron--down/16";
-import * as i5 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "../../../node_modules/@carbon/icons-angular/lib/warning--filled/16.ngfactory";
+import * as i3 from "@carbon/icons-angular/lib/warning--filled/16";
+import * as i4 from "../../../node_modules/@carbon/icons-angular/lib/chevron--down/16.ngfactory";
+import * as i5 from "@carbon/icons-angular/lib/chevron--down/16";
 import * as i6 from "@angular/forms";
 import * as i7 from "./select.component";
 var styles_Select = ["[data-invalid][_ngcontent-%COMP%]    ~ .bx--select__arrow[_ngcontent-%COMP%] {\n\t\t\tbottom: 2.25rem;\n\t\t}"];
 var RenderType_Select = i0.ɵcrt({ encapsulation: 0, styles: styles_Select, data: {} });
 export { RenderType_Select as RenderType_Select };
-function View_Select_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 0, "label", [["class", "bx--label bx--skeleton"]], [[1, "for", 0]], null, null, null, null))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; _ck(_v, 0, 0, currVal_0); }); }
-function View_Select_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "label", [["class", "bx--label"]], [[1, "for", 0]], null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; _ck(_v, 0, 0, currVal_0); var currVal_1 = _co.label; _ck(_v, 1, 0, currVal_1); }); }
-function View_Select_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "div", [["class", "bx--form__helper-text"]], null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.helperText; _ck(_v, 1, 0, currVal_0); }); }
-function View_Select_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-warning-filled16", [["class", "bx--select__invalid-icon"], ["style", "display: inherit;"]], null, null, null, i1.View_WarningFilled16_0, i1.RenderType_WarningFilled16)), i0.ɵdid(1, 49152, null, 0, i2.WarningFilled16, [], null, null)], null, null); }
-function View_Select_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-chevron-down16", [["class", "bx--select__arrow"], ["style", "display: inherit;"]], null, null, null, i3.View_ChevronDown16_0, i3.RenderType_ChevronDown16)), i0.ɵdid(1, 49152, null, 0, i4.ChevronDown16, [], null, null)], null, null); }
-function View_Select_7(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }); }
+function View_Select_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 0, "label", [["class", "bx--label bx--skeleton"]], [[8, "htmlFor", 0]], null, null, null, null))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; _ck(_v, 0, 0, currVal_0); }); }
+function View_Select_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }); }
+function View_Select_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
+function View_Select_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_5)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_Select_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 4, "label", [["class", "bx--label"]], [[8, "htmlFor", 0]], null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_3)), i0.ɵdid(2, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_4)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_1 = !_co.isTemplate(_co.label); _ck(_v, 2, 0, currVal_1); var currVal_2 = _co.isTemplate(_co.label); _ck(_v, 4, 0, currVal_2); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.id; _ck(_v, 0, 0, currVal_0); }); }
+function View_Select_7(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.helperText; _ck(_v, 1, 0, currVal_0); }); }
 function View_Select_9(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
-function View_Select_8(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_9)), i0.ɵdid(1, 540672, null, 0, i5.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }, null); }
-function View_Select_6(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 4, "div", [["class", "bx--form-requirement"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_7)), i0.ɵdid(2, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_8)), i0.ɵdid(4, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.isTemplate(_co.invalidText); _ck(_v, 2, 0, currVal_0); var currVal_1 = _co.isTemplate(_co.invalidText); _ck(_v, 4, 0, currVal_1); }, null); }
-export function View_Select_0(_l) { return i0.ɵvid(0, [i0.ɵqud(402653184, 1, { select: 0 }), (_l()(), i0.ɵeld(1, 0, null, null, 18, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 17, "div", [["class", "bx--select"], ["style", "width: 100%"]], null, null, null, null, null)), i0.ɵdid(3, 278528, null, 0, i5.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(4, { "bx--select--inline": 0, "bx--select--light": 1, "bx--skeleton": 2 }), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_1)), i0.ɵdid(6, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_2)), i0.ɵdid(8, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_3)), i0.ɵdid(10, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(11, 0, null, null, 6, "div", [["class", "bx--select-input__wrapper"]], [[1, "data-invalid", 0]], null, null, null, null)), (_l()(), i0.ɵeld(12, 0, [[1, 0], ["select", 1]], null, 1, "select", [["class", "bx--select-input"]], [[1, "id", 0], [8, "disabled", 0]], [[null, "change"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("change" === en)) {
+function View_Select_8(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_9)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.helperText; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_Select_6(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 4, "div", [["class", "bx--form__helper-text"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_7)), i0.ɵdid(2, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_8)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.isTemplate(_co.helperText); _ck(_v, 2, 0, currVal_0); var currVal_1 = _co.isTemplate(_co.helperText); _ck(_v, 4, 0, currVal_1); }, null); }
+function View_Select_10(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-warning-filled16", [["class", "bx--select__invalid-icon"], ["style", "display: inherit;"]], null, null, null, i2.View_WarningFilled16_0, i2.RenderType_WarningFilled16)), i0.ɵdid(1, 49152, null, 0, i3.WarningFilled16, [], null, null)], null, null); }
+function View_Select_11(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "ibm-icon-chevron-down16", [["class", "bx--select__arrow"], ["style", "display: inherit;"]], null, null, null, i4.View_ChevronDown16_0, i4.RenderType_ChevronDown16)), i0.ɵdid(1, 49152, null, 0, i5.ChevronDown16, [], null, null)], null, null); }
+function View_Select_13(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }); }
+function View_Select_15(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
+function View_Select_14(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_15)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.invalidText; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_Select_12(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 4, "div", [["class", "bx--form-requirement"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_13)), i0.ɵdid(2, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_14)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.isTemplate(_co.invalidText); _ck(_v, 2, 0, currVal_0); var currVal_1 = _co.isTemplate(_co.invalidText); _ck(_v, 4, 0, currVal_1); }, null); }
+export function View_Select_0(_l) { return i0.ɵvid(0, [i0.ɵqud(402653184, 1, { select: 0 }), (_l()(), i0.ɵeld(1, 0, null, null, 18, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 17, "div", [["class", "bx--select"], ["style", "width: 100%"]], null, 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--select--inline": 0, "bx--select--light": 1, "bx--skeleton": 2 }), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_1)), i0.ɵdid(6, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_2)), i0.ɵdid(8, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_6)), i0.ɵdid(10, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(11, 0, null, null, 6, "div", [["class", "bx--select-input__wrapper"]], [[1, "data-invalid", 0]], null, null, null, null)), (_l()(), i0.ɵeld(12, 0, [[1, 0], ["select", 1]], null, 1, "select", [["class", "bx--select-input"]], [[1, "id", 0], [8, "disabled", 0]], [[null, "change"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("change" === en)) {
         var pd_0 = (_co.onChange($event) !== false);
         ad = (pd_0 && ad);
-    } return ad; }, null, null)), i0.ɵncd(null, 0), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_4)), i0.ɵdid(15, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_5)), i0.ɵdid(17, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_6)), i0.ɵdid(19, 16384, null, 0, i5.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = "bx--select"; var currVal_1 = _ck(_v, 4, 0, (_co.display === "inline"), (_co.theme === "light"), _co.skeleton); _ck(_v, 3, 0, currVal_0, currVal_1); var currVal_2 = _co.skeleton; _ck(_v, 6, 0, currVal_2); var currVal_3 = !_co.skeleton; _ck(_v, 8, 0, currVal_3); var currVal_4 = _co.helperText; _ck(_v, 10, 0, currVal_4); var currVal_8 = (!_co.skeleton && _co.invalid); _ck(_v, 15, 0, currVal_8); var currVal_9 = !_co.skeleton; _ck(_v, 17, 0, currVal_9); var currVal_10 = _co.invalid; _ck(_v, 19, 0, currVal_10); }, function (_ck, _v) { var _co = _v.component; var currVal_5 = (_co.invalid ? true : null); _ck(_v, 11, 0, currVal_5); var currVal_6 = _co.id; var currVal_7 = _co.disabled; _ck(_v, 12, 0, currVal_6, currVal_7); }); }
+    } return ad; }, null, null)), i0.ɵncd(null, 0), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_10)), i0.ɵdid(15, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_11)), i0.ɵdid(17, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Select_12)), i0.ɵdid(19, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = "bx--select"; var currVal_1 = _ck(_v, 4, 0, (_co.display === "inline"), (_co.theme === "light"), _co.skeleton); _ck(_v, 3, 0, currVal_0, currVal_1); var currVal_2 = _co.skeleton; _ck(_v, 6, 0, currVal_2); var currVal_3 = !_co.skeleton; _ck(_v, 8, 0, currVal_3); var currVal_4 = _co.helperText; _ck(_v, 10, 0, currVal_4); var currVal_8 = (!_co.skeleton && _co.invalid); _ck(_v, 15, 0, currVal_8); var currVal_9 = !_co.skeleton; _ck(_v, 17, 0, currVal_9); var currVal_10 = _co.invalid; _ck(_v, 19, 0, currVal_10); }, function (_ck, _v) { var _co = _v.component; var currVal_5 = (_co.invalid ? true : null); _ck(_v, 11, 0, currVal_5); var currVal_6 = _co.id; var currVal_7 = _co.disabled; _ck(_v, 12, 0, currVal_6, currVal_7); }); }
 export function View_Select_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-select", [], null, [[null, "blur"]], function (_v, en, $event) { var ad = true; if (("blur" === en)) {
         var pd_0 = (i0.ɵnov(_v, 2).blur() !== false);
         ad = (pd_0 && ad);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"select.component.ngfactory.js","sourceRoot":"","sources":["../src/select/select.component.ngfactory.ts","../src/select/select.component.ts.Select.html"],"names":[],"mappings":";;;;;;;;;;;;;;;;;iDCUI,~~4HAAuE~~,~~wDAA/C~~,~~mBAAe~~,~~KAAvC~~,~~YAAuE~~,~~EAA/C~~,~~SAAe~~;~~iDACvC,+GAA2D~~,KAAA,~~gCAAS~~,~~yDAA3C~~,~~mBAAe~~,~~KAAxC~~,~~YAA2D~~,~~EAAlC~~,~~SAAe~~,~~GAAmB~~,~~kDAAS~~;~~iDACpE~~,~~8GAAsD~~,KAAA,gJAAc;~~iDAUnE~~,sRAG2B;~~iDAE3B~~,uQAA+F;~~iDAG~~/F,6EAA+C,KAAA,iJAAe;;~~iDAC9D~~,~~2LAA8E~~,sFAAjC,mBAAgC,cAA7E,YAA8E,EAAjC,SAAgC;~~iDAF9E~~,6GAAkD,KACjD,~~sKAA~~+C,IAC/C,~~sKAA8E~~,iDADhE,mCAAgC,eAA9C,YAA+C,EAAjC,SAAgC,GACjC,kCAA+B,eAA5C,YAA8E,EAAjE,SAA+B;~~8FA9B~~/C,uGAA2B,KAC1B,uSAOqB,GANpB,+EAIE,MAGF,~~sKAAuE~~,~~IACvE~~,~~sKAA2D~~,~~IAC3D~~,uKAAsD,~~IACtD~~,uIAAqF,KACpF,mNAK0B,YADzB;;wBAA2B;MAJ5B,wBAK0B,IACzB,eAAY,IAEb,~~uKAG2B~~,IAE3B,~~uKAA~~+F,IAEhG,~~uKAAkD~~,~~iDArBlD~~,4BAAkB,EALlB,sFAIE,YALH,YAOqB,EADpB,SAAkB,EALlB,SAIE,GAGK,mBAAgB,WAAvB,~~YAAuE~~,~~EAAhE~~,SAAgB,GAChB,oBAAiB,WAAxB,~~YAA2D~~,~~EAApD~~,SAAiB,~~GACnB~~,mBAAkB,aAAvB,aAAsD,EAAjD,SAAkB,~~GAWrB~~,qCAA4B,WAD7B,aAG2B,EAF1B,SAA4B,GAIJ,oBAAiB,WAA1C,aAA+F,EAAtE,SAAiB,GAEtC,oBAAe,UAApB,aAAkD,EAA7C,UAAe,mDAhBmB,0CAA6C,GAApF,aAAqF,EAA9C,SAA6C,GAGlF,mBAAc,KACd,mBAAqB,WAHtB,aAK0B,EAHzB,SAAc,EACd,SAAqB","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label ngIf=\"skeleton\" [~~attr.~~for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label ngIf=\"!skeleton\" [~~attr.~~for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t\t\t<div ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\tngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t"]}
1	+ {"version":3,"file":"select.component.ngfactory.js","sourceRoot":"","sources":["../src/select/select.component.ngfactory.ts","../src/select/select.component.ts.Select.html"],"names":[],"mappings":";;;;;;;;;;;;;;;;;iDCUI,gIAAkE,wDAA1C,mBAAU,KAAlC,YAAkE,EAA1C,SAAU;iDAEjC,6EAAyC,KAAA,2IAAS;;iDAClD,2LAAkE,sFAA3B,mBAA0B,QAAjE,YAAkE,EAA3B,SAA0B;iDAFlE,mHAAsD,KACrD,sKAAyC,IACzC,sKAAkE,iDADpD,mCAA0B,SAAxC,YAAyC,EAA3B,SAA0B,GAC3B,kCAAyB,SAAtC,YAAkE,EAArD,SAAyB,mDAFd,mBAAU,KAAnC,YAAsD,EAA7B,SAAU;iDAKlC,6EAA8C,KAAA,gJAAc;;iDAC5D,2LAA4E,sFAAhC,mBAA+B,aAA3E,YAA4E,EAAhC,SAA+B;iDAF5E,8GAAsD,KACrD,sKAA8C,IAC9C,sKAA4E,iDAD9D,mCAA+B,cAA7C,YAA8C,EAAhC,SAA+B,GAChC,kCAA8B,cAA3C,YAA4E,EAA/D,SAA8B;kDAW3C,sRAG2B;kDAE3B,uQAA+F;kDAG/F,6EAA+C,KAAA,iJAAe;;kDAC9D,4LAA8E,sFAAjC,mBAAgC,cAA7E,YAA8E,EAAjC,SAAgC;kDAF9E,6GAAkD,KACjD,uKAA+C,IAC/C,uKAA8E,iDADhE,mCAAgC,eAA9C,YAA+C,EAAjC,SAAgC,GACjC,kCAA+B,eAA5C,YAA8E,EAAjE,SAA+B;8FApC/C,uGAA2B,KAC1B,uSAOqB,GANpB,+EAIE,MAGF,sKAAkE,IAClE,sKAAsD,IAItD,uKAAsD,IAItD,uIAAqF,KACpF,mNAK0B,YADzB;;wBAA2B;MAJ5B,wBAK0B,IACzB,eAAY,IAEb,wKAG2B,IAE3B,wKAA+F,IAEhG,wKAAkD,iDA3BlD,4BAAkB,EALlB,sFAIE,YALH,YAOqB,EADpB,SAAkB,EALlB,SAIE,GAGK,mBAAgB,WAAvB,YAAkE,EAA3D,SAAgB,GAChB,oBAAiB,WAAxB,YAAsD,EAA/C,SAAiB,GAInB,mBAAkB,aAAvB,aAAsD,EAAjD,SAAkB,GAcrB,qCAA4B,WAD7B,aAG2B,EAF1B,SAA4B,GAIJ,oBAAiB,WAA1C,aAA+F,EAAtE,SAAiB,GAEtC,oBAAe,UAApB,aAAkD,EAA7C,UAAe,mDAhBmB,0CAA6C,GAApF,aAAqF,EAA9C,SAA6C,GAGlF,mBAAc,KACd,mBAAqB,WAHtB,aAK0B,EAHzB,SAAc,EACd,SAAqB","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label ngIf=\"skeleton\" [for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label ngIf=\"!skeleton\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\tngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t"]}

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

	@@ -1 +1 @@
1	- {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"helperText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":["select"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["blur"]}]}]~~,"isTemplate":[{"__symbolic":"method"~~}]},"statics":{"selectCount":0}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]},"isComponent":true,"selector":"ibm-select","exportAs":null,"inputs":{"display":"display","label":"label","helperText":"helperText","invalidText":"invalidText","id":"id","disabled":"disabled","skeleton":"skeleton","invalid":"invalid","theme":"theme"},"outputs":{"selected":"selected"},"hostListeners":{"blur":"blur()"},"hostProperties":{},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":5,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":0,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[],"guards":{},"viewQueries":[{"selectors":[{"value":"select"}],"first":true,"descendants":true,"propertyName":"select","read":null}],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*"],"encapsulation":0},"componentViewType":{"__symbol":6,"members":[]},"rendererType":{"__symbol":7,"members":[]},"componentFactory":{"__symbol":8,"members":[]}}}],"symbols":[{"__symbol":0,"name":"Select","filePath":"./select.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"Output","filePath":"@angular/core"},{"__symbol":3,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":4,"name":"HostListener","filePath":"@angular/core"},{"__symbol":5,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":6,"name":"View_Select_0","filePath":"./select.component.ngfactory"},{"__symbol":7,"name":"RenderType_Select","filePath":"./select.component.ngfactory"},{"__symbol":8,"name":"SelectNgFactory","filePath":"./select.component.ngfactory"}]}
1	+ {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"helperText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalidText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":["select"]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"isTemplate":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":["blur"]}]}]},"statics":{"selectCount":0}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]},"isComponent":true,"selector":"ibm-select","exportAs":null,"inputs":{"display":"display","label":"label","helperText":"helperText","invalidText":"invalidText","id":"id","disabled":"disabled","skeleton":"skeleton","invalid":"invalid","theme":"theme"},"outputs":{"selected":"selected"},"hostListeners":{"blur":"blur()"},"hostProperties":{},"hostAttributes":{},"providers":[{"token":{"identifier":{"reference":{"__symbol":5,"members":[]}}},"useClass":null,"useFactory":null,"useExisting":{"identifier":{"reference":{"__symbol":0,"members":[]}}},"multi":true}],"viewProviders":[],"queries":[],"guards":{},"viewQueries":[{"selectors":[{"value":"select"}],"first":true,"descendants":true,"propertyName":"select","read":null}],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*"],"encapsulation":0},"componentViewType":{"__symbol":6,"members":[]},"rendererType":{"__symbol":7,"members":[]},"componentFactory":{"__symbol":8,"members":[]}}}],"symbols":[{"__symbol":0,"name":"Select","filePath":"./select.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"Output","filePath":"@angular/core"},{"__symbol":3,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":4,"name":"HostListener","filePath":"@angular/core"},{"__symbol":5,"name":"NG_VALUE_ACCESSOR","filePath":"@angular/forms"},{"__symbol":6,"name":"View_Select_0","filePath":"./select.component.ngfactory"},{"__symbol":7,"name":"RenderType_Select","filePath":"./select.component.ngfactory"},{"__symbol":8,"name":"SelectNgFactory","filePath":"./select.component.ngfactory"}]}

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

@@ -18,7 +18,7 @@
  */
-import { EventEmitter, AfterViewInit, OnDestroy, ElementRef } from "@angular/core";
+import { EventEmitter, AfterViewInit, OnDestroy, ElementRef, TemplateRef } from "@angular/core";
 import { Subscription } from "rxjs";
 import { ControlValueAccessor } from "@angular/forms";
 /**
@@ -81,6 +81,8 @@ export declare class Slider implements AfterViewInit, OnDestroy, ControlValueAcc
     shiftMultiplier: number;
     /** Set to `true` for a loading slider */
     skeleton: boolean;
+    /** Sets the text inside the `label` tag */
+    label: string | TemplateRef<any>;
     /** Set to `true` for a slider without arrow key interactions. */
     disableArrowKeys: boolean;
     /** Disables the range visually and functionally */
@@ -150,4 +152,5 @@ export declare class Slider implements AfterViewInit, OnDestroy, ControlValueAcc
     onMouseUp(): void;
     /** Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown */
     onKeyDown(event: KeyboardEvent): void;
+    isTemplate(value: any): boolean;
 }

package/slider/slider.component.js CHANGED Viewed

@@ -18,7 +18,7 @@
  */
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef } from "@angular/core";
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef } from "@angular/core";
 import { fromEvent } from "rxjs";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 /**
@@ -283,12 +283,15 @@ var Slider = /** @class */ (function () {
             this.incrementValue(multiplier);
         }
     };
+    Slider.prototype.isTemplate = function (value) {
+        return value instanceof TemplateRef;
+    };
     /** Used to generate unique IDs */
     Slider.count = 0;
     Slider.decorators = [
         { type: Component, args: [{
                     selector: "ibm-slider",
-                    template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t<div\n\t\t\t\t\t#thumb\n\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() * 100}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#track\n\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\t#range\n\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t</div>\n\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-template>\n\t",
+                    template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label for=\"slider\" class=\"bx--label\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div class=\"bx--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumb\n\t\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() * 100}\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t",
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -310,10 +313,11 @@ var Slider = /** @class */ (function () {
         id: [{ type: Input }],
         shiftMultiplier: [{ type: Input }],
         skeleton: [{ type: Input }],
+        label: [{ type: Input }],
         disableArrowKeys: [{ type: Input }],
         disabled: [{ type: Input }],
         valueChange: [{ type: Output }],
-        hostClass: [{ type: HostBinding, args: ["class.bx--slider-container",] }],
+        hostClass: [{ type: HostBinding, args: ["class.bx--form-item",] }],
         thumb: [{ type: ViewChild, args: ["thumb",] }],
         track: [{ type: ViewChild, args: ["track",] }],
         range: [{ type: ViewChild, args: ["range",] }]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.component.js","sourceRoot":"","sources":["../src/slider/slider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tOnDestroy,\n\tViewChild,\n\tElementRef\n} from \"@angular/core\";\nimport { fromEvent, Subscription } from \"rxjs\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/*\n Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n \n [See demo](../../?path=/story/slider--advanced)\n \n The simplest possible slider usage looks something like:\n * ```html\n * <ibm-slider></ibm-slider>\n * ```\n \n That will render a slider without labels or alternative value input. Labels can be provided by\n * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\n * for use as an alternative value field.\n \n ex:\n * ```html\n * <!-- full example -->\n * <ibm-slider>\n \t\t<span minLabel>0GB</span>\n \t\t<span maxLabel>100GB</span>\n \t\t<input/>\n \t</ibm-slider>\n * <!-- with just an input -->\n * <ibm-slider>\n \t\t<input/>\n \t</ibm-slider>\n * <!-- with just one label -->\n * <ibm-slider>\n \t\t<span maxLabel>Maximum</span>\n \t</ibm-slider>\n * ```\n \n Slider supports `NgModel` by default, as well as two way binding to the `value` input.\n \n <example-url>../../iframe.html?id=slider--advanced</example-url>\n \n @export\n * @class Slider\n * @implements {AfterViewInit}\n * @implements {OnDestroy}\n * @implements {ControlValueAccessor}\n /\n@Component({\n\tselector: \"ibm-slider\",\n\ttemplate: `\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t<div\n\t\t\t\t\t#thumb\n\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() * 100}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#track\n\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\t#range\n\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t</div>\n\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Slider,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Slider implements AfterViewInit, OnDestroy, ControlValueAccessor {\n\t/** Used to generate unique IDs /\n\tprivate static count = 0;\n\t/* The lower bound of our range /\n\t@Input() min = 0;\n\t/* The upper bound of our range /\n\t@Input() max = 100;\n\t/* The interval for our range /\n\t@Input() step = 1;\n\t/* Set the initial value. Available for two way binding /\n\t@Input() set value(v) {\n\t\tif (v > this.max) {\n\t\t\tv = this.max;\n\t\t}\n\n\t\tif (v < this.min) {\n\t\t\tv = this.min;\n\t\t}\n\n\t\tthis._value = v;\n\t\tthis.slidAmount = this.convertToPx(v);\n\n\t\tif (this.input) {\n\t\t\tthis.input.value = v.toString();\n\t\t}\n\n\t\tthis.propagateChange(v);\n\t\tthis.valueChange.emit(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/* Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively /\n\t@Input() id = `slider-${Slider.count++}`;\n\t/* Value used to \"multiply\" the `step` when using arrow keys to select values /\n\t@Input() shiftMultiplier = 4;\n\t/* Set to `true` for a loading slider /\n\t@Input() skeleton = false;\n\t/* Set to `true` for a slider without arrow key interactions. /\n\t@Input() disableArrowKeys = false;\n\t/* Disables the range visually and functionally /\n\t@Input() set disabled(v) {\n\t\tthis._disabled = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst input = this.elementRef.nativeElement.querySelector(\"input:not([type=range])\");\n\t\tif (input) {\n\t\t\tinput.disabled = v;\n\t\t}\n\t}\n\n\tget disabled() {\n\t\treturn this._disabled;\n\t}\n\t/* Emits every time a new value is selected /\n\t@Output() valueChange: EventEmitter<number> = new EventEmitter();\n\t@HostBinding(\"class.bx--slider-container\") hostClass = true;\n\t@ViewChild(\"thumb\") thumb: ElementRef;\n\t@ViewChild(\"track\") track: ElementRef;\n\t@ViewChild(\"range\") range: ElementRef;\n\n\tpublic bottomRangeId = `${this.id}-bottom-range`;\n\tpublic topRangeId = `${this.id}-top-range`;\n\n\tprotected isMouseDown = false;\n\t/* Array of event subscriptions so we can batch unsubscribe in `ngOnDestroy` /\n\tprotected eventSubscriptions: Array<Subscription> = [];\n\tprotected slidAmount = 0;\n\tprotected input: HTMLInputElement;\n\tprotected _value = this.min;\n\tprotected _disabled = false;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\t// bind mousemove and mouseup to the document so we don't have issues tracking the mouse\n\t\tthis.eventSubscriptions.push(fromEvent(document, \"mousemove\").subscribe(this.onMouseMove.bind(this)));\n\t\tthis.eventSubscriptions.push(fromEvent(document, \"mouseup\").subscribe(this.onMouseUp.bind(this)));\n\n\t\t// apply any values we got from before the view initialized\n\t\tthis.value = this.value;\n\n\t\t// TODO: ontouchstart/ontouchmove/ontouchend\n\n\t\t// set up the optional input\n\t\tthis.input = this.elementRef.nativeElement.querySelector(\"input:not([type=range])\");\n\t\tif (this.input) {\n\t\t\tthis.input.type = \"number\";\n\t\t\tthis.input.classList.add(\"bx--slider-text-input\");\n\t\t\tthis.input.classList.add(\"bx--text-input\");\n\t\t\tthis.input.setAttribute(\"aria-labelledby\", `${this.bottomRangeId} ${this.topRangeId}`);\n\t\t\tthis.input.value = this.value.toString();\n\t\t\t// bind events on our optional input\n\t\t\tthis.eventSubscriptions.push(fromEvent(this.input, \"change\").subscribe(this.onChange.bind(this)));\n\t\t\tthis.eventSubscriptions.push(fromEvent(this.input, \"focus\").subscribe(this.onFocus.bind(this)));\n\t\t}\n\t}\n\n\t/* Clean up our DOMEvent subscriptions /\n\tngOnDestroy() {\n\t\tthis.eventSubscriptions.forEach(subscription => {\n\t\t\tsubscription.unsubscribe();\n\t\t});\n\t}\n\n\t/* Send changes back to the model /\n\tpropagateChange = (_: any) => { };\n\n\t/* Register a change propagation function for `ControlValueAccessor` /\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/* Callback to notify the model when our input has been touched /\n\tonTouched: () => any = () => { };\n\n\t/* Register a callback to notify when our input has been touched /\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/* Receives a value from the model /\n\twriteValue(v: any) {\n\t\tthis.value = v;\n\t}\n\n\t/* Returns the amount of \"completeness\" as a fraction of the total track width /\n\tgetFractionComplete() {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\treturn this.slidAmount / trackWidth;\n\t}\n\n\t/* Helper function to return the CSS transform `scaleX` function /\n\tscaleX(complete) {\n\t\treturn `scaleX(${complete})`;\n\t}\n\n\t/* Converts a given px value to a \"real\" value in our range /\n\tconvertToValue(pxAmount) {\n\t\t// basic concept borrowed from carbon-components\n\t\t// ref: https://github.com/IBM/carbon-components/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151\n\t\tconst range = this.max - this.min;\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tconst unrounded = pxAmount / trackWidth;\n\t\tconst rounded = Math.round((range unrounded) / this.step) * this.step;\n\t\treturn rounded + this.min;\n\t}\n\n\t/** Converts a given \"real\" value to a px value we can update the view with /\n\tconvertToPx(value) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tif (value >= this.max) {\n\t\t\treturn trackWidth;\n\t\t}\n\n\t\tif (value <= this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn Math.round(trackWidth (value / this.max));\n\t}\n\n\t/*\n\t Increments the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t \n\t @argument multiplier Defaults to `1`, multiplied with the step value.\n\t /\n\tincrementValue(multiplier = 1) {\n\t\tthis.value = this.value + (this.step multiplier);\n\t}\n\n\t/*\n\t Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t \n\t @argument multiplier Defaults to `1`, multiplied with the step value.\n\t /\n\tdecrementValue(multiplier = 1) {\n\t\tthis.value = this.value - (this.step multiplier);\n\t}\n\n\t/** Change handler for the optional input /\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t}\n\n\t/* Handles clicks on the range track, and setting the value to it's \"real\" equivalent /\n\tonClick(event) {\n\t\tif (this.disabled) { return; }\n\t\tconst trackLeft = this.track.nativeElement.getBoundingClientRect().left;\n\t\tthis.value = this.convertToValue(event.clientX - trackLeft);\n\t}\n\n\t/* Focus handler for the optional input /\n\tonFocus({target}) {\n\t\ttarget.select();\n\t}\n\n\t/* Mouse move handler. Responsible for updating the value and visual selection based on mouse movement /\n\tonMouseMove(event) {\n\t\tif (this.disabled \|\| !this.isMouseDown) { return; }\n\t\tconst track = this.track.nativeElement.getBoundingClientRect();\n\t\tif (\n\t\t\tevent.clientX - track.left <= track.width\n\t\t\t&& event.clientX - track.left >= 0\n\t\t) {\n\t\t\tthis.slidAmount = event.clientX - track.left;\n\t\t}\n\t\tthis.value = this.convertToValue(this.slidAmount);\n\t}\n\n\t/* Enables the `onMouseMove` handler /\n\tonMouseDown(event) {\n\t\tevent.preventDefault();\n\t\tif (this.disabled) { return; }\n\t\tthis.thumb.nativeElement.focus();\n\t\tthis.isMouseDown = true;\n\t}\n\n\t/* Disables the `onMouseMove` handler /\n\tonMouseUp() {\n\t\tthis.isMouseDown = false;\n\t}\n\n\t/* Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown */\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.disableArrowKeys) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tconst multiplier = event.shiftKey ? this.shiftMultiplier : 1;\n\t\tif (event.key === \"ArrowLeft\" \|\| event.key === \"ArrowDown\") {\n\t\t\tthis.decrementValue(multiplier);\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\" \|\| event.key === \"ArrowUp\") {\n\t\t\tthis.incrementValue(multiplier);\n\t\t}\n\t}\n}\n"]}
1	+ {"version":3,"file":"slider.component.js","sourceRoot":"","sources":["../src/slider/slider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tOnDestroy,\n\tViewChild,\n\tElementRef,\n\tTemplateRef\n} from \"@angular/core\";\nimport { fromEvent, Subscription } from \"rxjs\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/*\n Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n \n [See demo](../../?path=/story/slider--advanced)\n \n The simplest possible slider usage looks something like:\n * ```html\n * <ibm-slider></ibm-slider>\n * ```\n \n That will render a slider without labels or alternative value input. Labels can be provided by\n * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\n * for use as an alternative value field.\n \n ex:\n * ```html\n * <!-- full example -->\n * <ibm-slider>\n \t\t<span minLabel>0GB</span>\n \t\t<span maxLabel>100GB</span>\n \t\t<input/>\n \t</ibm-slider>\n * <!-- with just an input -->\n * <ibm-slider>\n \t\t<input/>\n \t</ibm-slider>\n * <!-- with just one label -->\n * <ibm-slider>\n \t\t<span maxLabel>Maximum</span>\n \t</ibm-slider>\n * ```\n \n Slider supports `NgModel` by default, as well as two way binding to the `value` input.\n \n <example-url>../../iframe.html?id=slider--advanced</example-url>\n \n @export\n * @class Slider\n * @implements {AfterViewInit}\n * @implements {OnDestroy}\n * @implements {ControlValueAccessor}\n /\n@Component({\n\tselector: \"ibm-slider\",\n\ttemplate: `\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label for=\"slider\" class=\"bx--label\">\n\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div class=\"bx--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumb\n\t\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() * 100}\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Slider,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Slider implements AfterViewInit, OnDestroy, ControlValueAccessor {\n\t/** Used to generate unique IDs /\n\tprivate static count = 0;\n\t/* The lower bound of our range /\n\t@Input() min = 0;\n\t/* The upper bound of our range /\n\t@Input() max = 100;\n\t/* The interval for our range /\n\t@Input() step = 1;\n\t/* Set the initial value. Available for two way binding /\n\t@Input() set value(v) {\n\t\tif (v > this.max) {\n\t\t\tv = this.max;\n\t\t}\n\n\t\tif (v < this.min) {\n\t\t\tv = this.min;\n\t\t}\n\n\t\tthis._value = v;\n\t\tthis.slidAmount = this.convertToPx(v);\n\n\t\tif (this.input) {\n\t\t\tthis.input.value = v.toString();\n\t\t}\n\n\t\tthis.propagateChange(v);\n\t\tthis.valueChange.emit(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/* Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively /\n\t@Input() id = `slider-${Slider.count++}`;\n\t/* Value used to \"multiply\" the `step` when using arrow keys to select values /\n\t@Input() shiftMultiplier = 4;\n\t/* Set to `true` for a loading slider /\n\t@Input() skeleton = false;\n\t/* Sets the text inside the `label` tag /\n\t@Input() label: string \| TemplateRef<any>;\n\t/* Set to `true` for a slider without arrow key interactions. /\n\t@Input() disableArrowKeys = false;\n\t/* Disables the range visually and functionally /\n\t@Input() set disabled(v) {\n\t\tthis._disabled = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst input = this.elementRef.nativeElement.querySelector(\"input:not([type=range])\");\n\t\tif (input) {\n\t\t\tinput.disabled = v;\n\t\t}\n\t}\n\n\tget disabled() {\n\t\treturn this._disabled;\n\t}\n\t/* Emits every time a new value is selected /\n\t@Output() valueChange: EventEmitter<number> = new EventEmitter();\n\t@HostBinding(\"class.bx--form-item\") hostClass = true;\n\t@ViewChild(\"thumb\") thumb: ElementRef;\n\t@ViewChild(\"track\") track: ElementRef;\n\t@ViewChild(\"range\") range: ElementRef;\n\n\tpublic bottomRangeId = `${this.id}-bottom-range`;\n\tpublic topRangeId = `${this.id}-top-range`;\n\n\tprotected isMouseDown = false;\n\t/* Array of event subscriptions so we can batch unsubscribe in `ngOnDestroy` /\n\tprotected eventSubscriptions: Array<Subscription> = [];\n\tprotected slidAmount = 0;\n\tprotected input: HTMLInputElement;\n\tprotected _value = this.min;\n\tprotected _disabled = false;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\t// bind mousemove and mouseup to the document so we don't have issues tracking the mouse\n\t\tthis.eventSubscriptions.push(fromEvent(document, \"mousemove\").subscribe(this.onMouseMove.bind(this)));\n\t\tthis.eventSubscriptions.push(fromEvent(document, \"mouseup\").subscribe(this.onMouseUp.bind(this)));\n\n\t\t// apply any values we got from before the view initialized\n\t\tthis.value = this.value;\n\n\t\t// TODO: ontouchstart/ontouchmove/ontouchend\n\n\t\t// set up the optional input\n\t\tthis.input = this.elementRef.nativeElement.querySelector(\"input:not([type=range])\");\n\t\tif (this.input) {\n\t\t\tthis.input.type = \"number\";\n\t\t\tthis.input.classList.add(\"bx--slider-text-input\");\n\t\t\tthis.input.classList.add(\"bx--text-input\");\n\t\t\tthis.input.setAttribute(\"aria-labelledby\", `${this.bottomRangeId} ${this.topRangeId}`);\n\t\t\tthis.input.value = this.value.toString();\n\t\t\t// bind events on our optional input\n\t\t\tthis.eventSubscriptions.push(fromEvent(this.input, \"change\").subscribe(this.onChange.bind(this)));\n\t\t\tthis.eventSubscriptions.push(fromEvent(this.input, \"focus\").subscribe(this.onFocus.bind(this)));\n\t\t}\n\t}\n\n\t/* Clean up our DOMEvent subscriptions /\n\tngOnDestroy() {\n\t\tthis.eventSubscriptions.forEach(subscription => {\n\t\t\tsubscription.unsubscribe();\n\t\t});\n\t}\n\n\t/* Send changes back to the model /\n\tpropagateChange = (_: any) => { };\n\n\t/* Register a change propagation function for `ControlValueAccessor` /\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/* Callback to notify the model when our input has been touched /\n\tonTouched: () => any = () => { };\n\n\t/* Register a callback to notify when our input has been touched /\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/* Receives a value from the model /\n\twriteValue(v: any) {\n\t\tthis.value = v;\n\t}\n\n\t/* Returns the amount of \"completeness\" as a fraction of the total track width /\n\tgetFractionComplete() {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\treturn this.slidAmount / trackWidth;\n\t}\n\n\t/* Helper function to return the CSS transform `scaleX` function /\n\tscaleX(complete) {\n\t\treturn `scaleX(${complete})`;\n\t}\n\n\t/* Converts a given px value to a \"real\" value in our range /\n\tconvertToValue(pxAmount) {\n\t\t// basic concept borrowed from carbon-components\n\t\t// ref: https://github.com/IBM/carbon-components/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151\n\t\tconst range = this.max - this.min;\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tconst unrounded = pxAmount / trackWidth;\n\t\tconst rounded = Math.round((range unrounded) / this.step) * this.step;\n\t\treturn rounded + this.min;\n\t}\n\n\t/** Converts a given \"real\" value to a px value we can update the view with /\n\tconvertToPx(value) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tif (value >= this.max) {\n\t\t\treturn trackWidth;\n\t\t}\n\n\t\tif (value <= this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn Math.round(trackWidth (value / this.max));\n\t}\n\n\t/*\n\t Increments the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t \n\t @argument multiplier Defaults to `1`, multiplied with the step value.\n\t /\n\tincrementValue(multiplier = 1) {\n\t\tthis.value = this.value + (this.step multiplier);\n\t}\n\n\t/*\n\t Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t \n\t @argument multiplier Defaults to `1`, multiplied with the step value.\n\t /\n\tdecrementValue(multiplier = 1) {\n\t\tthis.value = this.value - (this.step multiplier);\n\t}\n\n\t/** Change handler for the optional input /\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t}\n\n\t/* Handles clicks on the range track, and setting the value to it's \"real\" equivalent /\n\tonClick(event) {\n\t\tif (this.disabled) { return; }\n\t\tconst trackLeft = this.track.nativeElement.getBoundingClientRect().left;\n\t\tthis.value = this.convertToValue(event.clientX - trackLeft);\n\t}\n\n\t/* Focus handler for the optional input /\n\tonFocus({target}) {\n\t\ttarget.select();\n\t}\n\n\t/* Mouse move handler. Responsible for updating the value and visual selection based on mouse movement /\n\tonMouseMove(event) {\n\t\tif (this.disabled \|\| !this.isMouseDown) { return; }\n\t\tconst track = this.track.nativeElement.getBoundingClientRect();\n\t\tif (\n\t\t\tevent.clientX - track.left <= track.width\n\t\t\t&& event.clientX - track.left >= 0\n\t\t) {\n\t\t\tthis.slidAmount = event.clientX - track.left;\n\t\t}\n\t\tthis.value = this.convertToValue(this.slidAmount);\n\t}\n\n\t/* Enables the `onMouseMove` handler /\n\tonMouseDown(event) {\n\t\tevent.preventDefault();\n\t\tif (this.disabled) { return; }\n\t\tthis.thumb.nativeElement.focus();\n\t\tthis.isMouseDown = true;\n\t}\n\n\t/* Disables the `onMouseMove` handler /\n\tonMouseUp() {\n\t\tthis.isMouseDown = false;\n\t}\n\n\t/* Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown */\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.disableArrowKeys) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tconst multiplier = event.shiftKey ? this.shiftMultiplier : 1;\n\t\tif (event.key === \"ArrowLeft\" \|\| event.key === \"ArrowDown\") {\n\t\t\tthis.decrementValue(multiplier);\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\" \|\| event.key === \"ArrowUp\") {\n\t\t\tthis.incrementValue(multiplier);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n"]}

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

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"Slider":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":56,"character":1},"arguments":[{"selector":"ibm-slider","template":"\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t<div\n\t\t\t\t\t#thumb\n\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() 100}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#track\n\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\t#range\n\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t</div>\n\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<~~div class=\"bx--form-item\">\n\t\t\t\t<~~label class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t</div>\n\t\t\t</~~div>\n\t\t</~~ng-template>\n\t","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":~~116~~,"character":12},"useExisting":{"__symbolic":"reference","name":"Slider"},"multi":true}]}]}],"members":{"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~126~~,"character":2}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~128~~,"character":2}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~130~~,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~132~~,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~156~~,"character":2}}]}],"shiftMultiplier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~158~~,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~160~~,"character":2}}]}],"disableArrowKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~162~~,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~164~~,"character":2}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~177~~,"character":2}}]}],"hostClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":~~178~~,"character":2},"arguments":["class.bx--~~slider~~-~~container~~"]}]}],"thumb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":~~179~~,"character":2},"arguments":["thumb"]}]}],"track":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":~~180~~,"character":2},"arguments":["track"]}]}],"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":~~181~~,"character":2},"arguments":["range"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":~~194~~,"character":35}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"getFractionComplete":[{"__symbolic":"method"}],"scaleX":[{"__symbolic":"method"}],"convertToValue":[{"__symbolic":"method"}],"convertToPx":[{"__symbolic":"method"}],"incrementValue":[{"__symbolic":"method"}],"decrementValue":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onMouseMove":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onMouseUp":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method"}]},"statics":{"count":0}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"Slider":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":57,"character":1},"arguments":[{"selector":"ibm-slider","template":"\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label for=\"slider\" class=\"bx--label\">\n\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div class=\"bx--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumb\n\t\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() 100}\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":121,"character":12},"useExisting":{"__symbolic":"reference","name":"Slider"},"multi":true}]}]}],"members":{"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":2}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":2}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":2}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":2}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":161,"character":2}}]}],"shiftMultiplier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":165,"character":2}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":2}}]}],"disableArrowKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":2}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":184,"character":2}}]}],"hostClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":185,"character":2},"arguments":["class.bx--form-item"]}]}],"thumb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":186,"character":2},"arguments":["thumb"]}]}],"track":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":187,"character":2},"arguments":["track"]}]}],"range":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":188,"character":2},"arguments":["range"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":201,"character":35}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"getFractionComplete":[{"__symbolic":"method"}],"scaleX":[{"__symbolic":"method"}],"convertToValue":[{"__symbolic":"method"}],"convertToPx":[{"__symbolic":"method"}],"incrementValue":[{"__symbolic":"method"}],"decrementValue":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onMouseMove":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onMouseUp":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method"}],"isTemplate":[{"__symbolic":"method"}]},"statics":{"count":0}}}}]

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

@@ -31,19 +31,22 @@ import * as i3 from "./slider.component";
 var styles_Slider = [];
 var RenderType_Slider = i0.ɵcrt({ encapsulation: 2, styles: styles_Slider, data: {} });
 export { RenderType_Slider as RenderType_Slider };
-function View_Slider_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 16, null, null, null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 1, "label", [["class", "bx--slider__range-label"]], [[8, "id", 0]], null, null, null, null)), i0.ɵncd(null, 0), (_l()(), i0.ɵeld(3, 0, null, null, 10, "div", [["class", "bx--slider"]], null, null, null, null, null)), i0.ɵdid(4, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(5, { "bx--slider--disabled": 0 }), (_l()(), i0.ɵeld(6, 0, [[1, 0], ["thumb", 1]], null, 2, "div", [["class", "bx--slider__thumb"], ["tabindex", "0"]], null, [[null, "mousedown"], [null, "keydown"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("mousedown" === en)) {
+function View_Slider_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, null, null, null, null, null, null, null)), (_l()(), i0.ɵted(1, null, ["", ""]))], null, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }); }
+function View_Slider_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(0, null, null, 0))], null, null); }
+function View_Slider_3(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_Slider_4)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.label; _ck(_v, 1, 0, currVal_0); }, null); }
+function View_Slider_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 22, null, null, null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 4, "label", [["class", "bx--label"], ["for", "slider"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Slider_2)), i0.ɵdid(3, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Slider_3)), i0.ɵdid(5, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(6, 0, null, null, 16, "div", [["class", "bx--slider-container"]], null, null, null, null, null)), (_l()(), i0.ɵeld(7, 0, null, null, 1, "label", [["class", "bx--slider__range-label"]], [[8, "id", 0]], null, null, null, null)), i0.ɵncd(null, 0), (_l()(), i0.ɵeld(9, 0, null, null, 10, "div", [["class", "bx--slider"]], null, null, null, null, null)), i0.ɵdid(10, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(11, { "bx--slider--disabled": 0 }), (_l()(), i0.ɵeld(12, 0, [[1, 0], ["thumb", 1]], null, 2, "div", [["class", "bx--slider__thumb"], ["tabindex", "0"]], null, [[null, "mousedown"], [null, "keydown"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("mousedown" === en)) {
         var pd_0 = (_co.onMouseDown($event) !== false);
         ad = (pd_0 && ad);
     } if (("keydown" === en)) {
         var pd_1 = (_co.onKeyDown($event) !== false);
         ad = (pd_1 && ad);
-    } return ad; }, null, null)), i0.ɵdid(7, 278528, null, 0, i1.NgStyle, [i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { ngStyle: [0, "ngStyle"] }, null), i0.ɵpod(8, { "left.%": 0 }), (_l()(), i0.ɵeld(9, 0, [[2, 0], ["track", 1]], null, 0, "div", [["class", "bx--slider__track"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
+    } return ad; }, null, null)), i0.ɵdid(13, 278528, null, 0, i1.NgStyle, [i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { ngStyle: [0, "ngStyle"] }, null), i0.ɵpod(14, { "left.%": 0 }), (_l()(), i0.ɵeld(15, 0, [[2, 0], ["track", 1]], null, 0, "div", [["class", "bx--slider__track"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
         var pd_0 = (_co.onClick($event) !== false);
         ad = (pd_0 && ad);
-    } return ad; }, null, null)), (_l()(), i0.ɵeld(10, 0, null, null, 2, "div", [["class", "bx--slider__filled-track"]], null, null, null, null, null)), i0.ɵdid(11, 278528, null, 0, i1.NgStyle, [i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { ngStyle: [0, "ngStyle"] }, null), i0.ɵpod(12, { transform: 0 }), (_l()(), i0.ɵeld(13, 0, [[3, 0], ["range", 1]], null, 0, "input", [["aria-label", "slider"], ["class", "bx--slider__input"], ["type", "range"]], [[8, "step", 0], [8, "min", 0], [8, "max", 0], [8, "value", 0]], null, null, null, null)), (_l()(), i0.ɵeld(14, 0, null, null, 1, "label", [["class", "bx--slider__range-label"]], [[8, "id", 0]], null, null, null, null)), i0.ɵncd(null, 1), i0.ɵncd(null, 2), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_1 = "bx--slider"; var currVal_2 = _ck(_v, 5, 0, _co.disabled); _ck(_v, 4, 0, currVal_1, currVal_2); var currVal_3 = _ck(_v, 8, 0, (_co.getFractionComplete() * 100)); _ck(_v, 7, 0, currVal_3); var currVal_4 = _ck(_v, 12, 0, ("translate(0%, -50%)" + _co.scaleX(_co.getFractionComplete()))); _ck(_v, 11, 0, currVal_4); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.bottomRangeId; _ck(_v, 1, 0, currVal_0); var currVal_5 = _co.step; var currVal_6 = _co.min; var currVal_7 = _co.max; var currVal_8 = _co.value.toString(); _ck(_v, 13, 0, currVal_5, currVal_6, currVal_7, currVal_8); var currVal_9 = _co.topRangeId; _ck(_v, 14, 0, currVal_9); }); }
-function View_Slider_2(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 8, "div", [["class", "bx--form-item"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 0, "label", [["class", "bx--label bx--skeleton"]], null, null, null, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 6, "div", [["class", "bx--slider-container bx--skeleton"]], null, null, null, null, null)), (_l()(), i0.ɵeld(3, 0, null, null, 0, "span", [["class", "bx--slider__range-label"]], null, null, null, null, null)), (_l()(), i0.ɵeld(4, 0, null, null, 3, "div", [["class", "bx--slider"]], null, null, null, null, null)), (_l()(), i0.ɵeld(5, 0, null, null, 0, "div", [["class", "bx--slider__thumb"]], null, null, null, null, null)), (_l()(), i0.ɵeld(6, 0, null, null, 0, "div", [["class", "bx--slider__track"]], null, null, null, null, null)), (_l()(), i0.ɵeld(7, 0, null, null, 0, "div", [["class", "bx--slider__filled-track"]], null, null, null, null, null)), (_l()(), i0.ɵeld(8, 0, null, null, 0, "span", [["class", "bx--slider__range-label"]], null, null, null, null, null))], null, null); }
-export function View_Slider_0(_l) { return i0.ɵvid(0, [i0.ɵqud(671088640, 1, { thumb: 0 }), i0.ɵqud(671088640, 2, { track: 0 }), i0.ɵqud(671088640, 3, { range: 0 }), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Slider_1)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"], ngIfElse: [1, "ngIfElse"] }, null), (_l()(), i0.ɵand(0, [["skeletonTemplate", 2]], null, 0, null, View_Slider_2))], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.skeleton; var currVal_1 = i0.ɵnov(_v, 5); _ck(_v, 4, 0, currVal_0, currVal_1); }, null); }
-export function View_Slider_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-slider", [], [[2, "bx--slider-container", null]], null, null, View_Slider_0, RenderType_Slider)), i0.ɵprd(5120, null, i2.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i3.Slider]), i0.ɵdid(2, 4374528, null, 0, i3.Slider, [i0.ElementRef], null, null)], null, function (_ck, _v) { var currVal_0 = i0.ɵnov(_v, 2).hostClass; _ck(_v, 0, 0, currVal_0); }); }
-var SliderNgFactory = i0.ɵccf("ibm-slider", i3.Slider, View_Slider_Host_0, { min: "min", max: "max", step: "step", value: "value", id: "id", shiftMultiplier: "shiftMultiplier", skeleton: "skeleton", disableArrowKeys: "disableArrowKeys", disabled: "disabled" }, { valueChange: "valueChange" }, ["[minLabel]", "[maxLabel]", "input"]);
+    } return ad; }, null, null)), (_l()(), i0.ɵeld(16, 0, null, null, 2, "div", [["class", "bx--slider__filled-track"]], null, null, null, null, null)), i0.ɵdid(17, 278528, null, 0, i1.NgStyle, [i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { ngStyle: [0, "ngStyle"] }, null), i0.ɵpod(18, { transform: 0 }), (_l()(), i0.ɵeld(19, 0, [[3, 0], ["range", 1]], null, 0, "input", [["aria-label", "slider"], ["class", "bx--slider__input"], ["type", "range"]], [[8, "step", 0], [8, "min", 0], [8, "max", 0], [8, "value", 0]], null, null, null, null)), (_l()(), i0.ɵeld(20, 0, null, null, 1, "label", [["class", "bx--slider__range-label"]], [[8, "id", 0]], null, null, null, null)), i0.ɵncd(null, 1), i0.ɵncd(null, 2)], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.isTemplate(_co.label); _ck(_v, 3, 0, currVal_0); var currVal_1 = _co.isTemplate(_co.label); _ck(_v, 5, 0, currVal_1); var currVal_3 = "bx--slider"; var currVal_4 = _ck(_v, 11, 0, _co.disabled); _ck(_v, 10, 0, currVal_3, currVal_4); var currVal_5 = _ck(_v, 14, 0, (_co.getFractionComplete() * 100)); _ck(_v, 13, 0, currVal_5); var currVal_6 = _ck(_v, 18, 0, ("translate(0%, -50%)" + _co.scaleX(_co.getFractionComplete()))); _ck(_v, 17, 0, currVal_6); }, function (_ck, _v) { var _co = _v.component; var currVal_2 = _co.bottomRangeId; _ck(_v, 7, 0, currVal_2); var currVal_7 = _co.step; var currVal_8 = _co.min; var currVal_9 = _co.max; var currVal_10 = _co.value.toString(); _ck(_v, 19, 0, currVal_7, currVal_8, currVal_9, currVal_10); var currVal_11 = _co.topRangeId; _ck(_v, 20, 0, currVal_11); }); }
+function View_Slider_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 0, "label", [["class", "bx--label bx--skeleton"]], null, null, null, null, null)), (_l()(), i0.ɵeld(1, 0, null, null, 6, "div", [["class", "bx--slider-container bx--skeleton"]], null, null, null, null, null)), (_l()(), i0.ɵeld(2, 0, null, null, 0, "span", [["class", "bx--slider__range-label"]], null, null, null, null, null)), (_l()(), i0.ɵeld(3, 0, null, null, 3, "div", [["class", "bx--slider"]], null, null, null, null, null)), (_l()(), i0.ɵeld(4, 0, null, null, 0, "div", [["class", "bx--slider__thumb"]], null, null, null, null, null)), (_l()(), i0.ɵeld(5, 0, null, null, 0, "div", [["class", "bx--slider__track"]], null, null, null, null, null)), (_l()(), i0.ɵeld(6, 0, null, null, 0, "div", [["class", "bx--slider__filled-track"]], null, null, null, null, null)), (_l()(), i0.ɵeld(7, 0, null, null, 0, "span", [["class", "bx--slider__range-label"]], null, null, null, null, null))], null, null); }
+export function View_Slider_0(_l) { return i0.ɵvid(0, [i0.ɵqud(671088640, 1, { thumb: 0 }), i0.ɵqud(671088640, 2, { track: 0 }), i0.ɵqud(671088640, 3, { range: 0 }), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Slider_1)), i0.ɵdid(4, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"], ngIfElse: [1, "ngIfElse"] }, null), (_l()(), i0.ɵand(0, [["skeletonTemplate", 2]], null, 0, null, View_Slider_5))], function (_ck, _v) { var _co = _v.component; var currVal_0 = !_co.skeleton; var currVal_1 = i0.ɵnov(_v, 5); _ck(_v, 4, 0, currVal_0, currVal_1); }, null); }
+export function View_Slider_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-slider", [], [[2, "bx--form-item", null]], null, null, View_Slider_0, RenderType_Slider)), i0.ɵprd(5120, null, i2.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i3.Slider]), i0.ɵdid(2, 4374528, null, 0, i3.Slider, [i0.ElementRef], null, null)], null, function (_ck, _v) { var currVal_0 = i0.ɵnov(_v, 2).hostClass; _ck(_v, 0, 0, currVal_0); }); }
+var SliderNgFactory = i0.ɵccf("ibm-slider", i3.Slider, View_Slider_Host_0, { min: "min", max: "max", step: "step", value: "value", id: "id", shiftMultiplier: "shiftMultiplier", skeleton: "skeleton", label: "label", disableArrowKeys: "disableArrowKeys", disabled: "disabled" }, { valueChange: "valueChange" }, ["[minLabel]", "[maxLabel]", "input"]);
 export { SliderNgFactory as SliderNgFactory };
 //# sourceMappingURL=slider.component.ngfactory.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.component.ngfactory.js","sourceRoot":"","sources":["../src/slider/slider.component.ngfactory.ts","../src/slider/slider.component.ts.Slider.html"],"names":[],"mappings":";;;;;;;;;;;;;~~iDCCE~~,8EAAuD,KACtD,4HAA4D,IAC3D,eAAgC,IAEjC,~~6QAEgD~~,GAA/C,~~sCAA8C~~,MAC9C,~~0NAM~~+B,YAD9B;;wBAAiC;MACjC;;wBAA6B;MAN9B,~~wJAM~~+B,GAF9B,~~wBAAmD~~,MAIpD,~~gLAG2B~~,YAA1B;;wBAAyB;MAH1B,wBAG2B,KAE3B,mPAEgF,GAA/E,0BAA8E,MAE/E,uOAQ4B,KAE7B,6HAAyD,IACxD,eAAgC,GAEjC,eAA2B,~~sFAhC1B~~,4BAAkB,EAClB,~~iCAA8C~~,YAF/C,~~YAEgD~~,EAD/C,SAAkB,EAClB,SAA8C,GAK7C,~~8DAAmD,~~IAJpD,~~YAM~~+B,EAF9B,SAAmD,GAWnD,sEAA8E,2BAF/E,aAEgF,EAA/E,SAA8E,mDArBzE,mBAAoB,gBAA3B,YAA4D,EAArD,SAAoB,GA4BzB,mBAAa,OACb,mBAAW,MACX,mBAAW,MACX,~~mBAA0B~~,mBAR3B,aAQ4B,EAH3B,SAAa,EACb,SAAW,EACX,SAAW,EACX,~~SAA0B~~,GAErB,~~mBAAiB~~,aAAxB,aAAyD,EAAlD,~~SAAiB~~;~~iDAOxB~~,~~sGAA2B,KAC1B,~~iHAAsC,KACtC,0HAA+C,KAC9C,iHAAsC,KACtC,mGAAwB,KACvB,0GAA+B,KAC/B,0GAA+B,KAC/B,iHAAsC,KAEvC,iHAAsC;~~uKAlDzC~~,iMAAuD,~~IAwCvD~~,0EAA+B,~~kDAxCjB~~,4DAAwC,GAAtD,YAAuD,EAAzC,oBAAwC","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t<div\n\t\t\t\t\t#thumb\n\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() 100}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#track\n\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\t#range\n\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t</div>\n\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<~~div class=\"bx--form-item\">\n\t\t\t\t<~~label class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t</div>\n\t\t\t</~~div>\n\t\t</~~ng-template>\n\t"]}
1	+ {"version":3,"file":"slider.component.ngfactory.js","sourceRoot":"","sources":["../src/slider/slider.component.ngfactory.ts","../src/slider/slider.component.ts.Slider.html"],"names":[],"mappings":";;;;;;;;;;;;;iDCGI,6EAAyC,KAAA,2IAAS;;iDAClD,2LAAkE,sFAA3B,mBAA0B,QAAjE,YAAkE,EAA3B,SAA0B;iDAHnE,8EAAuD,KACtD,uHAAsC,KACrC,sKAAyC,IACzC,sKAAkE,IAEnE,8GAAkC,KACjC,4HAA4D,IAC3D,eAAgC,IAEjC,8QAEgD,GAA/C,uCAA8C,MAC9C,2NAM+B,YAD9B;;wBAAiC;MACjC;;wBAA6B;MAN9B,yJAM+B,GAF9B,yBAAmD,MAIpD,iLAG2B,YAA1B;;wBAAyB;MAH1B,wBAG2B,KAE3B,mPAEgF,GAA/E,0BAA8E,MAE/E,uOAQ4B,KAE7B,6HAAyD,IACxD,eAAgC,GAEjC,eAA2B,iDAxCb,mCAA0B,SAAxC,YAAyC,EAA3B,SAA0B,GAC3B,kCAAyB,SAAtC,YAAkE,EAArD,SAAyB,GAOrC,4BAAkB,EAClB,kCAA8C,YAF/C,aAEgD,EAD/C,SAAkB,EAClB,SAA8C,GAK7C,+DAAmD,IAJpD,aAM+B,EAF9B,SAAmD,GAWnD,sEAA8E,2BAF/E,aAEgF,EAA/E,SAA8E,mDArBzE,mBAAoB,gBAA3B,YAA4D,EAArD,SAAoB,GA4BzB,mBAAa,OACb,mBAAW,MACX,mBAAW,MACX,oBAA0B,mBAR3B,aAQ4B,EAH3B,SAAa,EACb,SAAW,EACX,SAAW,EACX,UAA0B,GAErB,oBAAiB,aAAxB,aAAyD,EAAlD,UAAiB;iDAQzB,iHAAsC,KACtC,0HAA+C,KAC9C,iHAAsC,KACtC,mGAAwB,KACvB,0GAA+B,KAC/B,0GAA+B,KAC/B,iHAAsC,KAEvC,iHAAsC;uKAvDxC,iMAAuD,IA8CvD,0EAA+B,kDA9CjB,4DAAwC,GAAtD,YAAuD,EAAzC,oBAAwC","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t<ng-container ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label for=\"slider\" class=\"bx--label\">\n\t\t\t\t<ng-container ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div class=\"bx--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumb\n\t\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() 100}\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t"]}