cax-design-system 2.1.0 → 2.3.0

package/fesm2022/cax-design-system-badge.mjs

@@ -30,13 +30,13 @@ class Badge {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Badge, selector: "cax-badge", inputs: { styleClass: "styleClass", style: "style", badgeSize: "badgeSize", severity: "severity", value: "value", badgeDisabled: "badgeDisabled", size: "size" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n", styles: ["@layer cax{.cax-badge{display:inline-block;border-radius:50px;text-align:center;padding:0 .5rem}.cax-overlay-badge{position:relative}.cax-overlay-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.cax-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.cax-badge-no-gutter{padding:0;border-radius:50%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Badge, selector: "cax-badge", inputs: { styleClass: "styleClass", style: "style", badgeSize: "badgeSize", severity: "severity", value: "value", badgeDisabled: "badgeDisabled", size: "size" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n", styles: ["@layer cax{.cax-badge{display:inline-block;border-radius:50px;text-align:center;padding:0 .5rem}.cax-overlay-badge{position:relative}.cax-overlay-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.cax-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.cax-badge-no-gutter{padding:0;border-radius:50%}.cax-badge-button-wrapper{position:relative;display:inline-flex}.cax-badge-button-wrapper .cax-badge{position:absolute;top:-8px;right:-8px;transform:none;min-width:20px;height:20px;line-height:20px;font-size:12px;z-index:1}.cax-button-badge{position:relative!important}.cax-button-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);z-index:1;min-width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:.75rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Badge, decorators: [{
             type: Component,
             args: [{ selector: 'cax-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, template: "<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n", styles: ["@layer cax{.cax-badge{display:inline-block;border-radius:50px;text-align:center;padding:0 .5rem}.cax-overlay-badge{position:relative}.cax-overlay-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.cax-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.cax-badge-no-gutter{padding:0;border-radius:50%}}\n"] }]
+                    }, template: "<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n", styles: ["@layer cax{.cax-badge{display:inline-block;border-radius:50px;text-align:center;padding:0 .5rem}.cax-overlay-badge{position:relative}.cax-overlay-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.cax-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.cax-badge-no-gutter{padding:0;border-radius:50%}.cax-badge-button-wrapper{position:relative;display:inline-flex}.cax-badge-button-wrapper .cax-badge{position:absolute;top:-8px;right:-8px;transform:none;min-width:20px;height:20px;line-height:20px;font-size:12px;z-index:1}.cax-button-badge{position:relative!important}.cax-button-badge .cax-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);z-index:1;min-width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:.75rem}}\n"] }]
         }], propDecorators: { styleClass: [{
                 type: Input
             }], style: [{
@@ -67,14 +67,23 @@ class BadgeDirective {
         return this._size;
     }
     _size;
-    severity = 'primary';
+    set caxBadge(val) {
+        this.value = val;
+    }
     value;
+    badgeSeverity;
+    severity = 'primary';
     badgeStyle;
     badgeStyleClass;
     id;
     badgeEl;
     get activeElement() {
-        return this.el.nativeElement.nodeName.indexOf('-') !== -1 ? this.el.nativeElement.firstChild : this.el.nativeElement;
+        const element = this.el.nativeElement;
+        if (element.tagName.toLowerCase() === 'cax-button') {
+            DomHandler.addClass(element, 'cax-button-badge');
+            return element;
+        }
+        return element.nodeName.indexOf('-') !== -1 ? element.firstChild : element;
     }
     get canUpdateBadge() {
         return this.id && !this.disabled;
@@ -177,12 +186,11 @@ class BadgeDirective {
         if (!badge) {
             return;
         }
-        if (this.severity) {
-            DomHandler.addClass(badge, `cax-badge-${this.severity}`);
-        }
         if (oldSeverity) {
             DomHandler.removeClass(badge, `cax-badge-${oldSeverity}`);
         }
+        const severityToUse = this.badgeSeverity || this.severity || 'primary';
+        DomHandler.addClass(badge, `cax-badge-${severityToUse}`);
     }
     toggleDisableState() {
         if (!this.id) {
@@ -199,7 +207,7 @@ class BadgeDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BadgeDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: BadgeDirective, selector: "[caxBadge]", inputs: { disabled: ["badgeDisabled", "disabled"], badgeSize: "badgeSize", size: "size", severity: "severity", value: "value", badgeStyle: "badgeStyle", badgeStyleClass: "badgeStyleClass" }, host: { classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: BadgeDirective, selector: "[caxBadge]", inputs: { disabled: ["badgeDisabled", "disabled"], badgeSize: "badgeSize", size: "size", caxBadge: "caxBadge", value: "value", badgeSeverity: "badgeSeverity", severity: "severity", badgeStyle: "badgeStyle", badgeStyleClass: "badgeStyleClass" }, host: { classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
@@ -219,10 +227,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], size: [{
                 type: Input
-            }], severity: [{
+            }], caxBadge: [{
                 type: Input
             }], value: [{
                 type: Input
+            }], badgeSeverity: [{
+                type: Input
+            }], severity: [{
+                type: Input
             }], badgeStyle: [{
                 type: Input
             }], badgeStyleClass: [{

package/fesm2022/cax-design-system-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-badge.mjs","sources":["../../src/app/components/badge/badge.ts","../../src/app/components/badge/badge.html","../../src/app/components/badge/badge.directive.ts","../../src/app/components/badge/badge.module.ts","../../src/app/components/badge/cax-design-system-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n    selector: 'cax-badge',\n    templateUrl: './badge.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./badge.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Badge {\n    @Input() styleClass: string | undefined;\n    @Input() style: { [klass: string]: any } | null | undefined;\n    @Input() badgeSize: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n    @Input() severity: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n    @Input() value: string | number | null | undefined;\n    @Input() badgeDisabled: boolean = false;\n\n    @Input() public set size(value: 'xs' | 'sm' | 'md' | 'lg') {\n        this._size = value;\n        console.warn('size property is deprecated and will removed in v18, use badgeSize instead.');\n    }\n    get size() {\n        return this._size;\n    }\n    private _size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n    containerClass() {\n        return {\n            'cax-badge cax-component': true,\n            'cax-badge-no-gutter': this.value != undefined && String(this.value).length === 1,\n            [`cax-badge-${this.badgeSize}`]: this.badgeSize,\n            [`cax-badge-${this.severity}`]: this.severity\n        };\n    }\n}\n","<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n","import { AfterViewInit, Directive, ElementRef, Inject, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { UniqueComponentId } from 'cax-design-system/utils';\n\n@Directive({\n    selector: '[caxBadge]',\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class BadgeDirective implements OnChanges, AfterViewInit {\n    @Input('badgeDisabled') public disabled: boolean;\n    @Input() public badgeSize: 'xs' | 'sm' | 'md' | 'lg' | undefined;\n    @Input() public set size(value: 'xs' | 'sm' | 'md' | 'lg') {\n        this._size = value;\n        console.warn('size property is deprecated and will removed in v18, use badgeSize instead.');\n    }\n    get size() {\n        return this._size;\n    }\n    private _size: 'xs' | 'sm' | 'md' | 'lg' | undefined;\n    @Input() public severity: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n    @Input() public value: string | number;\n    @Input() badgeStyle: { [klass: string]: any } | null | undefined;\n    @Input() badgeStyleClass: string;\n\n    private id!: string;\n    badgeEl: HTMLElement;\n\n    private get activeElement(): HTMLElement {\n        return this.el.nativeElement.nodeName.indexOf('-') !== -1 ? this.el.nativeElement.firstChild : this.el.nativeElement;\n    }\n\n    private get canUpdateBadge(): boolean {\n        return this.id && !this.disabled;\n    }\n\n    constructor(\n        @Inject(DOCUMENT) private document: Document,\n        public el: ElementRef,\n        private renderer: Renderer2\n    ) {}\n\n    public ngOnChanges(changes: SimpleChanges): void {\n        if (changes.disabled || changes.badgeDisabled) {\n            this.toggleDisableState();\n        }\n        if (!this.canUpdateBadge) {\n            return;\n        }\n        if (changes.severity) {\n            this.setSeverity(changes.severity.previousValue);\n        }\n        if (changes.size || changes.badgeSize) {\n            this.setSizeClasses();\n        }\n        if (changes.value) {\n            this.setValue();\n        }\n        if (changes.badgeStyle || changes.badgeStyleClass) {\n            this.applyStyles();\n        }\n    }\n\n    public ngAfterViewInit(): void {\n        this.id = UniqueComponentId() + '_badge';\n        this.renderBadgeContent();\n    }\n\n    private setValue(element?: HTMLElement): void {\n        const badge = element ?? this.document.getElementById(this.id);\n\n        if (!badge) {\n            return;\n        }\n\n        if (this.value != null) {\n            if (DomHandler.hasClass(badge, 'cax-badge-dot')) {\n                DomHandler.removeClass(badge, 'cax-badge-dot');\n            }\n\n            if (this.value && String(this.value).length === 1) {\n                DomHandler.addClass(badge, 'cax-badge-no-gutter');\n            } else {\n                DomHandler.removeClass(badge, 'cax-badge-no-gutter');\n            }\n        } else {\n            if (!DomHandler.hasClass(badge, 'cax-badge-dot')) {\n                DomHandler.addClass(badge, 'cax-badge-dot');\n            }\n\n            DomHandler.removeClass(badge, 'cax-badge-no-gutter');\n        }\n\n        badge.innerHTML = '';\n        const badgeValue = this.value != null ? String(this.value) : '';\n        this.renderer.appendChild(badge, this.document.createTextNode(badgeValue));\n    }\n\n    private setSizeClasses(element?: HTMLElement): void {\n        const badge = element ?? this.document.getElementById(this.id);\n\n        if (!badge) {\n            return;\n        }\n        // Remove any existing size classes\n        ['xs', 'sm', 'md', 'lg'].forEach((s) => DomHandler.removeClass(badge, `cax-badge-${s}`));\n        const sizeToUse = this.badgeSize || this.size;\n        if (sizeToUse) {\n            DomHandler.addClass(badge, `cax-badge-${sizeToUse}`);\n        }\n    }\n\n    private renderBadgeContent(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const el = this.activeElement;\n        const badge = this.document.createElement('span');\n        badge.id = this.id;\n        badge.className = 'cax-badge cax-component';\n\n        this.setSeverity(null, badge);\n        this.setSizeClasses(badge);\n        this.setValue(badge);\n        DomHandler.addClass(el, 'cax-overlay-badge');\n        this.renderer.appendChild(el, badge);\n        this.badgeEl = badge;\n        this.applyStyles();\n    }\n\n    private applyStyles(): void {\n        if (this.badgeEl && this.badgeStyle && typeof this.badgeStyle === 'object') {\n            for (const [key, value] of Object.entries(this.badgeStyle)) {\n                this.renderer.setStyle(this.badgeEl, key, value);\n            }\n        }\n        if (this.badgeEl && this.badgeStyleClass) {\n            this.badgeEl.classList.add(...this.badgeStyleClass.split(' '));\n        }\n    }\n\n    private setSeverity(oldSeverity?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger', element?: HTMLElement): void {\n        const badge = element ?? this.document.getElementById(this.id);\n\n        if (!badge) {\n            return;\n        }\n\n        if (this.severity) {\n            DomHandler.addClass(badge, `cax-badge-${this.severity}`);\n        }\n\n        if (oldSeverity) {\n            DomHandler.removeClass(badge, `cax-badge-${oldSeverity}`);\n        }\n    }\n\n    private toggleDisableState(): void {\n        if (!this.id) {\n            return;\n        }\n\n        if (this.disabled) {\n            const badge = this.activeElement?.querySelector(`#${this.id}`);\n\n            if (badge) {\n                this.renderer.removeChild(this.activeElement, badge);\n            }\n        } else {\n            this.renderBadgeContent();\n        }\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { Badge } from './badge';\nimport { BadgeDirective } from './badge.directive';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [Badge, BadgeDirective],\n    declarations: [Badge, BadgeDirective]\n})\nexport class BadgeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-badge.mjs","sources":["../../src/app/components/badge/badge.ts","../../src/app/components/badge/badge.html","../../src/app/components/badge/badge.directive.ts","../../src/app/components/badge/badge.module.ts","../../src/app/components/badge/cax-design-system-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n    selector: 'cax-badge',\n    templateUrl: './badge.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./badge.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Badge {\n    @Input() styleClass: string | undefined;\n    @Input() style: { [klass: string]: any } | null | undefined;\n    @Input() badgeSize: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n    @Input() severity: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n    @Input() value: string | number | null | undefined;\n    @Input() badgeDisabled: boolean = false;\n\n    @Input() public set size(value: 'xs' | 'sm' | 'md' | 'lg') {\n        this._size = value;\n        console.warn('size property is deprecated and will removed in v18, use badgeSize instead.');\n    }\n    get size() {\n        return this._size;\n    }\n    private _size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n    containerClass() {\n        return {\n            'cax-badge cax-component': true,\n            'cax-badge-no-gutter': this.value != undefined && String(this.value).length === 1,\n            [`cax-badge-${this.badgeSize}`]: this.badgeSize,\n            [`cax-badge-${this.severity}`]: this.severity\n        };\n    }\n}\n","<span\r\n  *ngIf=\"!badgeDisabled\"\r\n  [ngClass]=\"containerClass()\"\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n>\r\n  {{ value }}\r\n</span>\r\n","import { AfterViewInit, Directive, ElementRef, Inject, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { UniqueComponentId } from 'cax-design-system/utils';\n\n@Directive({\n    selector: '[caxBadge]',\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class BadgeDirective implements OnChanges, AfterViewInit {\n    @Input('badgeDisabled') public disabled: boolean;\n    @Input() public badgeSize: 'xs' | 'sm' | 'md' | 'lg' | undefined;\n    @Input() public set size(value: 'xs' | 'sm' | 'md' | 'lg') {\n        this._size = value;\n        console.warn('size property is deprecated and will removed in v18, use badgeSize instead.');\n    }\n    get size() {\n        return this._size;\n    }\n    private _size: 'xs' | 'sm' | 'md' | 'lg' | undefined;\n    @Input() public set caxBadge(val: string | number) {\n        this.value = val;\n    }\n    @Input() public value: string | number;\n    @Input() public badgeSeverity: string;\n    @Input() public severity: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n    @Input() badgeStyle: { [klass: string]: any } | null | undefined;\n    @Input() badgeStyleClass: string;\n\n    private id!: string;\n    badgeEl: HTMLElement;\n\n    private get activeElement(): HTMLElement {\n        const element = this.el.nativeElement;\n        if (element.tagName.toLowerCase() === 'cax-button') {\n            DomHandler.addClass(element, 'cax-button-badge');\n            return element;\n        }\n        return element.nodeName.indexOf('-') !== -1 ? element.firstChild : element;\n    }\n\n    private get canUpdateBadge(): boolean {\n        return this.id && !this.disabled;\n    }\n\n    constructor(\n        @Inject(DOCUMENT) private document: Document,\n        public el: ElementRef,\n        private renderer: Renderer2\n    ) {}\n\n    public ngOnChanges(changes: SimpleChanges): void {\n        if (changes.disabled || changes.badgeDisabled) {\n            this.toggleDisableState();\n        }\n        if (!this.canUpdateBadge) {\n            return;\n        }\n        if (changes.severity) {\n            this.setSeverity(changes.severity.previousValue);\n        }\n        if (changes.size || changes.badgeSize) {\n            this.setSizeClasses();\n        }\n        if (changes.value) {\n            this.setValue();\n        }\n        if (changes.badgeStyle || changes.badgeStyleClass) {\n            this.applyStyles();\n        }\n    }\n\n    public ngAfterViewInit(): void {\n        this.id = UniqueComponentId() + '_badge';\n        this.renderBadgeContent();\n    }\n\n    private setValue(element?: HTMLElement): void {\n        const badge = element ?? this.document.getElementById(this.id);\n\n        if (!badge) {\n            return;\n        }\n\n        if (this.value != null) {\n            if (DomHandler.hasClass(badge, 'cax-badge-dot')) {\n                DomHandler.removeClass(badge, 'cax-badge-dot');\n            }\n\n            if (this.value && String(this.value).length === 1) {\n                DomHandler.addClass(badge, 'cax-badge-no-gutter');\n            } else {\n                DomHandler.removeClass(badge, 'cax-badge-no-gutter');\n            }\n        } else {\n            if (!DomHandler.hasClass(badge, 'cax-badge-dot')) {\n                DomHandler.addClass(badge, 'cax-badge-dot');\n            }\n\n            DomHandler.removeClass(badge, 'cax-badge-no-gutter');\n        }\n\n        badge.innerHTML = '';\n        const badgeValue = this.value != null ? String(this.value) : '';\n        this.renderer.appendChild(badge, this.document.createTextNode(badgeValue));\n    }\n\n    private setSizeClasses(element?: HTMLElement): void {\n        const badge = element ?? this.document.getElementById(this.id);\n\n        if (!badge) {\n            return;\n        }\n        // Remove any existing size classes\n        ['xs', 'sm', 'md', 'lg'].forEach((s) => DomHandler.removeClass(badge, `cax-badge-${s}`));\n        const sizeToUse = this.badgeSize || this.size;\n        if (sizeToUse) {\n            DomHandler.addClass(badge, `cax-badge-${sizeToUse}`);\n        }\n    }\n\n    private renderBadgeContent(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const el = this.activeElement;\n        const badge = this.document.createElement('span');\n        badge.id = this.id;\n        badge.className = 'cax-badge cax-component';\n\n        this.setSeverity(null, badge);\n        this.setSizeClasses(badge);\n        this.setValue(badge);\n        DomHandler.addClass(el, 'cax-overlay-badge');\n        this.renderer.appendChild(el, badge);\n        this.badgeEl = badge;\n        this.applyStyles();\n    }\n\n    private applyStyles(): void {\n        if (this.badgeEl && this.badgeStyle && typeof this.badgeStyle === 'object') {\n            for (const [key, value] of Object.entries(this.badgeStyle)) {\n                this.renderer.setStyle(this.badgeEl, key, value);\n            }\n        }\n        if (this.badgeEl && this.badgeStyleClass) {\n            this.badgeEl.classList.add(...this.badgeStyleClass.split(' '));\n        }\n    }\n\n    private setSeverity(oldSeverity?: string, element?: HTMLElement): void {\n        const badge = element ?? this.document.getElementById(this.id);\n\n        if (!badge) {\n            return;\n        }\n\n        if (oldSeverity) {\n            DomHandler.removeClass(badge, `cax-badge-${oldSeverity}`);\n        }\n\n        const severityToUse = this.badgeSeverity || this.severity || 'primary';\n        DomHandler.addClass(badge, `cax-badge-${severityToUse}`);\n    }\n\n    private toggleDisableState(): void {\n        if (!this.id) {\n            return;\n        }\n\n        if (this.disabled) {\n            const badge = this.activeElement?.querySelector(`#${this.id}`);\n\n            if (badge) {\n                this.renderer.removeChild(this.activeElement, badge);\n            }\n        } else {\n            this.renderBadgeContent();\n        }\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { Badge } from './badge';\nimport { BadgeDirective } from './badge.directive';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [Badge, BadgeDirective],\n    declarations: [Badge, BadgeDirective]\n})\nexport class BadgeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-inputnumber.mjs

@@ -206,6 +206,11 @@ class InputNumber {
      * @group Props
      */
     maxFractionDigits;
+    /**
+     * Icon class to show before the input value
+     * @group Props
+     */
+    prefixIcon;
     /**
      * Text to display before the value.
      * @group Props
@@ -427,14 +432,13 @@ class InputNumber {
     formatValue(value) {
         if (value != null) {
             if (value === '-') {
-                // Minus sign
                 return value;
             }
             if (this.format) {
                 let formatter = new Intl.NumberFormat(this.locale, this.getOptions());
                 let formattedValue = formatter.format(value);
                 if (this.prefix && value != this.prefix) {
-                    formattedValue = this.prefix + formattedValue;
+                    formattedValue = this.prefix + ' ' + formattedValue;
                 }
                 if (this.suffix && value != this.suffix) {
                     formattedValue = formattedValue + this.suffix;
@@ -1157,7 +1161,7 @@ class InputNumber {
         }
     }
     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 });
-    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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputNumber, decorators: [{
             type: Component,
@@ -1166,7 +1170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': 'focused',
                         '[class.cax-inputnumber-clearable]': 'showClear && buttonLayout != "vertical"'
-                    }, 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"] }]
+                    }, 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"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1255,6 +1259,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }], maxFractionDigits: [{
                 type: Input,
                 args: [{ transform: (value) => numberAttribute(value, null) }]
+            }], prefixIcon: [{
+                type: Input
             }], prefix: [{
                 type: Input
             }], suffix: [{