carbon-components-angular 5.44.0 → 5.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -4
- package/docs/documentation/classes/NumberChange.html +37 -3
- package/docs/documentation/components/NumberComponent.html +459 -71
- package/docs/documentation/coverage.html +3 -3
- package/docs/documentation/index.html +2 -3
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +92 -92
- package/docs/documentation/modules/TilesModule.html +92 -92
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +46 -42
- package/docs/documentation/modules/TimePickerModule.html +46 -42
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +45 -41
- package/docs/documentation/modules/TimePickerSelectModule.html +45 -41
- package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggleModule.html +4 -4
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggletipModule.html +4 -4
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +30 -30
- package/docs/documentation/modules/TreeviewModule.html +30 -30
- package/docs/documentation.json +210 -73
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/index.html +27 -10
- package/docs/storybook/index.json +1 -1
- package/docs/storybook/main.6e0761c8.iframe.bundle.js +1 -0
- package/docs/storybook/{number-input-number-stories.a1953960.iframe.bundle.js → number-input-number-stories.6aba5a3d.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.d3e52413.iframe.bundle.js → runtime~main.2e05cdb7.iframe.bundle.js} +1 -1
- package/docs/storybook/stories.json +1 -1
- package/esm2020/number-input/number.component.mjs +54 -6
- package/fesm2015/carbon-components-angular-number-input.mjs +53 -5
- package/fesm2015/carbon-components-angular-number-input.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-number-input.mjs +53 -5
- package/fesm2020/carbon-components-angular-number-input.mjs.map +1 -1
- package/number-input/number.component.d.ts +11 -1
- package/package.json +1 -1
- package/telemetry.yml +1 -1
- package/docs/storybook/main.40b82efc.iframe.bundle.js +0 -1
package/docs/documentation.json
CHANGED
|
@@ -7051,12 +7051,12 @@
|
|
|
7051
7051
|
},
|
|
7052
7052
|
{
|
|
7053
7053
|
"name": "NumberChange",
|
|
7054
|
-
"id": "class-NumberChange-
|
|
7054
|
+
"id": "class-NumberChange-9f96963038fb60119a19b74c9c9868abb21dc983cbe9ae791c7f9916a4b113d526ffec3cb0816822dbea8d431361e3ad4bf0b6c14c97c4757a47853940dbca6b",
|
|
7055
7055
|
"file": "src/number-input/number.component.ts",
|
|
7056
7056
|
"deprecated": false,
|
|
7057
7057
|
"deprecationMessage": "",
|
|
7058
7058
|
"type": "class",
|
|
7059
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\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 * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
|
|
7059
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\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 * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (<HTMLInputElement>event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n",
|
|
7060
7060
|
"inputsClass": [],
|
|
7061
7061
|
"outputsClass": [],
|
|
7062
7062
|
"properties": [
|
|
@@ -38170,7 +38170,7 @@
|
|
|
38170
38170
|
},
|
|
38171
38171
|
{
|
|
38172
38172
|
"name": "NumberComponent",
|
|
38173
|
-
"id": "component-NumberComponent-
|
|
38173
|
+
"id": "component-NumberComponent-9f96963038fb60119a19b74c9c9868abb21dc983cbe9ae791c7f9916a4b113d526ffec3cb0816822dbea8d431361e3ad4bf0b6c14c97c4757a47853940dbca6b",
|
|
38174
38174
|
"file": "src/number-input/number.component.ts",
|
|
38175
38175
|
"encapsulation": [],
|
|
38176
38176
|
"entryComponents": [],
|
|
@@ -38185,7 +38185,7 @@
|
|
|
38185
38185
|
"selector": "cds-number, ibm-number",
|
|
38186
38186
|
"styleUrls": [],
|
|
38187
38187
|
"styles": [],
|
|
38188
|
-
"template": "<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label
|
|
38188
|
+
"template": "<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label\n\t\t*ngIf=\"!skeleton && label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--number__input-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t}\">\n\t\t<input\n\t\t\ttype=\"number\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.min]=\"min\"\n\t\t\t[attr.max]=\"max\"\n\t\t\t[attr.step]=\"step\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t</svg>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t</div>\n\t</div>\n\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
|
|
38189
38189
|
"templateUrl": [],
|
|
38190
38190
|
"viewProviders": [],
|
|
38191
38191
|
"hostDirectives": [],
|
|
@@ -38196,7 +38196,7 @@
|
|
|
38196
38196
|
"deprecationMessage": "",
|
|
38197
38197
|
"rawdescription": "\n\nSets the arialabel for input\n",
|
|
38198
38198
|
"description": "<p>Sets the arialabel for input</p>\n",
|
|
38199
|
-
"line":
|
|
38199
|
+
"line": 247,
|
|
38200
38200
|
"type": "string",
|
|
38201
38201
|
"decorators": []
|
|
38202
38202
|
},
|
|
@@ -38204,7 +38204,7 @@
|
|
|
38204
38204
|
"name": "decrementLabel",
|
|
38205
38205
|
"deprecated": false,
|
|
38206
38206
|
"deprecationMessage": "",
|
|
38207
|
-
"line":
|
|
38207
|
+
"line": 254,
|
|
38208
38208
|
"type": "string | Observable",
|
|
38209
38209
|
"decorators": []
|
|
38210
38210
|
},
|
|
@@ -38215,7 +38215,18 @@
|
|
|
38215
38215
|
"deprecationMessage": "",
|
|
38216
38216
|
"rawdescription": "\n\nSet to `true` for a disabled number input.\n",
|
|
38217
38217
|
"description": "<p>Set to <code>true</code> for a disabled number input.</p>\n",
|
|
38218
|
-
"line":
|
|
38218
|
+
"line": 169,
|
|
38219
|
+
"type": "boolean",
|
|
38220
|
+
"decorators": []
|
|
38221
|
+
},
|
|
38222
|
+
{
|
|
38223
|
+
"name": "fluid",
|
|
38224
|
+
"defaultValue": "false",
|
|
38225
|
+
"deprecated": false,
|
|
38226
|
+
"deprecationMessage": "",
|
|
38227
|
+
"rawdescription": "\n\nExperimental: enable fluid state\n",
|
|
38228
|
+
"description": "<p>Experimental: enable fluid state</p>\n",
|
|
38229
|
+
"line": 274,
|
|
38219
38230
|
"type": "boolean",
|
|
38220
38231
|
"decorators": []
|
|
38221
38232
|
},
|
|
@@ -38225,7 +38236,7 @@
|
|
|
38225
38236
|
"deprecationMessage": "",
|
|
38226
38237
|
"rawdescription": "\n\nSets the optional helper text.\n",
|
|
38227
38238
|
"description": "<p>Sets the optional helper text.</p>\n",
|
|
38228
|
-
"line":
|
|
38239
|
+
"line": 223,
|
|
38229
38240
|
"type": "string | TemplateRef<any>",
|
|
38230
38241
|
"decorators": []
|
|
38231
38242
|
},
|
|
@@ -38236,7 +38247,7 @@
|
|
|
38236
38247
|
"deprecationMessage": "",
|
|
38237
38248
|
"rawdescription": "\n\nThe unique id for the number component.\n",
|
|
38238
38249
|
"description": "<p>The unique id for the number component.</p>\n",
|
|
38239
|
-
"line":
|
|
38250
|
+
"line": 181,
|
|
38240
38251
|
"type": "string",
|
|
38241
38252
|
"decorators": []
|
|
38242
38253
|
},
|
|
@@ -38244,7 +38255,7 @@
|
|
|
38244
38255
|
"name": "incrementLabel",
|
|
38245
38256
|
"deprecated": false,
|
|
38246
38257
|
"deprecationMessage": "",
|
|
38247
|
-
"line":
|
|
38258
|
+
"line": 263,
|
|
38248
38259
|
"type": "string | Observable",
|
|
38249
38260
|
"decorators": []
|
|
38250
38261
|
},
|
|
@@ -38255,7 +38266,7 @@
|
|
|
38255
38266
|
"deprecationMessage": "",
|
|
38256
38267
|
"rawdescription": "\n\nSet to `true` for an invalid number component.\n",
|
|
38257
38268
|
"description": "<p>Set to <code>true</code> for an invalid number component.</p>\n",
|
|
38258
|
-
"line":
|
|
38269
|
+
"line": 177,
|
|
38259
38270
|
"type": "boolean",
|
|
38260
38271
|
"decorators": []
|
|
38261
38272
|
},
|
|
@@ -38265,7 +38276,7 @@
|
|
|
38265
38276
|
"deprecationMessage": "",
|
|
38266
38277
|
"rawdescription": "\n\nSets the invalid text.\n",
|
|
38267
38278
|
"description": "<p>Sets the invalid text.</p>\n",
|
|
38268
|
-
"line":
|
|
38279
|
+
"line": 227,
|
|
38269
38280
|
"type": "string | TemplateRef<any>",
|
|
38270
38281
|
"decorators": []
|
|
38271
38282
|
},
|
|
@@ -38275,7 +38286,7 @@
|
|
|
38275
38286
|
"deprecationMessage": "",
|
|
38276
38287
|
"rawdescription": "\n\nSets the text inside the `label` tag.\n",
|
|
38277
38288
|
"description": "<p>Sets the text inside the <code>label</code> tag.</p>\n",
|
|
38278
|
-
"line":
|
|
38289
|
+
"line": 219,
|
|
38279
38290
|
"type": "string | TemplateRef<any>",
|
|
38280
38291
|
"decorators": []
|
|
38281
38292
|
},
|
|
@@ -38286,7 +38297,7 @@
|
|
|
38286
38297
|
"deprecationMessage": "",
|
|
38287
38298
|
"rawdescription": "\n\nSets the max attribute on the `input` element.\n",
|
|
38288
38299
|
"description": "<p>Sets the max attribute on the <code>input</code> element.</p>\n",
|
|
38289
|
-
"line":
|
|
38300
|
+
"line": 215,
|
|
38290
38301
|
"type": "any",
|
|
38291
38302
|
"decorators": []
|
|
38292
38303
|
},
|
|
@@ -38297,7 +38308,7 @@
|
|
|
38297
38308
|
"deprecationMessage": "",
|
|
38298
38309
|
"rawdescription": "\n\nSets the min attribute on the `input` element.\n",
|
|
38299
38310
|
"description": "<p>Sets the min attribute on the <code>input</code> element.</p>\n",
|
|
38300
|
-
"line":
|
|
38311
|
+
"line": 211,
|
|
38301
38312
|
"type": "any",
|
|
38302
38313
|
"decorators": []
|
|
38303
38314
|
},
|
|
@@ -38308,7 +38319,7 @@
|
|
|
38308
38319
|
"deprecationMessage": "",
|
|
38309
38320
|
"rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n",
|
|
38310
38321
|
"description": "<p>Sets the placeholder attribute on the <code>input</code> element.</p>\n",
|
|
38311
|
-
"line":
|
|
38322
|
+
"line": 185,
|
|
38312
38323
|
"type": "string",
|
|
38313
38324
|
"decorators": []
|
|
38314
38325
|
},
|
|
@@ -38318,7 +38329,7 @@
|
|
|
38318
38329
|
"deprecationMessage": "",
|
|
38319
38330
|
"rawdescription": "\n\nIf `step` is a decimal, we may want precision to be set to go around floating point precision.\n",
|
|
38320
38331
|
"description": "<p>If <code>step</code> is a decimal, we may want precision to be set to go around floating point precision.</p>\n",
|
|
38321
|
-
"line":
|
|
38332
|
+
"line": 235,
|
|
38322
38333
|
"type": "number",
|
|
38323
38334
|
"decorators": []
|
|
38324
38335
|
},
|
|
@@ -38329,7 +38340,7 @@
|
|
|
38329
38340
|
"deprecationMessage": "",
|
|
38330
38341
|
"rawdescription": "\n\nSet to `true` for readonly state.\n",
|
|
38331
38342
|
"description": "<p>Set to <code>true</code> for readonly state.</p>\n",
|
|
38332
|
-
"line":
|
|
38343
|
+
"line": 160,
|
|
38333
38344
|
"type": "boolean",
|
|
38334
38345
|
"decorators": []
|
|
38335
38346
|
},
|
|
@@ -38339,7 +38350,7 @@
|
|
|
38339
38350
|
"deprecationMessage": "",
|
|
38340
38351
|
"rawdescription": "\n\nReflects the required attribute of the `input` element.\n",
|
|
38341
38352
|
"description": "<p>Reflects the required attribute of the <code>input</code> element.</p>\n",
|
|
38342
|
-
"line":
|
|
38353
|
+
"line": 193,
|
|
38343
38354
|
"type": "boolean",
|
|
38344
38355
|
"decorators": []
|
|
38345
38356
|
},
|
|
@@ -38350,7 +38361,7 @@
|
|
|
38350
38361
|
"deprecationMessage": "",
|
|
38351
38362
|
"rawdescription": "\n\nNumber input field render size\n",
|
|
38352
38363
|
"description": "<p>Number input field render size</p>\n",
|
|
38353
|
-
"line":
|
|
38364
|
+
"line": 189,
|
|
38354
38365
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
38355
38366
|
"decorators": []
|
|
38356
38367
|
},
|
|
@@ -38361,7 +38372,7 @@
|
|
|
38361
38372
|
"deprecationMessage": "",
|
|
38362
38373
|
"rawdescription": "\n\nSet to `true` for a loading number component.\n",
|
|
38363
38374
|
"description": "<p>Set to <code>true</code> for a loading number component.</p>\n",
|
|
38364
|
-
"line":
|
|
38375
|
+
"line": 173,
|
|
38365
38376
|
"type": "boolean",
|
|
38366
38377
|
"decorators": []
|
|
38367
38378
|
},
|
|
@@ -38372,7 +38383,7 @@
|
|
|
38372
38383
|
"deprecationMessage": "",
|
|
38373
38384
|
"rawdescription": "\n\nSets the amount the number controls increment and decrement by.\n",
|
|
38374
38385
|
"description": "<p>Sets the amount the number controls increment and decrement by.</p>\n",
|
|
38375
|
-
"line":
|
|
38386
|
+
"line": 231,
|
|
38376
38387
|
"type": "number",
|
|
38377
38388
|
"decorators": []
|
|
38378
38389
|
},
|
|
@@ -38383,15 +38394,15 @@
|
|
|
38383
38394
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` number input theme.",
|
|
38384
38395
|
"jsdoctags": [
|
|
38385
38396
|
{
|
|
38386
|
-
"pos":
|
|
38387
|
-
"end":
|
|
38397
|
+
"pos": 4737,
|
|
38398
|
+
"end": 4837,
|
|
38388
38399
|
"flags": 16842752,
|
|
38389
38400
|
"modifierFlagsCache": 0,
|
|
38390
38401
|
"transformFlags": 0,
|
|
38391
38402
|
"kind": 338,
|
|
38392
38403
|
"tagName": {
|
|
38393
|
-
"pos":
|
|
38394
|
-
"end":
|
|
38404
|
+
"pos": 4738,
|
|
38405
|
+
"end": 4748,
|
|
38395
38406
|
"flags": 16842752,
|
|
38396
38407
|
"modifierFlagsCache": 0,
|
|
38397
38408
|
"transformFlags": 0,
|
|
@@ -38401,7 +38412,7 @@
|
|
|
38401
38412
|
"comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> number input theme.</p>\n"
|
|
38402
38413
|
}
|
|
38403
38414
|
],
|
|
38404
|
-
"line":
|
|
38415
|
+
"line": 165,
|
|
38405
38416
|
"type": "\"light\" | \"dark\"",
|
|
38406
38417
|
"decorators": []
|
|
38407
38418
|
},
|
|
@@ -38411,7 +38422,7 @@
|
|
|
38411
38422
|
"deprecationMessage": "",
|
|
38412
38423
|
"rawdescription": "\n\nSets the value attribute on the `input` element.\n",
|
|
38413
38424
|
"description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
|
|
38414
|
-
"line":
|
|
38425
|
+
"line": 197,
|
|
38415
38426
|
"type": "any",
|
|
38416
38427
|
"decorators": []
|
|
38417
38428
|
},
|
|
@@ -38422,7 +38433,7 @@
|
|
|
38422
38433
|
"deprecationMessage": "",
|
|
38423
38434
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
|
|
38424
38435
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
|
|
38425
|
-
"line":
|
|
38436
|
+
"line": 239,
|
|
38426
38437
|
"type": "boolean",
|
|
38427
38438
|
"decorators": []
|
|
38428
38439
|
},
|
|
@@ -38432,7 +38443,7 @@
|
|
|
38432
38443
|
"deprecationMessage": "",
|
|
38433
38444
|
"rawdescription": "\n\nSets the warning text\n",
|
|
38434
38445
|
"description": "<p>Sets the warning text</p>\n",
|
|
38435
|
-
"line":
|
|
38446
|
+
"line": 243,
|
|
38436
38447
|
"type": "string | TemplateRef<any>",
|
|
38437
38448
|
"decorators": []
|
|
38438
38449
|
}
|
|
@@ -38445,7 +38456,7 @@
|
|
|
38445
38456
|
"deprecationMessage": "",
|
|
38446
38457
|
"rawdescription": "\n\nEmits event notifying other classes when a change in state occurs in the input.\n",
|
|
38447
38458
|
"description": "<p>Emits event notifying other classes when a change in state occurs in the input.</p>\n",
|
|
38448
|
-
"line":
|
|
38459
|
+
"line": 251,
|
|
38449
38460
|
"type": "EventEmitter"
|
|
38450
38461
|
}
|
|
38451
38462
|
],
|
|
@@ -38458,7 +38469,7 @@
|
|
|
38458
38469
|
"type": "",
|
|
38459
38470
|
"optional": false,
|
|
38460
38471
|
"description": "",
|
|
38461
|
-
"line":
|
|
38472
|
+
"line": 155,
|
|
38462
38473
|
"decorators": [
|
|
38463
38474
|
{
|
|
38464
38475
|
"name": "HostBinding",
|
|
@@ -38477,7 +38488,7 @@
|
|
|
38477
38488
|
"type": "number",
|
|
38478
38489
|
"optional": false,
|
|
38479
38490
|
"description": "<p>Variable used for creating unique ids for number input components.</p>\n",
|
|
38480
|
-
"line":
|
|
38491
|
+
"line": 153,
|
|
38481
38492
|
"rawdescription": "\n\nVariable used for creating unique ids for number input components.\n",
|
|
38482
38493
|
"modifierKind": [
|
|
38483
38494
|
126
|
|
@@ -38491,7 +38502,7 @@
|
|
|
38491
38502
|
"type": "function",
|
|
38492
38503
|
"optional": false,
|
|
38493
38504
|
"description": "<p>Called when number input is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
|
|
38494
|
-
"line":
|
|
38505
|
+
"line": 344,
|
|
38495
38506
|
"rawdescription": "\n\nCalled when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n"
|
|
38496
38507
|
},
|
|
38497
38508
|
{
|
|
@@ -38502,7 +38513,7 @@
|
|
|
38502
38513
|
"type": "",
|
|
38503
38514
|
"optional": false,
|
|
38504
38515
|
"description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
|
|
38505
|
-
"line":
|
|
38516
|
+
"line": 349,
|
|
38506
38517
|
"rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n"
|
|
38507
38518
|
}
|
|
38508
38519
|
],
|
|
@@ -38513,7 +38524,7 @@
|
|
|
38513
38524
|
"optional": false,
|
|
38514
38525
|
"returnType": "void",
|
|
38515
38526
|
"typeParameters": [],
|
|
38516
|
-
"line":
|
|
38527
|
+
"line": 384,
|
|
38517
38528
|
"deprecated": false,
|
|
38518
38529
|
"deprecationMessage": "",
|
|
38519
38530
|
"rawdescription": "\n\nCreates a class of `NumberChange` to emit the change in the `Number`.\n",
|
|
@@ -38525,7 +38536,7 @@
|
|
|
38525
38536
|
"optional": false,
|
|
38526
38537
|
"returnType": "void",
|
|
38527
38538
|
"typeParameters": [],
|
|
38528
|
-
"line":
|
|
38539
|
+
"line": 330,
|
|
38529
38540
|
"deprecated": false,
|
|
38530
38541
|
"deprecationMessage": "",
|
|
38531
38542
|
"decorators": [
|
|
@@ -38544,7 +38555,7 @@
|
|
|
38544
38555
|
"optional": false,
|
|
38545
38556
|
"returnType": "Observable<string>",
|
|
38546
38557
|
"typeParameters": [],
|
|
38547
|
-
"line":
|
|
38558
|
+
"line": 373,
|
|
38548
38559
|
"deprecated": false,
|
|
38549
38560
|
"deprecationMessage": ""
|
|
38550
38561
|
},
|
|
@@ -38554,10 +38565,38 @@
|
|
|
38554
38565
|
"optional": false,
|
|
38555
38566
|
"returnType": "Observable<string>",
|
|
38556
38567
|
"typeParameters": [],
|
|
38557
|
-
"line":
|
|
38568
|
+
"line": 377,
|
|
38558
38569
|
"deprecated": false,
|
|
38559
38570
|
"deprecationMessage": ""
|
|
38560
38571
|
},
|
|
38572
|
+
{
|
|
38573
|
+
"name": "handleFocus",
|
|
38574
|
+
"args": [
|
|
38575
|
+
{
|
|
38576
|
+
"name": "event",
|
|
38577
|
+
"type": "FocusEvent",
|
|
38578
|
+
"deprecated": false,
|
|
38579
|
+
"deprecationMessage": ""
|
|
38580
|
+
}
|
|
38581
|
+
],
|
|
38582
|
+
"optional": false,
|
|
38583
|
+
"returnType": "void",
|
|
38584
|
+
"typeParameters": [],
|
|
38585
|
+
"line": 401,
|
|
38586
|
+
"deprecated": false,
|
|
38587
|
+
"deprecationMessage": "",
|
|
38588
|
+
"jsdoctags": [
|
|
38589
|
+
{
|
|
38590
|
+
"name": "event",
|
|
38591
|
+
"type": "FocusEvent",
|
|
38592
|
+
"deprecated": false,
|
|
38593
|
+
"deprecationMessage": "",
|
|
38594
|
+
"tagName": {
|
|
38595
|
+
"text": "param"
|
|
38596
|
+
}
|
|
38597
|
+
}
|
|
38598
|
+
]
|
|
38599
|
+
},
|
|
38561
38600
|
{
|
|
38562
38601
|
"name": "isTemplate",
|
|
38563
38602
|
"args": [
|
|
@@ -38571,7 +38610,7 @@
|
|
|
38571
38610
|
"optional": false,
|
|
38572
38611
|
"returnType": "boolean",
|
|
38573
38612
|
"typeParameters": [],
|
|
38574
|
-
"line":
|
|
38613
|
+
"line": 397,
|
|
38575
38614
|
"deprecated": false,
|
|
38576
38615
|
"deprecationMessage": "",
|
|
38577
38616
|
"modifierKind": [
|
|
@@ -38595,7 +38634,7 @@
|
|
|
38595
38634
|
"optional": false,
|
|
38596
38635
|
"returnType": "void",
|
|
38597
38636
|
"typeParameters": [],
|
|
38598
|
-
"line":
|
|
38637
|
+
"line": 365,
|
|
38599
38638
|
"deprecated": false,
|
|
38600
38639
|
"deprecationMessage": "",
|
|
38601
38640
|
"rawdescription": "\n\nSubtracts `step` to the current `value`.\n",
|
|
@@ -38607,7 +38646,7 @@
|
|
|
38607
38646
|
"optional": false,
|
|
38608
38647
|
"returnType": "void",
|
|
38609
38648
|
"typeParameters": [],
|
|
38610
|
-
"line":
|
|
38649
|
+
"line": 354,
|
|
38611
38650
|
"deprecated": false,
|
|
38612
38651
|
"deprecationMessage": "",
|
|
38613
38652
|
"rawdescription": "\n\nAdds `step` to the current `value`.\n",
|
|
@@ -38626,7 +38665,7 @@
|
|
|
38626
38665
|
"optional": false,
|
|
38627
38666
|
"returnType": "void",
|
|
38628
38667
|
"typeParameters": [],
|
|
38629
|
-
"line":
|
|
38668
|
+
"line": 392,
|
|
38630
38669
|
"deprecated": false,
|
|
38631
38670
|
"deprecationMessage": "",
|
|
38632
38671
|
"jsdoctags": [
|
|
@@ -38654,7 +38693,7 @@
|
|
|
38654
38693
|
"optional": false,
|
|
38655
38694
|
"returnType": "void",
|
|
38656
38695
|
"typeParameters": [],
|
|
38657
|
-
"line":
|
|
38696
|
+
"line": 317,
|
|
38658
38697
|
"deprecated": false,
|
|
38659
38698
|
"deprecationMessage": "",
|
|
38660
38699
|
"rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
|
|
@@ -38687,7 +38726,7 @@
|
|
|
38687
38726
|
"optional": false,
|
|
38688
38727
|
"returnType": "void",
|
|
38689
38728
|
"typeParameters": [],
|
|
38690
|
-
"line":
|
|
38729
|
+
"line": 325,
|
|
38691
38730
|
"deprecated": false,
|
|
38692
38731
|
"deprecationMessage": "",
|
|
38693
38732
|
"rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
|
|
@@ -38698,8 +38737,8 @@
|
|
|
38698
38737
|
"jsdoctags": [
|
|
38699
38738
|
{
|
|
38700
38739
|
"name": {
|
|
38701
|
-
"pos":
|
|
38702
|
-
"end":
|
|
38740
|
+
"pos": 8554,
|
|
38741
|
+
"end": 8556,
|
|
38703
38742
|
"flags": 16842752,
|
|
38704
38743
|
"modifierFlagsCache": 0,
|
|
38705
38744
|
"transformFlags": 0,
|
|
@@ -38710,8 +38749,8 @@
|
|
|
38710
38749
|
"deprecated": false,
|
|
38711
38750
|
"deprecationMessage": "",
|
|
38712
38751
|
"tagName": {
|
|
38713
|
-
"pos":
|
|
38714
|
-
"end":
|
|
38752
|
+
"pos": 8548,
|
|
38753
|
+
"end": 8553,
|
|
38715
38754
|
"flags": 16842752,
|
|
38716
38755
|
"modifierFlagsCache": 0,
|
|
38717
38756
|
"transformFlags": 0,
|
|
@@ -38735,7 +38774,7 @@
|
|
|
38735
38774
|
"optional": false,
|
|
38736
38775
|
"returnType": "void",
|
|
38737
38776
|
"typeParameters": [],
|
|
38738
|
-
"line":
|
|
38777
|
+
"line": 337,
|
|
38739
38778
|
"deprecated": false,
|
|
38740
38779
|
"deprecationMessage": "",
|
|
38741
38780
|
"rawdescription": "\n\nSets the disabled state through the model\n",
|
|
@@ -38765,7 +38804,7 @@
|
|
|
38765
38804
|
"optional": false,
|
|
38766
38805
|
"returnType": "void",
|
|
38767
38806
|
"typeParameters": [],
|
|
38768
|
-
"line":
|
|
38807
|
+
"line": 310,
|
|
38769
38808
|
"deprecated": false,
|
|
38770
38809
|
"deprecationMessage": "",
|
|
38771
38810
|
"rawdescription": "\n\nThis is the initial value set to the component\n",
|
|
@@ -38776,8 +38815,8 @@
|
|
|
38776
38815
|
"jsdoctags": [
|
|
38777
38816
|
{
|
|
38778
38817
|
"name": {
|
|
38779
|
-
"pos":
|
|
38780
|
-
"end":
|
|
38818
|
+
"pos": 8230,
|
|
38819
|
+
"end": 8235,
|
|
38781
38820
|
"flags": 16842752,
|
|
38782
38821
|
"modifierFlagsCache": 0,
|
|
38783
38822
|
"transformFlags": 0,
|
|
@@ -38788,8 +38827,8 @@
|
|
|
38788
38827
|
"deprecated": false,
|
|
38789
38828
|
"deprecationMessage": "",
|
|
38790
38829
|
"tagName": {
|
|
38791
|
-
"pos":
|
|
38792
|
-
"end":
|
|
38830
|
+
"pos": 8224,
|
|
38831
|
+
"end": 8229,
|
|
38793
38832
|
"flags": 16842752,
|
|
38794
38833
|
"modifierFlagsCache": 0,
|
|
38795
38834
|
"transformFlags": 0,
|
|
@@ -38809,7 +38848,39 @@
|
|
|
38809
38848
|
"defaultValue": "true",
|
|
38810
38849
|
"deprecated": false,
|
|
38811
38850
|
"deprecationMessage": "",
|
|
38812
|
-
"line":
|
|
38851
|
+
"line": 155,
|
|
38852
|
+
"type": "boolean",
|
|
38853
|
+
"decorators": []
|
|
38854
|
+
},
|
|
38855
|
+
{
|
|
38856
|
+
"name": "class.cds--number-input--fluid--disabled",
|
|
38857
|
+
"deprecated": false,
|
|
38858
|
+
"deprecationMessage": "",
|
|
38859
|
+
"line": 280,
|
|
38860
|
+
"type": "boolean",
|
|
38861
|
+
"decorators": []
|
|
38862
|
+
},
|
|
38863
|
+
{
|
|
38864
|
+
"name": "class.cds--number-input--fluid--focus",
|
|
38865
|
+
"deprecated": false,
|
|
38866
|
+
"deprecationMessage": "",
|
|
38867
|
+
"line": 284,
|
|
38868
|
+
"type": "boolean",
|
|
38869
|
+
"decorators": []
|
|
38870
|
+
},
|
|
38871
|
+
{
|
|
38872
|
+
"name": "class.cds--number-input--fluid--invalid",
|
|
38873
|
+
"deprecated": false,
|
|
38874
|
+
"deprecationMessage": "",
|
|
38875
|
+
"line": 276,
|
|
38876
|
+
"type": "boolean",
|
|
38877
|
+
"decorators": []
|
|
38878
|
+
},
|
|
38879
|
+
{
|
|
38880
|
+
"name": "class.cds--text-input--fluid__skeleton",
|
|
38881
|
+
"deprecated": false,
|
|
38882
|
+
"deprecationMessage": "",
|
|
38883
|
+
"line": 288,
|
|
38813
38884
|
"type": "boolean",
|
|
38814
38885
|
"decorators": []
|
|
38815
38886
|
}
|
|
@@ -38821,7 +38892,7 @@
|
|
|
38821
38892
|
"argsDecorator": [],
|
|
38822
38893
|
"deprecated": false,
|
|
38823
38894
|
"deprecationMessage": "",
|
|
38824
|
-
"line":
|
|
38895
|
+
"line": 330
|
|
38825
38896
|
}
|
|
38826
38897
|
],
|
|
38827
38898
|
"standalone": false,
|
|
@@ -38829,7 +38900,7 @@
|
|
|
38829
38900
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { NumberModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-number--basic\">See demo</a></p>\n",
|
|
38830
38901
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { NumberModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-number--basic)\n",
|
|
38831
38902
|
"type": "component",
|
|
38832
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\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 * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
|
|
38903
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\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 * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (<HTMLInputElement>event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n",
|
|
38833
38904
|
"assetsDirs": [],
|
|
38834
38905
|
"styleUrlsData": "",
|
|
38835
38906
|
"stylesData": "",
|
|
@@ -38846,7 +38917,7 @@
|
|
|
38846
38917
|
"deprecationMessage": ""
|
|
38847
38918
|
}
|
|
38848
38919
|
],
|
|
38849
|
-
"line":
|
|
38920
|
+
"line": 297,
|
|
38850
38921
|
"rawdescription": "\n\nCreates an instance of `Number`.\n",
|
|
38851
38922
|
"jsdoctags": [
|
|
38852
38923
|
{
|
|
@@ -38881,7 +38952,7 @@
|
|
|
38881
38952
|
}
|
|
38882
38953
|
],
|
|
38883
38954
|
"returnType": "void",
|
|
38884
|
-
"line":
|
|
38955
|
+
"line": 197,
|
|
38885
38956
|
"rawdescription": "\n\nSets the value attribute on the `input` element.\n",
|
|
38886
38957
|
"description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
|
|
38887
38958
|
"jsdoctags": [
|
|
@@ -38900,7 +38971,7 @@
|
|
|
38900
38971
|
"name": "value",
|
|
38901
38972
|
"type": "",
|
|
38902
38973
|
"returnType": "",
|
|
38903
|
-
"line":
|
|
38974
|
+
"line": 205
|
|
38904
38975
|
}
|
|
38905
38976
|
},
|
|
38906
38977
|
"decrementLabel": {
|
|
@@ -38919,7 +38990,7 @@
|
|
|
38919
38990
|
}
|
|
38920
38991
|
],
|
|
38921
38992
|
"returnType": "void",
|
|
38922
|
-
"line":
|
|
38993
|
+
"line": 254,
|
|
38923
38994
|
"jsdoctags": [
|
|
38924
38995
|
{
|
|
38925
38996
|
"name": "value",
|
|
@@ -38936,7 +39007,7 @@
|
|
|
38936
39007
|
"name": "decrementLabel",
|
|
38937
39008
|
"type": "",
|
|
38938
39009
|
"returnType": "",
|
|
38939
|
-
"line":
|
|
39010
|
+
"line": 258
|
|
38940
39011
|
}
|
|
38941
39012
|
},
|
|
38942
39013
|
"incrementLabel": {
|
|
@@ -38955,7 +39026,7 @@
|
|
|
38955
39026
|
}
|
|
38956
39027
|
],
|
|
38957
39028
|
"returnType": "void",
|
|
38958
|
-
"line":
|
|
39029
|
+
"line": 263,
|
|
38959
39030
|
"jsdoctags": [
|
|
38960
39031
|
{
|
|
38961
39032
|
"name": "value",
|
|
@@ -38972,7 +39043,43 @@
|
|
|
38972
39043
|
"name": "incrementLabel",
|
|
38973
39044
|
"type": "",
|
|
38974
39045
|
"returnType": "",
|
|
38975
|
-
"line":
|
|
39046
|
+
"line": 267
|
|
39047
|
+
}
|
|
39048
|
+
},
|
|
39049
|
+
"fluidInvalid": {
|
|
39050
|
+
"name": "fluidInvalid",
|
|
39051
|
+
"getSignature": {
|
|
39052
|
+
"name": "fluidInvalid",
|
|
39053
|
+
"type": "",
|
|
39054
|
+
"returnType": "",
|
|
39055
|
+
"line": 276
|
|
39056
|
+
}
|
|
39057
|
+
},
|
|
39058
|
+
"fluidDisabled": {
|
|
39059
|
+
"name": "fluidDisabled",
|
|
39060
|
+
"getSignature": {
|
|
39061
|
+
"name": "fluidDisabled",
|
|
39062
|
+
"type": "",
|
|
39063
|
+
"returnType": "",
|
|
39064
|
+
"line": 280
|
|
39065
|
+
}
|
|
39066
|
+
},
|
|
39067
|
+
"fluidFocus": {
|
|
39068
|
+
"name": "fluidFocus",
|
|
39069
|
+
"getSignature": {
|
|
39070
|
+
"name": "fluidFocus",
|
|
39071
|
+
"type": "",
|
|
39072
|
+
"returnType": "",
|
|
39073
|
+
"line": 284
|
|
39074
|
+
}
|
|
39075
|
+
},
|
|
39076
|
+
"fluidSkeleton": {
|
|
39077
|
+
"name": "fluidSkeleton",
|
|
39078
|
+
"getSignature": {
|
|
39079
|
+
"name": "fluidSkeleton",
|
|
39080
|
+
"type": "",
|
|
39081
|
+
"returnType": "",
|
|
39082
|
+
"line": 288
|
|
38976
39083
|
}
|
|
38977
39084
|
}
|
|
38978
39085
|
}
|
|
@@ -73225,6 +73332,16 @@
|
|
|
73225
73332
|
"type": "",
|
|
73226
73333
|
"defaultValue": "Template.bind({})"
|
|
73227
73334
|
},
|
|
73335
|
+
{
|
|
73336
|
+
"name": "Fluid",
|
|
73337
|
+
"ctype": "miscellaneous",
|
|
73338
|
+
"subtype": "variable",
|
|
73339
|
+
"file": "src/number-input/number.stories.ts",
|
|
73340
|
+
"deprecated": false,
|
|
73341
|
+
"deprecationMessage": "",
|
|
73342
|
+
"type": "",
|
|
73343
|
+
"defaultValue": "Template.bind({})"
|
|
73344
|
+
},
|
|
73228
73345
|
{
|
|
73229
73346
|
"name": "Fluid",
|
|
73230
73347
|
"ctype": "miscellaneous",
|
|
@@ -73727,7 +73844,7 @@
|
|
|
73727
73844
|
"deprecated": false,
|
|
73728
73845
|
"deprecationMessage": "",
|
|
73729
73846
|
"type": "",
|
|
73730
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
|
|
73847
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
|
|
73731
73848
|
},
|
|
73732
73849
|
{
|
|
73733
73850
|
"name": "ModelTemplate",
|
|
@@ -74784,7 +74901,7 @@
|
|
|
74784
74901
|
"deprecated": false,
|
|
74785
74902
|
"deprecationMessage": "",
|
|
74786
74903
|
"type": "",
|
|
74787
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number
|
|
74904
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
|
|
74788
74905
|
},
|
|
74789
74906
|
{
|
|
74790
74907
|
"name": "SkeletonTemplate",
|
|
@@ -75174,7 +75291,7 @@
|
|
|
75174
75291
|
"deprecated": false,
|
|
75175
75292
|
"deprecationMessage": "",
|
|
75176
75293
|
"type": "",
|
|
75177
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\">\n\t\t</cds-number>\n\t`\n})"
|
|
75294
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
|
|
75178
75295
|
},
|
|
75179
75296
|
{
|
|
75180
75297
|
"name": "Template",
|
|
@@ -80116,6 +80233,16 @@
|
|
|
80116
80233
|
"type": "",
|
|
80117
80234
|
"defaultValue": "Template.bind({})"
|
|
80118
80235
|
},
|
|
80236
|
+
{
|
|
80237
|
+
"name": "Fluid",
|
|
80238
|
+
"ctype": "miscellaneous",
|
|
80239
|
+
"subtype": "variable",
|
|
80240
|
+
"file": "src/number-input/number.stories.ts",
|
|
80241
|
+
"deprecated": false,
|
|
80242
|
+
"deprecationMessage": "",
|
|
80243
|
+
"type": "",
|
|
80244
|
+
"defaultValue": "Template.bind({})"
|
|
80245
|
+
},
|
|
80119
80246
|
{
|
|
80120
80247
|
"name": "ModelTemplate",
|
|
80121
80248
|
"ctype": "miscellaneous",
|
|
@@ -80124,7 +80251,7 @@
|
|
|
80124
80251
|
"deprecated": false,
|
|
80125
80252
|
"deprecationMessage": "",
|
|
80126
80253
|
"type": "",
|
|
80127
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
|
|
80254
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
|
|
80128
80255
|
},
|
|
80129
80256
|
{
|
|
80130
80257
|
"name": "NgModel",
|
|
@@ -80154,7 +80281,7 @@
|
|
|
80154
80281
|
"deprecated": false,
|
|
80155
80282
|
"deprecationMessage": "",
|
|
80156
80283
|
"type": "",
|
|
80157
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number
|
|
80284
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
|
|
80158
80285
|
},
|
|
80159
80286
|
{
|
|
80160
80287
|
"name": "Template",
|
|
@@ -80164,7 +80291,7 @@
|
|
|
80164
80291
|
"deprecated": false,
|
|
80165
80292
|
"deprecationMessage": "",
|
|
80166
80293
|
"type": "",
|
|
80167
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\">\n\t\t</cds-number>\n\t`\n})"
|
|
80294
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
|
|
80168
80295
|
}
|
|
80169
80296
|
],
|
|
80170
80297
|
"src/pagination/pagination-nav.stories.ts": [
|
|
@@ -87147,8 +87274,8 @@
|
|
|
87147
87274
|
"type": "component",
|
|
87148
87275
|
"linktype": "component",
|
|
87149
87276
|
"name": "NumberComponent",
|
|
87150
|
-
"coveragePercent":
|
|
87151
|
-
"coverageCount": "
|
|
87277
|
+
"coveragePercent": 67,
|
|
87278
|
+
"coverageCount": "33/49",
|
|
87152
87279
|
"status": "good"
|
|
87153
87280
|
},
|
|
87154
87281
|
{
|
|
@@ -87170,6 +87297,16 @@
|
|
|
87170
87297
|
"coverageCount": "0/1",
|
|
87171
87298
|
"status": "low"
|
|
87172
87299
|
},
|
|
87300
|
+
{
|
|
87301
|
+
"filePath": "src/number-input/number.stories.ts",
|
|
87302
|
+
"type": "variable",
|
|
87303
|
+
"linktype": "miscellaneous",
|
|
87304
|
+
"linksubtype": "variable",
|
|
87305
|
+
"name": "Fluid",
|
|
87306
|
+
"coveragePercent": 0,
|
|
87307
|
+
"coverageCount": "0/1",
|
|
87308
|
+
"status": "low"
|
|
87309
|
+
},
|
|
87173
87310
|
{
|
|
87174
87311
|
"filePath": "src/number-input/number.stories.ts",
|
|
87175
87312
|
"type": "variable",
|