cax-design-system 2.2.0 → 2.3.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 +1 -1
- package/api/public_api.d.ts +1 -0
- package/api/themegeneratorservice.d.ts +12 -0
- package/esm2022/accordion/accordion.mjs +3 -3
- package/esm2022/api/public_api.mjs +2 -1
- package/esm2022/api/themegeneratorservice.mjs +109 -0
- package/esm2022/autocomplete/autocomplete.mjs +3 -3
- package/esm2022/inputnumber/inputnumber.mjs +11 -5
- package/esm2022/paginator/paginator.mjs +1 -1
- package/esm2022/splitbutton/splitbutton.mjs +2 -2
- package/esm2022/table/components/column-filter-form-element/column-filter-form-element.mjs +2 -2
- package/esm2022/toggleswitch/toggleswitch.mjs +3 -3
- package/fesm2022/cax-design-system-accordion.mjs +2 -2
- package/fesm2022/cax-design-system-accordion.mjs.map +1 -1
- package/fesm2022/cax-design-system-api.mjs +108 -1
- package/fesm2022/cax-design-system-api.mjs.map +1 -1
- package/fesm2022/cax-design-system-autocomplete.mjs +2 -2
- package/fesm2022/cax-design-system-autocomplete.mjs.map +1 -1
- package/fesm2022/cax-design-system-inputnumber.mjs +10 -4
- package/fesm2022/cax-design-system-inputnumber.mjs.map +1 -1
- package/fesm2022/cax-design-system-paginator.mjs +1 -1
- package/fesm2022/cax-design-system-paginator.mjs.map +1 -1
- package/fesm2022/cax-design-system-splitbutton.mjs +2 -2
- package/fesm2022/cax-design-system-splitbutton.mjs.map +1 -1
- package/fesm2022/cax-design-system-table.mjs +1 -1
- package/fesm2022/cax-design-system-table.mjs.map +1 -1
- package/fesm2022/cax-design-system-toggleswitch.mjs +2 -2
- package/fesm2022/cax-design-system-toggleswitch.mjs.map +1 -1
- package/inputnumber/inputnumber.d.ts +6 -1
- package/package.json +219 -219
- package/resources/cax.min.scss +1 -1
- package/resources/cax.scss +733 -339
- package/resources/components/accordion/accordion.scss +2 -0
- package/resources/components/autocomplete/autocomplete.scss +3 -7
- package/resources/components/inputnumber/inputnumber.scss +2 -9
- package/resources/components/splitbutton/splitbutton.scss +4 -2
|
@@ -206,6 +206,11 @@ class InputNumber {
|
|
|
206
206
|
* @group Props
|
|
207
207
|
*/
|
|
208
208
|
maxFractionDigits;
|
|
209
|
+
/**
|
|
210
|
+
* Icon class to show before the input value
|
|
211
|
+
* @group Props
|
|
212
|
+
*/
|
|
213
|
+
prefixIcon;
|
|
209
214
|
/**
|
|
210
215
|
* Text to display before the value.
|
|
211
216
|
* @group Props
|
|
@@ -427,14 +432,13 @@ class InputNumber {
|
|
|
427
432
|
formatValue(value) {
|
|
428
433
|
if (value != null) {
|
|
429
434
|
if (value === '-') {
|
|
430
|
-
// Minus sign
|
|
431
435
|
return value;
|
|
432
436
|
}
|
|
433
437
|
if (this.format) {
|
|
434
438
|
let formatter = new Intl.NumberFormat(this.locale, this.getOptions());
|
|
435
439
|
let formattedValue = formatter.format(value);
|
|
436
440
|
if (this.prefix && value != this.prefix) {
|
|
437
|
-
formattedValue = this.prefix + formattedValue;
|
|
441
|
+
formattedValue = this.prefix + ' ' + formattedValue;
|
|
438
442
|
}
|
|
439
443
|
if (this.suffix && value != this.suffix) {
|
|
440
444
|
formattedValue = formattedValue + this.suffix;
|
|
@@ -1157,7 +1161,7 @@ class InputNumber {
|
|
|
1157
1161
|
}
|
|
1158
1162
|
}
|
|
1159
1163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputNumber, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
|
|
1160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: InputNumber, isStandalone: true, selector: "cax-inputNumber", inputs: { showButtons: ["showButtons", "showButtons", booleanAttribute], format: ["format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: ["size", "size", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], autocomplete: "autocomplete", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: ["readonly", "readonly", booleanAttribute], step: ["step", "step", numberAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], variant: "variant", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: "disabled" }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused", "class.cax-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span\r\n [ngClass]=\"{\r\n 'cax-inputnumber cax-component': true,\r\n 'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\r\n 'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\r\n 'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'\r\n }\"\r\n [ngStyle]=\"style\"\r\n [class]=\"styleClass\"\r\n [attr.data-pc-name]=\"'inputnumber'\"\r\n [attr.data-pc-section]=\"'root'\"\r\n>\r\n <input\r\n caxInputText\r\n #input\r\n [attr.id]=\"inputId\"\r\n role=\"spinbutton\"\r\n [ngClass]=\"'cax-inputnumber-input'\"\r\n [ngStyle]=\"inputStyle\"\r\n [class]=\"inputStyleClass\"\r\n [value]=\"formattedValue()\"\r\n [attr.variant]=\"variant\"\r\n [attr.aria-valuemin]=\"min\"\r\n [attr.aria-valuemax]=\"max\"\r\n [attr.aria-valuenow]=\"value\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.title]=\"title\"\r\n [attr.size]=\"size\"\r\n [attr.name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-required]=\"ariaRequired\"\r\n [attr.required]=\"required\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n inputmode=\"decimal\"\r\n (input)=\"onUserInput($event)\"\r\n (keydown)=\"onInputKeyDown($event)\"\r\n (keypress)=\"onInputKeyPress($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (click)=\"onInputClick()\"\r\n (focus)=\"onInputFocus($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [attr.data-pc-section]=\"'input'\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\r\n />\r\n <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\r\n <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\r\n <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"incrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"decrementbutton\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n </span>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked'\"\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n [class]=\"incrementButtonClass\"\r\n class=\"cax-button-icon-only\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked'\"\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'decrementbutton'\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n</span>\r\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: AngleUpIcon, selector: "AngleUpIcon" }, { kind: "component", type: AngleDownIcon, selector: "AngleDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: InputNumber, isStandalone: true, selector: "cax-inputNumber", inputs: { showButtons: ["showButtons", "showButtons", booleanAttribute], format: ["format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: ["size", "size", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], autocomplete: "autocomplete", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: ["readonly", "readonly", booleanAttribute], step: ["step", "step", numberAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], variant: "variant", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefixIcon: "prefixIcon", prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: "disabled" }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused", "class.cax-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span\r\n [ngClass]=\"{\r\n 'cax-inputnumber cax-component': true,\r\n 'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\r\n 'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\r\n 'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical',\r\n 'cax-input-icon-left': (prefix || prefixIcon) && buttonLayout === 'stacked',\r\n 'cax-input-icon-right': suffix,\r\n 'cax-disabled': disabled\r\n }\"\r\n [ngStyle]=\"style\"\r\n [class]=\"styleClass\"\r\n [attr.data-pc-name]=\"'inputnumber'\"\r\n [attr.data-pc-section]=\"'root'\"\r\n>\r\n <!-- Only show prefix/icon in stacked layout -->\r\n <ng-container *ngIf=\"(prefix || prefixIcon) && buttonLayout === 'stacked'\">\r\n <i *ngIf=\"prefixIcon\" class=\"cax-input-prefix-icon\" [ngClass]=\"prefixIcon\"></i>\r\n </ng-container>\r\n <!-- Down button for horizontal layout -->\r\n <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n type=\"button\" caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n class=\"cax-inputnumber-button cax-inputnumber-button-down\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'decrementbutton'\">\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\"></span>\r\n </button>\r\n <input\r\n caxInputText\r\n #input\r\n [attr.id]=\"inputId\"\r\n role=\"spinbutton\"\r\n [ngClass]=\"'cax-inputnumber-input'\"\r\n [ngStyle]=\"inputStyle\"\r\n [class]=\"inputStyleClass\"\r\n [value]=\"formattedValue()\"\r\n [attr.variant]=\"variant\"\r\n [attr.aria-valuemin]=\"min\"\r\n [attr.aria-valuemax]=\"max\"\r\n [attr.aria-valuenow]=\"value\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.title]=\"title\"\r\n [attr.size]=\"size\"\r\n [attr.name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-required]=\"ariaRequired\"\r\n [attr.required]=\"required\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n inputmode=\"decimal\"\r\n (input)=\"onUserInput($event)\"\r\n (keydown)=\"onInputKeyDown($event)\"\r\n (keypress)=\"onInputKeyPress($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (click)=\"onInputClick()\"\r\n (focus)=\"onInputFocus($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [attr.data-pc-section]=\"'input'\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\r\n />\r\n <!-- Up button for horizontal layout -->\r\n <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n type=\"button\" caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n class=\"cax-inputnumber-button cax-inputnumber-button-up\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'incrementbutton'\">\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\"></span>\r\n </button>\r\n <i *ngIf=\"suffix\" class=\"cax-input-suffix\" [innerHTML]=\"suffix\"></i>\r\n <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\r\n <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\r\n <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"incrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'decrementbutton'\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n </span>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n [class]=\"incrementButtonClass\"\r\n class=\"cax-button-icon-only\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'decrementbutton'\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n</span>\r\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-radius:0 8px 0 0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-radius:0 0 8px;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: AngleUpIcon, selector: "AngleUpIcon" }, { kind: "component", type: AngleDownIcon, selector: "AngleDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1161
1165
|
}
|
|
1162
1166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputNumber, decorators: [{
|
|
1163
1167
|
type: Component,
|
|
@@ -1166,7 +1170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1166
1170
|
'[class.cax-inputwrapper-filled]': 'filled',
|
|
1167
1171
|
'[class.cax-inputwrapper-focus]': 'focused',
|
|
1168
1172
|
'[class.cax-inputnumber-clearable]': 'showClear && buttonLayout != "vertical"'
|
|
1169
|
-
}, template: "<span\r\n [ngClass]=\"{\r\n 'cax-inputnumber cax-component': true,\r\n 'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\r\n 'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\r\n 'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'\r\n }\"\r\n [ngStyle]=\"style\"\r\n [class]=\"styleClass\"\r\n [attr.data-pc-name]=\"'inputnumber'\"\r\n [attr.data-pc-section]=\"'root'\"\r\n>\r\n <input\r\n caxInputText\r\n #input\r\n [attr.id]=\"inputId\"\r\n role=\"spinbutton\"\r\n [ngClass]=\"'cax-inputnumber-input'\"\r\n [ngStyle]=\"inputStyle\"\r\n [class]=\"inputStyleClass\"\r\n [value]=\"formattedValue()\"\r\n [attr.variant]=\"variant\"\r\n [attr.aria-valuemin]=\"min\"\r\n [attr.aria-valuemax]=\"max\"\r\n [attr.aria-valuenow]=\"value\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.title]=\"title\"\r\n [attr.size]=\"size\"\r\n [attr.name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-required]=\"ariaRequired\"\r\n [attr.required]=\"required\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n inputmode=\"decimal\"\r\n (input)=\"onUserInput($event)\"\r\n (keydown)=\"onInputKeyDown($event)\"\r\n (keypress)=\"onInputKeyPress($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (click)=\"onInputClick()\"\r\n (focus)=\"onInputFocus($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [attr.data-pc-section]=\"'input'\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\r\n />\r\n <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\r\n <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\r\n <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"incrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"decrementbutton\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n </span>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked'\"\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n [class]=\"incrementButtonClass\"\r\n class=\"cax-button-icon-only\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked'\"\r\n type=\"button\"\r\n caxButton\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'decrementbutton'\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n</span>\r\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"] }]
|
|
1173
|
+
}, template: "<span\r\n [ngClass]=\"{\r\n 'cax-inputnumber cax-component': true,\r\n 'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\r\n 'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\r\n 'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical',\r\n 'cax-input-icon-left': (prefix || prefixIcon) && buttonLayout === 'stacked',\r\n 'cax-input-icon-right': suffix,\r\n 'cax-disabled': disabled\r\n }\"\r\n [ngStyle]=\"style\"\r\n [class]=\"styleClass\"\r\n [attr.data-pc-name]=\"'inputnumber'\"\r\n [attr.data-pc-section]=\"'root'\"\r\n>\r\n <!-- Only show prefix/icon in stacked layout -->\r\n <ng-container *ngIf=\"(prefix || prefixIcon) && buttonLayout === 'stacked'\">\r\n <i *ngIf=\"prefixIcon\" class=\"cax-input-prefix-icon\" [ngClass]=\"prefixIcon\"></i>\r\n </ng-container>\r\n <!-- Down button for horizontal layout -->\r\n <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n type=\"button\" caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n class=\"cax-inputnumber-button cax-inputnumber-button-down\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'decrementbutton'\">\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\"></span>\r\n </button>\r\n <input\r\n caxInputText\r\n #input\r\n [attr.id]=\"inputId\"\r\n role=\"spinbutton\"\r\n [ngClass]=\"'cax-inputnumber-input'\"\r\n [ngStyle]=\"inputStyle\"\r\n [class]=\"inputStyleClass\"\r\n [value]=\"formattedValue()\"\r\n [attr.variant]=\"variant\"\r\n [attr.aria-valuemin]=\"min\"\r\n [attr.aria-valuemax]=\"max\"\r\n [attr.aria-valuenow]=\"value\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.title]=\"title\"\r\n [attr.size]=\"size\"\r\n [attr.name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-required]=\"ariaRequired\"\r\n [attr.required]=\"required\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n inputmode=\"decimal\"\r\n (input)=\"onUserInput($event)\"\r\n (keydown)=\"onInputKeyDown($event)\"\r\n (keypress)=\"onInputKeyPress($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (click)=\"onInputClick()\"\r\n (focus)=\"onInputFocus($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [attr.data-pc-section]=\"'input'\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\r\n />\r\n <!-- Up button for horizontal layout -->\r\n <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n type=\"button\" caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n class=\"cax-inputnumber-button cax-inputnumber-button-up\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'incrementbutton'\">\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\"></span>\r\n </button>\r\n <i *ngIf=\"suffix\" class=\"cax-input-suffix\" [innerHTML]=\"suffix\"></i>\r\n <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\r\n <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\r\n <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"incrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.aria-hidden]=\"true\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'decrementbutton'\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n </span>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n [class]=\"incrementButtonClass\"\r\n class=\"cax-button-icon-only\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onUpButtonMouseDown($event)\"\r\n (mouseup)=\"onUpButtonMouseUp()\"\r\n (mouseleave)=\"onUpButtonMouseLeave()\"\r\n (keydown)=\"onUpButtonKeyDown($event)\"\r\n (keyup)=\"onUpButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'incrementbutton'\"\r\n >\r\n <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!incrementButtonIcon\">\r\n <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n <button\r\n *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"'secondary'\"\r\n [size]=\"'small'\"\r\n [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n class=\"cax-button-icon-only\"\r\n [class]=\"decrementButtonClass\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n [attr.aria-hidden]=\"true\"\r\n (mousedown)=\"onDownButtonMouseDown($event)\"\r\n (mouseup)=\"onDownButtonMouseUp()\"\r\n (mouseleave)=\"onDownButtonMouseLeave()\"\r\n (keydown)=\"onDownButtonKeyDown($event)\"\r\n (keyup)=\"onDownButtonKeyUp()\"\r\n [attr.data-pc-section]=\"'decrementbutton'\"\r\n >\r\n <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n <ng-container *ngIf=\"!decrementButtonIcon\">\r\n <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n </ng-container>\r\n </button>\r\n</span>\r\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-radius:0 8px 0 0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-radius:0 0 8px;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"] }]
|
|
1170
1174
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
1171
1175
|
type: Inject,
|
|
1172
1176
|
args: [DOCUMENT]
|
|
@@ -1255,6 +1259,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1255
1259
|
}], maxFractionDigits: [{
|
|
1256
1260
|
type: Input,
|
|
1257
1261
|
args: [{ transform: (value) => numberAttribute(value, null) }]
|
|
1262
|
+
}], prefixIcon: [{
|
|
1263
|
+
type: Input
|
|
1258
1264
|
}], prefix: [{
|
|
1259
1265
|
type: Input
|
|
1260
1266
|
}], suffix: [{
|