cax-design-system 2.2.0 → 2.4.0

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

@@ -335,7 +335,7 @@ class Image {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Image, deps: [{ token: DOCUMENT }, { token: i1.caxConfig }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Image, isStandalone: true, selector: "cax-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", styleClass: "styleClass", style: "style", src: "src", srcSet: "srcSet", sizes: "sizes", size: "size", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", previewImageSizes: "previewImageSizes", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide", onImageError: "onImageError" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n    <img\r\n        [attr.src]=\"src\"\r\n        [attr.srcset]=\"srcSet\"\r\n        [attr.sizes]=\"sizes\"\r\n        [attr.alt]=\"alt\"\r\n        [attr.width]=\"width\"\r\n        [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\"\r\n        [ngStyle]=\"imageStyle\"\r\n        [class]=\"imageClass\"\r\n        [ngClass]=\"sizeClass()\"\r\n        (error)=\"imageError($event)\"\r\n    />\r\n    <button *ngIf=\"preview\" [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" class=\"cax-image-preview-indicator\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height + 'px', width: width + 'px', border: 'none' }\">\r\n        <ng-container *ngIf=\"indicatorTemplate; else defaultTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultTemplate>\r\n            <EyeIcon [styleClass]=\"'cax-image-preview-icon'\" />\r\n        </ng-template>\r\n    </button>\r\n    <div #mask class=\"cax-image-mask cax-component-overlay cax-component-overlay-enter\" *ngIf=\"maskVisible\" [attr.aria-modal]=\"maskVisible\" role=\"dialog\" (click)=\"onMaskClick()\" (keydown)=\"onMaskKeydown($event)\" pFocusTrap>\r\n        <div class=\"cax-image-toolbar\" (click)=\"handleToolbarClick($event)\">\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\">\r\n                <RefreshIcon *ngIf=\"!rotateRightIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\">\r\n                <UndoIcon *ngIf=\"!rotateLeftIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\">\r\n                <SearchMinusIcon *ngIf=\"!zoomOutIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\">\r\n                <SearchPlusIcon *ngIf=\"!zoomInIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomInIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton>\r\n                <TimesIcon *ngIf=\"!closeIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n            </button>\r\n        </div>\r\n        <div\r\n            *ngIf=\"previewVisible\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\"\r\n            (@animation.done)=\"onAnimationEnd($event)\"\r\n        >\r\n            <img [attr.src]=\"previewImageSrc ? previewImageSrc : src\" [attr.srcset]=\"previewImageSrcSet\" [attr.sizes]=\"previewImageSizes\" class=\"cax-image-preview\" [ngStyle]=\"imagePreviewStyle()\" (click)=\"onPreviewImageClick()\" />\r\n        </div>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-image-mask{display:flex;align-items:center;justify-content:center}.cax-image-preview-container{position:relative;display:inline-block;line-height:0}.cax-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cax-image-preview-icon.pi{font-size:1.5rem}.cax-image-preview-icon.cax-icon{scale:1.5}.cax-image-preview-container:hover>.cax-image-preview-indicator{opacity:1;cursor:pointer}.cax-image-preview-container>img{cursor:pointer}.cax-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1}.cax-image-action.cax-link{display:flex;justify-content:center;align-items:center}.cax-image-action.cax-link[disabled]{opacity:.5}.cax-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cax-image-xsm{height:40px;width:auto}.cax-image-sm{height:80px;width:auto}.cax-image-md{height:120px;width:auto}.cax-image-lg{height:160px;width:auto}.cax-image-xl{height:200px;width:auto}}\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: SharedModule }, { kind: "component", type: RefreshIcon, selector: "RefreshIcon" }, { kind: "component", type: EyeIcon, selector: "EyeIcon" }, { kind: "component", type: UndoIcon, selector: "UndoIcon" }, { kind: "component", type: SearchMinusIcon, selector: "SearchMinusIcon" }, { kind: "component", type: SearchPlusIcon, selector: "SearchPlusIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: FocusTrapModule }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Image, isStandalone: true, selector: "cax-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", styleClass: "styleClass", style: "style", src: "src", srcSet: "srcSet", sizes: "sizes", size: "size", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", previewImageSizes: "previewImageSizes", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide", onImageError: "onImageError" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n    <img\r\n        [attr.src]=\"src\"\r\n        [attr.srcset]=\"srcSet\"\r\n        [attr.sizes]=\"sizes\"\r\n        [attr.alt]=\"alt\"\r\n        [attr.width]=\"width\"\r\n        [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\"\r\n        [ngStyle]=\"imageStyle\"\r\n        [class]=\"imageClass\"\r\n        [ngClass]=\"sizeClass()\"\r\n        (error)=\"imageError($event)\"\r\n    />\r\n    <button *ngIf=\"preview\" [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" class=\"cax-image-preview-indicator\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height + 'px', width: width + 'px', border: 'none' }\">\r\n        <ng-container *ngIf=\"indicatorTemplate; else defaultTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultTemplate>\r\n            <EyeIcon [styleClass]=\"'cax-image-preview-icon'\" />\r\n        </ng-template>\r\n    </button>\r\n    <div #mask class=\"cax-image-mask cax-component-overlay cax-component-overlay-enter\" *ngIf=\"maskVisible\" [attr.aria-modal]=\"maskVisible\" role=\"dialog\" (click)=\"onMaskClick()\" (keydown)=\"onMaskKeydown($event)\" pFocusTrap>\r\n        <div class=\"cax-image-toolbar\" (click)=\"handleToolbarClick($event)\">\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\">\r\n                <RefreshIcon *ngIf=\"!rotateRightIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\">\r\n                <UndoIcon *ngIf=\"!rotateLeftIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\">\r\n                <SearchMinusIcon *ngIf=\"!zoomOutIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\">\r\n                <SearchPlusIcon *ngIf=\"!zoomInIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomInIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton>\r\n                <TimesIcon *ngIf=\"!closeIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n            </button>\r\n        </div>\r\n        <div\r\n            *ngIf=\"previewVisible\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\"\r\n            (@animation.done)=\"onAnimationEnd($event)\"\r\n        >\r\n            <img [attr.src]=\"previewImageSrc ? previewImageSrc : src\" [attr.srcset]=\"previewImageSrcSet\" [attr.sizes]=\"previewImageSizes\" class=\"cax-image-preview\" [ngStyle]=\"imagePreviewStyle()\" (click)=\"onPreviewImageClick()\" />\r\n        </div>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-image-mask{display:flex;align-items:center;justify-content:center}.cax-image-preview-container{position:relative;display:inline-block;line-height:0}.cax-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cax-image-preview-icon.pi{font-size:1.5rem}.cax-image-preview-icon.cax-icon{scale:1.5}.cax-image-preview-container:hover>.cax-image-preview-indicator{opacity:1;cursor:pointer}.cax-image-preview-container>img{cursor:pointer}.cax-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1}.cax-image-action.cax-link{display:flex;justify-content:center;align-items:center}.cax-image-action.cax-link[disabled]{opacity:.5}.cax-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cax-image-sm{height:32px;width:auto}.cax-image-md{height:40px;width:auto}.cax-image-lg{height:48px;width:auto}.cax-image-xl{height:56px;width:auto}}\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: SharedModule }, { kind: "component", type: RefreshIcon, selector: "RefreshIcon" }, { kind: "component", type: EyeIcon, selector: "EyeIcon" }, { kind: "component", type: UndoIcon, selector: "UndoIcon" }, { kind: "component", type: SearchMinusIcon, selector: "SearchMinusIcon" }, { kind: "component", type: SearchPlusIcon, selector: "SearchPlusIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: FocusTrapModule }], animations: [
             trigger('animation', [
                 transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
                 transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
@@ -351,7 +351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         ])
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, SharedModule, RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, FocusTrapModule], host: {
                         class: 'cax-element'
-                    }, template: "<span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n    <img\r\n        [attr.src]=\"src\"\r\n        [attr.srcset]=\"srcSet\"\r\n        [attr.sizes]=\"sizes\"\r\n        [attr.alt]=\"alt\"\r\n        [attr.width]=\"width\"\r\n        [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\"\r\n        [ngStyle]=\"imageStyle\"\r\n        [class]=\"imageClass\"\r\n        [ngClass]=\"sizeClass()\"\r\n        (error)=\"imageError($event)\"\r\n    />\r\n    <button *ngIf=\"preview\" [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" class=\"cax-image-preview-indicator\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height + 'px', width: width + 'px', border: 'none' }\">\r\n        <ng-container *ngIf=\"indicatorTemplate; else defaultTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultTemplate>\r\n            <EyeIcon [styleClass]=\"'cax-image-preview-icon'\" />\r\n        </ng-template>\r\n    </button>\r\n    <div #mask class=\"cax-image-mask cax-component-overlay cax-component-overlay-enter\" *ngIf=\"maskVisible\" [attr.aria-modal]=\"maskVisible\" role=\"dialog\" (click)=\"onMaskClick()\" (keydown)=\"onMaskKeydown($event)\" pFocusTrap>\r\n        <div class=\"cax-image-toolbar\" (click)=\"handleToolbarClick($event)\">\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\">\r\n                <RefreshIcon *ngIf=\"!rotateRightIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\">\r\n                <UndoIcon *ngIf=\"!rotateLeftIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\">\r\n                <SearchMinusIcon *ngIf=\"!zoomOutIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\">\r\n                <SearchPlusIcon *ngIf=\"!zoomInIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomInIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton>\r\n                <TimesIcon *ngIf=\"!closeIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n            </button>\r\n        </div>\r\n        <div\r\n            *ngIf=\"previewVisible\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\"\r\n            (@animation.done)=\"onAnimationEnd($event)\"\r\n        >\r\n            <img [attr.src]=\"previewImageSrc ? previewImageSrc : src\" [attr.srcset]=\"previewImageSrcSet\" [attr.sizes]=\"previewImageSizes\" class=\"cax-image-preview\" [ngStyle]=\"imagePreviewStyle()\" (click)=\"onPreviewImageClick()\" />\r\n        </div>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-image-mask{display:flex;align-items:center;justify-content:center}.cax-image-preview-container{position:relative;display:inline-block;line-height:0}.cax-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cax-image-preview-icon.pi{font-size:1.5rem}.cax-image-preview-icon.cax-icon{scale:1.5}.cax-image-preview-container:hover>.cax-image-preview-indicator{opacity:1;cursor:pointer}.cax-image-preview-container>img{cursor:pointer}.cax-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1}.cax-image-action.cax-link{display:flex;justify-content:center;align-items:center}.cax-image-action.cax-link[disabled]{opacity:.5}.cax-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cax-image-xsm{height:40px;width:auto}.cax-image-sm{height:80px;width:auto}.cax-image-md{height:120px;width:auto}.cax-image-lg{height:160px;width:auto}.cax-image-xl{height:200px;width:auto}}\n"] }]
+                    }, template: "<span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n    <img\r\n        [attr.src]=\"src\"\r\n        [attr.srcset]=\"srcSet\"\r\n        [attr.sizes]=\"sizes\"\r\n        [attr.alt]=\"alt\"\r\n        [attr.width]=\"width\"\r\n        [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\"\r\n        [ngStyle]=\"imageStyle\"\r\n        [class]=\"imageClass\"\r\n        [ngClass]=\"sizeClass()\"\r\n        (error)=\"imageError($event)\"\r\n    />\r\n    <button *ngIf=\"preview\" [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" class=\"cax-image-preview-indicator\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height + 'px', width: width + 'px', border: 'none' }\">\r\n        <ng-container *ngIf=\"indicatorTemplate; else defaultTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultTemplate>\r\n            <EyeIcon [styleClass]=\"'cax-image-preview-icon'\" />\r\n        </ng-template>\r\n    </button>\r\n    <div #mask class=\"cax-image-mask cax-component-overlay cax-component-overlay-enter\" *ngIf=\"maskVisible\" [attr.aria-modal]=\"maskVisible\" role=\"dialog\" (click)=\"onMaskClick()\" (keydown)=\"onMaskKeydown($event)\" pFocusTrap>\r\n        <div class=\"cax-image-toolbar\" (click)=\"handleToolbarClick($event)\">\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\">\r\n                <RefreshIcon *ngIf=\"!rotateRightIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\">\r\n                <UndoIcon *ngIf=\"!rotateLeftIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\">\r\n                <SearchMinusIcon *ngIf=\"!zoomOutIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\">\r\n                <SearchPlusIcon *ngIf=\"!zoomInIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomInIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton>\r\n                <TimesIcon *ngIf=\"!closeIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n            </button>\r\n        </div>\r\n        <div\r\n            *ngIf=\"previewVisible\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\"\r\n            (@animation.done)=\"onAnimationEnd($event)\"\r\n        >\r\n            <img [attr.src]=\"previewImageSrc ? previewImageSrc : src\" [attr.srcset]=\"previewImageSrcSet\" [attr.sizes]=\"previewImageSizes\" class=\"cax-image-preview\" [ngStyle]=\"imagePreviewStyle()\" (click)=\"onPreviewImageClick()\" />\r\n        </div>\r\n    </div>\r\n</span>\r\n", styles: ["@layer cax{.cax-image-mask{display:flex;align-items:center;justify-content:center}.cax-image-preview-container{position:relative;display:inline-block;line-height:0}.cax-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cax-image-preview-icon.pi{font-size:1.5rem}.cax-image-preview-icon.cax-icon{scale:1.5}.cax-image-preview-container:hover>.cax-image-preview-indicator{opacity:1;cursor:pointer}.cax-image-preview-container>img{cursor:pointer}.cax-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1}.cax-image-action.cax-link{display:flex;justify-content:center;align-items:center}.cax-image-action.cax-link[disabled]{opacity:.5}.cax-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cax-image-sm{height:32px;width:auto}.cax-image-md{height:40px;width:auto}.cax-image-lg{height:48px;width:auto}.cax-image-xl{height:56px;width:auto}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-image.mjs","sources":["../../src/app/components/image/image.ts","../../src/app/components/image/image.html","../../src/app/components/image/image.module.ts","../../src/app/components/image/cax-design-system-image.ts"],"sourcesContent":["import { AnimationEvent, animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Inject,\n    Input,\n    NgModule,\n    Output,\n    QueryList,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    booleanAttribute\n} from '@angular/core';\nimport { SafeUrl } from '@angular/platform-browser';\nimport { caxConfig, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { EyeIcon } from 'cax-design-system/icons/eye';\nimport { RefreshIcon } from 'cax-design-system/icons/refresh';\nimport { SearchMinusIcon } from 'cax-design-system/icons/searchminus';\nimport { SearchPlusIcon } from 'cax-design-system/icons/searchplus';\nimport { TimesIcon } from 'cax-design-system/icons/times';\nimport { UndoIcon } from 'cax-design-system/icons/undo';\nimport { ZIndexUtils } from 'cax-design-system/utils';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { FocusTrapModule } from 'cax-design-system/focustrap';\n\n/**\n * Displays an image with preview and tranformation options. For multiple image, see Galleria.\n * @group Components\n */\n@Component({\n    selector: 'cax-image',\n    templateUrl: './image.html',\n    animations: [\n        trigger('animation', [\n            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),\n            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [CommonModule, SharedModule, RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, FocusTrapModule],\n    styleUrls: ['./image.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Image implements AfterContentInit {\n    /**\n     * Style class of the image element.\n     * @group Props\n     */\n    @Input() imageClass: string | undefined;\n    /**\n     * Inline style of the image element.\n     * @group Props\n     */\n    @Input() imageStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * The source path for the main image.\n     * @group Props\n     */\n    @Input() src: string | SafeUrl | undefined;\n    /**\n     * The srcset definition for the main image.\n     * @group Props\n     */\n    @Input() srcSet: string | SafeUrl | undefined;\n    /**\n     * The sizes definition for the main image.\n     * @group Props\n     */\n    @Input() sizes: 'string' | undefined;\n    /**\n     * The source path for the preview image.\n     * @group Props\n     */\n    @Input() size: 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | undefined;\n    /**\n     * The source path for the preview image.\n     * @group Props\n     */\n    @Input() previewImageSrc: string | SafeUrl | undefined;\n    /**\n     * The srcset definition for the preview image.\n     * @group Props\n     */\n    @Input() previewImageSrcSet: string | SafeUrl | undefined;\n    /**\n     * The sizes definition for the preview image.\n     * @group Props\n     */\n    @Input() previewImageSizes: string | undefined;\n    /**\n     * Attribute of the preview image element.\n     * @group Props\n     */\n    @Input() alt: string | undefined;\n    /**\n     * Attribute of the image element.\n     * @group Props\n     */\n    @Input() width: string | undefined;\n    /**\n     * Attribute of the image element.\n     * @group Props\n     */\n    @Input() height: string | undefined;\n    /**\n     * Attribute of the image element.\n     * @group Props\n     */\n    @Input() loading: 'lazy' | 'eager' | undefined;\n    /**\n     * Target element to attach the dialog, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having #mydiv as variable name).\n     * @group Props\n     */\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n    /**\n     * Controls the preview functionality.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) preview: boolean = false;\n    /**\n     * Transition options of the show animation\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Transition options of the hide animation\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Triggered when the preview overlay is shown.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Triggered when the preview overlay is hidden.\n     * @group Emits\n     */\n    @Output() onHide: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * This event is triggered if an error occurs while loading an image file.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onImageError: EventEmitter<Event> = new EventEmitter<Event>();\n\n    @ViewChild('mask') mask: ElementRef | undefined;\n\n    @ViewChild('previewButton') previewButton: ElementRef | undefined;\n\n    @ViewChild('closeButton') closeButton: ElementRef | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    indicatorTemplate: TemplateRef<any> | undefined;\n\n    rotateRightIconTemplate: TemplateRef<any> | undefined;\n\n    rotateLeftIconTemplate: TemplateRef<any> | undefined;\n\n    zoomOutIconTemplate: TemplateRef<any> | undefined;\n\n    zoomInIconTemplate: TemplateRef<any> | undefined;\n\n    closeIconTemplate: TemplateRef<any> | undefined;\n\n    maskVisible: boolean = false;\n\n    previewVisible: boolean = false;\n\n    rotate: number = 0;\n\n    scale: number = 1;\n\n    previewClick: boolean = false;\n\n    container: Nullable<HTMLElement>;\n\n    wrapper: Nullable<HTMLElement>;\n\n    public get isZoomOutDisabled(): boolean {\n        return this.scale - this.zoomSettings.step <= this.zoomSettings.min;\n    }\n\n    public get isZoomInDisabled(): boolean {\n        return this.scale + this.zoomSettings.step >= this.zoomSettings.max;\n    }\n\n    private zoomSettings = {\n        default: 1,\n        step: 0.1,\n        max: 1.5,\n        min: 0.5\n    };\n\n    constructor(\n        @Inject(DOCUMENT) private document: Document,\n        private config: caxConfig,\n        private cd: ChangeDetectorRef,\n        public el: ElementRef\n    ) {}\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'indicator':\n                    this.indicatorTemplate = item.template;\n                    break;\n\n                case 'rotaterighticon':\n                    this.rotateRightIconTemplate = item.template;\n                    break;\n\n                case 'rotatelefticon':\n                    this.rotateLeftIconTemplate = item.template;\n                    break;\n\n                case 'zoomouticon':\n                    this.zoomOutIconTemplate = item.template;\n                    break;\n\n                case 'zoominicon':\n                    this.zoomInIconTemplate = item.template;\n                    break;\n\n                case 'closeicon':\n                    this.closeIconTemplate = item.template;\n                    break;\n\n                default:\n                    this.indicatorTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    onImageClick() {\n        if (this.preview) {\n            this.maskVisible = true;\n            this.previewVisible = true;\n            DomHandler.blockBodyScroll();\n        }\n    }\n\n    onMaskClick() {\n        if (!this.previewClick) {\n            this.closePreview();\n        }\n\n        this.previewClick = false;\n    }\n\n    onMaskKeydown(event) {\n        switch (event.code) {\n            case 'Escape':\n                this.onMaskClick();\n                setTimeout(() => {\n                    DomHandler.focus(this.previewButton.nativeElement);\n                }, 25);\n                event.preventDefault();\n\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    onPreviewImageClick() {\n        this.previewClick = true;\n    }\n\n    rotateRight() {\n        this.rotate += 90;\n        this.previewClick = true;\n    }\n\n    rotateLeft() {\n        this.rotate -= 90;\n        this.previewClick = true;\n    }\n\n    zoomIn() {\n        this.scale = this.scale + this.zoomSettings.step;\n        this.previewClick = true;\n    }\n\n    zoomOut() {\n        this.scale = this.scale - this.zoomSettings.step;\n        this.previewClick = true;\n    }\n\n    onAnimationStart(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'visible':\n                this.container = event.element;\n                this.wrapper = this.container?.parentElement;\n                this.appendContainer();\n                this.moveOnTop();\n\n                setTimeout(() => {\n                    DomHandler.focus(this.closeButton.nativeElement);\n                }, 25);\n                break;\n\n            case 'void':\n                DomHandler.addClass(this.wrapper, 'cax-component-overlay-leave');\n                break;\n        }\n    }\n\n    onAnimationEnd(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'void':\n                ZIndexUtils.clear(this.wrapper);\n                this.maskVisible = false;\n                this.container = null;\n                this.wrapper = null;\n                this.cd.markForCheck();\n                this.onHide.emit({});\n                break;\n            case 'visible':\n                this.onShow.emit({});\n                break;\n        }\n    }\n\n    moveOnTop() {\n        ZIndexUtils.set('modal', this.wrapper, this.config.zIndex.modal);\n    }\n\n    appendContainer() {\n        if (this.appendTo) {\n            if (this.appendTo === 'body') this.document.body.appendChild(this.wrapper as HTMLElement);\n            else DomHandler.appendChild(this.wrapper, this.appendTo);\n        }\n    }\n\n    imagePreviewStyle() {\n        return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };\n    }\n\n    get zoomImageAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.zoomImage : undefined;\n    }\n\n    containerClass() {\n        return {\n            'cax-image cax-component': true,\n            'cax-image-preview-container': this.preview\n        };\n    }\n\n    handleToolbarClick(event: MouseEvent): void {\n        event.stopPropagation();\n    }\n\n    closePreview(): void {\n        this.previewVisible = false;\n        this.rotate = 0;\n        this.scale = this.zoomSettings.default;\n        DomHandler.unblockBodyScroll();\n    }\n\n    imageError(event: Event) {\n        this.onImageError.emit(event);\n    }\n\n    rightAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.rotateRight : undefined;\n    }\n\n    leftAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.rotateLeft : undefined;\n    }\n\n    zoomInAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.zoomIn : undefined;\n    }\n\n    zoomOutAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.zoomOut : undefined;\n    }\n\n    closeAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.close : undefined;\n    }\n\n    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {\n        if (this.previewVisible) {\n            this.closePreview();\n        }\n    }\n\n    // custom methods\n    sizeClass() {\n        return {\n            [`cax-image-${this.size}`]: this.size\n        };\n    }\n}\n","<span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n    <img\r\n        [attr.src]=\"src\"\r\n        [attr.srcset]=\"srcSet\"\r\n        [attr.sizes]=\"sizes\"\r\n        [attr.alt]=\"alt\"\r\n        [attr.width]=\"width\"\r\n        [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\"\r\n        [ngStyle]=\"imageStyle\"\r\n        [class]=\"imageClass\"\r\n        [ngClass]=\"sizeClass()\"\r\n        (error)=\"imageError($event)\"\r\n    />\r\n    <button *ngIf=\"preview\" [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" class=\"cax-image-preview-indicator\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height + 'px', width: width + 'px', border: 'none' }\">\r\n        <ng-container *ngIf=\"indicatorTemplate; else defaultTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultTemplate>\r\n            <EyeIcon [styleClass]=\"'cax-image-preview-icon'\" />\r\n        </ng-template>\r\n    </button>\r\n    <div #mask class=\"cax-image-mask cax-component-overlay cax-component-overlay-enter\" *ngIf=\"maskVisible\" [attr.aria-modal]=\"maskVisible\" role=\"dialog\" (click)=\"onMaskClick()\" (keydown)=\"onMaskKeydown($event)\" pFocusTrap>\r\n        <div class=\"cax-image-toolbar\" (click)=\"handleToolbarClick($event)\">\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\">\r\n                <RefreshIcon *ngIf=\"!rotateRightIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\">\r\n                <UndoIcon *ngIf=\"!rotateLeftIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\">\r\n                <SearchMinusIcon *ngIf=\"!zoomOutIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\">\r\n                <SearchPlusIcon *ngIf=\"!zoomInIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomInIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton>\r\n                <TimesIcon *ngIf=\"!closeIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n            </button>\r\n        </div>\r\n        <div\r\n            *ngIf=\"previewVisible\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\"\r\n            (@animation.done)=\"onAnimationEnd($event)\"\r\n        >\r\n            <img [attr.src]=\"previewImageSrc ? previewImageSrc : src\" [attr.srcset]=\"previewImageSrcSet\" [attr.sizes]=\"previewImageSizes\" class=\"cax-image-preview\" [ngStyle]=\"imagePreviewStyle()\" (click)=\"onPreviewImageClick()\" />\r\n        </div>\r\n    </div>\r\n</span>\r\n","import { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { Image } from './image';\n\n@NgModule({\n    imports: [Image, SharedModule],\n    exports: [Image, SharedModule]\n})\nexport class ImageModule {}\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-image.mjs","sources":["../../src/app/components/image/image.ts","../../src/app/components/image/image.html","../../src/app/components/image/image.module.ts","../../src/app/components/image/cax-design-system-image.ts"],"sourcesContent":["import { AnimationEvent, animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Inject,\n    Input,\n    Output,\n    QueryList,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    booleanAttribute\n} from '@angular/core';\nimport { SafeUrl } from '@angular/platform-browser';\nimport { caxConfig, CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { EyeIcon } from 'cax-design-system/icons/eye';\nimport { RefreshIcon } from 'cax-design-system/icons/refresh';\nimport { SearchMinusIcon } from 'cax-design-system/icons/searchminus';\nimport { SearchPlusIcon } from 'cax-design-system/icons/searchplus';\nimport { TimesIcon } from 'cax-design-system/icons/times';\nimport { UndoIcon } from 'cax-design-system/icons/undo';\nimport { ZIndexUtils } from 'cax-design-system/utils';\nimport { Nullable } from 'cax-design-system/ts-helpers';\nimport { FocusTrapModule } from 'cax-design-system/focustrap';\n\n/**\n * Displays an image with preview and tranformation options. For multiple image, see Galleria.\n * @group Components\n */\n@Component({\n    selector: 'cax-image',\n    templateUrl: './image.html',\n    animations: [\n        trigger('animation', [\n            transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),\n            transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [CommonModule, SharedModule, RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, FocusTrapModule],\n    styleUrls: ['./image.scss'],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Image implements AfterContentInit {\n    /**\n     * Style class of the image element.\n     * @group Props\n     */\n    @Input() imageClass: string | undefined;\n    /**\n     * Inline style of the image element.\n     * @group Props\n     */\n    @Input() imageStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * The source path for the main image.\n     * @group Props\n     */\n    @Input() src: string | SafeUrl | undefined;\n    /**\n     * The srcset definition for the main image.\n     * @group Props\n     */\n    @Input() srcSet: string | SafeUrl | undefined;\n    /**\n     * The sizes definition for the main image.\n     * @group Props\n     */\n    @Input() sizes: 'string' | undefined;\n    /**\n     * The source path for the preview image.\n     * @group Props\n     */\n    @Input() size: 'sm' | 'md' | 'lg' | 'xl' | undefined;\n    /**\n     * The source path for the preview image.\n     * @group Props\n     */\n    @Input() previewImageSrc: string | SafeUrl | undefined;\n    /**\n     * The srcset definition for the preview image.\n     * @group Props\n     */\n    @Input() previewImageSrcSet: string | SafeUrl | undefined;\n    /**\n     * The sizes definition for the preview image.\n     * @group Props\n     */\n    @Input() previewImageSizes: string | undefined;\n    /**\n     * Attribute of the preview image element.\n     * @group Props\n     */\n    @Input() alt: string | undefined;\n    /**\n     * Attribute of the image element.\n     * @group Props\n     */\n    @Input() width: string | undefined;\n    /**\n     * Attribute of the image element.\n     * @group Props\n     */\n    @Input() height: string | undefined;\n    /**\n     * Attribute of the image element.\n     * @group Props\n     */\n    @Input() loading: 'lazy' | 'eager' | undefined;\n    /**\n     * Target element to attach the dialog, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having #mydiv as variable name).\n     * @group Props\n     */\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n    /**\n     * Controls the preview functionality.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) preview: boolean = false;\n    /**\n     * Transition options of the show animation\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Transition options of the hide animation\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Triggered when the preview overlay is shown.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Triggered when the preview overlay is hidden.\n     * @group Emits\n     */\n    @Output() onHide: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * This event is triggered if an error occurs while loading an image file.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onImageError: EventEmitter<Event> = new EventEmitter<Event>();\n\n    @ViewChild('mask') mask: ElementRef | undefined;\n\n    @ViewChild('previewButton') previewButton: ElementRef | undefined;\n\n    @ViewChild('closeButton') closeButton: ElementRef | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    indicatorTemplate: TemplateRef<any> | undefined;\n\n    rotateRightIconTemplate: TemplateRef<any> | undefined;\n\n    rotateLeftIconTemplate: TemplateRef<any> | undefined;\n\n    zoomOutIconTemplate: TemplateRef<any> | undefined;\n\n    zoomInIconTemplate: TemplateRef<any> | undefined;\n\n    closeIconTemplate: TemplateRef<any> | undefined;\n\n    maskVisible: boolean = false;\n\n    previewVisible: boolean = false;\n\n    rotate: number = 0;\n\n    scale: number = 1;\n\n    previewClick: boolean = false;\n\n    container: Nullable<HTMLElement>;\n\n    wrapper: Nullable<HTMLElement>;\n\n    public get isZoomOutDisabled(): boolean {\n        return this.scale - this.zoomSettings.step <= this.zoomSettings.min;\n    }\n\n    public get isZoomInDisabled(): boolean {\n        return this.scale + this.zoomSettings.step >= this.zoomSettings.max;\n    }\n\n    private zoomSettings = {\n        default: 1,\n        step: 0.1,\n        max: 1.5,\n        min: 0.5\n    };\n\n    constructor(\n        @Inject(DOCUMENT) private document: Document,\n        private config: caxConfig,\n        private cd: ChangeDetectorRef,\n        public el: ElementRef\n    ) {}\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'indicator':\n                    this.indicatorTemplate = item.template;\n                    break;\n\n                case 'rotaterighticon':\n                    this.rotateRightIconTemplate = item.template;\n                    break;\n\n                case 'rotatelefticon':\n                    this.rotateLeftIconTemplate = item.template;\n                    break;\n\n                case 'zoomouticon':\n                    this.zoomOutIconTemplate = item.template;\n                    break;\n\n                case 'zoominicon':\n                    this.zoomInIconTemplate = item.template;\n                    break;\n\n                case 'closeicon':\n                    this.closeIconTemplate = item.template;\n                    break;\n\n                default:\n                    this.indicatorTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    onImageClick() {\n        if (this.preview) {\n            this.maskVisible = true;\n            this.previewVisible = true;\n            DomHandler.blockBodyScroll();\n        }\n    }\n\n    onMaskClick() {\n        if (!this.previewClick) {\n            this.closePreview();\n        }\n\n        this.previewClick = false;\n    }\n\n    onMaskKeydown(event) {\n        switch (event.code) {\n            case 'Escape':\n                this.onMaskClick();\n                setTimeout(() => {\n                    DomHandler.focus(this.previewButton.nativeElement);\n                }, 25);\n                event.preventDefault();\n\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    onPreviewImageClick() {\n        this.previewClick = true;\n    }\n\n    rotateRight() {\n        this.rotate += 90;\n        this.previewClick = true;\n    }\n\n    rotateLeft() {\n        this.rotate -= 90;\n        this.previewClick = true;\n    }\n\n    zoomIn() {\n        this.scale = this.scale + this.zoomSettings.step;\n        this.previewClick = true;\n    }\n\n    zoomOut() {\n        this.scale = this.scale - this.zoomSettings.step;\n        this.previewClick = true;\n    }\n\n    onAnimationStart(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'visible':\n                this.container = event.element;\n                this.wrapper = this.container?.parentElement;\n                this.appendContainer();\n                this.moveOnTop();\n\n                setTimeout(() => {\n                    DomHandler.focus(this.closeButton.nativeElement);\n                }, 25);\n                break;\n\n            case 'void':\n                DomHandler.addClass(this.wrapper, 'cax-component-overlay-leave');\n                break;\n        }\n    }\n\n    onAnimationEnd(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'void':\n                ZIndexUtils.clear(this.wrapper);\n                this.maskVisible = false;\n                this.container = null;\n                this.wrapper = null;\n                this.cd.markForCheck();\n                this.onHide.emit({});\n                break;\n            case 'visible':\n                this.onShow.emit({});\n                break;\n        }\n    }\n\n    moveOnTop() {\n        ZIndexUtils.set('modal', this.wrapper, this.config.zIndex.modal);\n    }\n\n    appendContainer() {\n        if (this.appendTo) {\n            if (this.appendTo === 'body') this.document.body.appendChild(this.wrapper as HTMLElement);\n            else DomHandler.appendChild(this.wrapper, this.appendTo);\n        }\n    }\n\n    imagePreviewStyle() {\n        return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };\n    }\n\n    get zoomImageAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.zoomImage : undefined;\n    }\n\n    containerClass() {\n        return {\n            'cax-image cax-component': true,\n            'cax-image-preview-container': this.preview\n        };\n    }\n\n    handleToolbarClick(event: MouseEvent): void {\n        event.stopPropagation();\n    }\n\n    closePreview(): void {\n        this.previewVisible = false;\n        this.rotate = 0;\n        this.scale = this.zoomSettings.default;\n        DomHandler.unblockBodyScroll();\n    }\n\n    imageError(event: Event) {\n        this.onImageError.emit(event);\n    }\n\n    rightAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.rotateRight : undefined;\n    }\n\n    leftAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.rotateLeft : undefined;\n    }\n\n    zoomInAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.zoomIn : undefined;\n    }\n\n    zoomOutAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.zoomOut : undefined;\n    }\n\n    closeAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.close : undefined;\n    }\n\n    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {\n        if (this.previewVisible) {\n            this.closePreview();\n        }\n    }\n\n    // custom methods\n    sizeClass() {\n        return {\n            [`cax-image-${this.size}`]: this.size\n        };\n    }\n}\n","<span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n    <img\r\n        [attr.src]=\"src\"\r\n        [attr.srcset]=\"srcSet\"\r\n        [attr.sizes]=\"sizes\"\r\n        [attr.alt]=\"alt\"\r\n        [attr.width]=\"width\"\r\n        [attr.height]=\"height\"\r\n        [attr.loading]=\"loading\"\r\n        [ngStyle]=\"imageStyle\"\r\n        [class]=\"imageClass\"\r\n        [ngClass]=\"sizeClass()\"\r\n        (error)=\"imageError($event)\"\r\n    />\r\n    <button *ngIf=\"preview\" [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" class=\"cax-image-preview-indicator\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height + 'px', width: width + 'px', border: 'none' }\">\r\n        <ng-container *ngIf=\"indicatorTemplate; else defaultTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultTemplate>\r\n            <EyeIcon [styleClass]=\"'cax-image-preview-icon'\" />\r\n        </ng-template>\r\n    </button>\r\n    <div #mask class=\"cax-image-mask cax-component-overlay cax-component-overlay-enter\" *ngIf=\"maskVisible\" [attr.aria-modal]=\"maskVisible\" role=\"dialog\" (click)=\"onMaskClick()\" (keydown)=\"onMaskKeydown($event)\" pFocusTrap>\r\n        <div class=\"cax-image-toolbar\" (click)=\"handleToolbarClick($event)\">\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\">\r\n                <RefreshIcon *ngIf=\"!rotateRightIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\">\r\n                <UndoIcon *ngIf=\"!rotateLeftIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\">\r\n                <SearchMinusIcon *ngIf=\"!zoomOutIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\">\r\n                <SearchPlusIcon *ngIf=\"!zoomInIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"zoomInIconTemplate\"></ng-template>\r\n            </button>\r\n            <button class=\"cax-image-action cax-link\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton>\r\n                <TimesIcon *ngIf=\"!closeIconTemplate\" />\r\n                <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n            </button>\r\n        </div>\r\n        <div\r\n            *ngIf=\"previewVisible\"\r\n            [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n            (@animation.start)=\"onAnimationStart($event)\"\r\n            (@animation.done)=\"onAnimationEnd($event)\"\r\n        >\r\n            <img [attr.src]=\"previewImageSrc ? previewImageSrc : src\" [attr.srcset]=\"previewImageSrcSet\" [attr.sizes]=\"previewImageSizes\" class=\"cax-image-preview\" [ngStyle]=\"imagePreviewStyle()\" (click)=\"onPreviewImageClick()\" />\r\n        </div>\r\n    </div>\r\n</span>\r\n","import { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { Image } from './image';\n\n@NgModule({\n    imports: [Image, SharedModule],\n    exports: [Image, SharedModule]\n})\nexport class ImageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiCA;;;AAGG;MAmBU,KAAK,CAAA;AAmKgB,IAAA,QAAA,CAAA;AAClB,IAAA,MAAA,CAAA;AACA,IAAA,EAAA,CAAA;AACD,IAAA,EAAA,CAAA;AArKX;;;AAGG;AACM,IAAA,UAAU,CAAqB;AACxC;;;AAGG;AACM,IAAA,UAAU,CAA8C;AACjE;;;AAGG;AACM,IAAA,UAAU,CAAqB;AACxC;;;AAGG;AACM,IAAA,KAAK,CAA8C;AAC5D;;;AAGG;AACM,IAAA,GAAG,CAA+B;AAC3C;;;AAGG;AACM,IAAA,MAAM,CAA+B;AAC9C;;;AAGG;AACM,IAAA,KAAK,CAAuB;AACrC;;;AAGG;AACM,IAAA,IAAI,CAAwC;AACrD;;;AAGG;AACM,IAAA,eAAe,CAA+B;AACvD;;;AAGG;AACM,IAAA,kBAAkB,CAA+B;AAC1D;;;AAGG;AACM,IAAA,iBAAiB,CAAqB;AAC/C;;;AAGG;AACM,IAAA,GAAG,CAAqB;AACjC;;;AAGG;AACM,IAAA,KAAK,CAAqB;AACnC;;;AAGG;AACM,IAAA,MAAM,CAAqB;AACpC;;;AAGG;AACM,IAAA,OAAO,CAA+B;AAC/C;;;AAGG;AACM,IAAA,QAAQ,CAAgF;AACjG;;;AAGG;IACqC,OAAO,GAAY,KAAK,CAAC;AACjE;;;AAGG;IACM,qBAAqB,GAAW,kCAAkC,CAAC;AAC5E;;;AAGG;IACM,qBAAqB,GAAW,kCAAkC,CAAC;AAC5E;;;AAGG;AACO,IAAA,MAAM,GAAsB,IAAI,YAAY,EAAO,CAAC;AAC9D;;;AAGG;AACO,IAAA,MAAM,GAAsB,IAAI,YAAY,EAAO,CAAC;AAC9D;;;;AAIG;AACO,IAAA,YAAY,GAAwB,IAAI,YAAY,EAAS,CAAC;AAErD,IAAA,IAAI,CAAyB;AAEpB,IAAA,aAAa,CAAyB;AAExC,IAAA,WAAW,CAAyB;AAEhC,IAAA,SAAS,CAAqC;AAE5E,IAAA,iBAAiB,CAA+B;AAEhD,IAAA,uBAAuB,CAA+B;AAEtD,IAAA,sBAAsB,CAA+B;AAErD,IAAA,mBAAmB,CAA+B;AAElD,IAAA,kBAAkB,CAA+B;AAEjD,IAAA,iBAAiB,CAA+B;IAEhD,WAAW,GAAY,KAAK,CAAC;IAE7B,cAAc,GAAY,KAAK,CAAC;IAEhC,MAAM,GAAW,CAAC,CAAC;IAEnB,KAAK,GAAW,CAAC,CAAC;IAElB,YAAY,GAAY,KAAK,CAAC;AAE9B,IAAA,SAAS,CAAwB;AAEjC,IAAA,OAAO,CAAwB;AAE/B,IAAA,IAAW,iBAAiB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;KACvE;AAED,IAAA,IAAW,gBAAgB,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;KACvE;AAEO,IAAA,YAAY,GAAG;AACnB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,GAAG,EAAE,GAAG;AACR,QAAA,GAAG,EAAE,GAAG;KACX,CAAC;AAEF,IAAA,WAAA,CAC8B,QAAkB,EACpC,MAAiB,EACjB,EAAqB,EACtB,EAAc,EAAA;QAHK,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAU;QACpC,IAAM,CAAA,MAAA,GAAN,MAAM,CAAW;QACjB,IAAE,CAAA,EAAA,GAAF,EAAE,CAAmB;QACtB,IAAE,CAAA,EAAA,GAAF,EAAE,CAAY;KACrB;IAEJ,kBAAkB,GAAA;QACd,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,KAAI;AAC7B,YAAA,QAAQ,IAAI,CAAC,OAAO,EAAE;AAClB,gBAAA,KAAK,WAAW;AACZ,oBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC;oBACvC,MAAM;AAEV,gBAAA,KAAK,iBAAiB;AAClB,oBAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,QAAQ,CAAC;oBAC7C,MAAM;AAEV,gBAAA,KAAK,gBAAgB;AACjB,oBAAA,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,QAAQ,CAAC;oBAC5C,MAAM;AAEV,gBAAA,KAAK,aAAa;AACd,oBAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC;oBACzC,MAAM;AAEV,gBAAA,KAAK,YAAY;AACb,oBAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC;oBACxC,MAAM;AAEV,gBAAA,KAAK,WAAW;AACZ,oBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC;oBACvC,MAAM;AAEV,gBAAA;AACI,oBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC;oBACvC,MAAM;aACb;AACL,SAAC,CAAC,CAAC;KACN;IAED,YAAY,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,UAAU,CAAC,eAAe,EAAE,CAAC;SAChC;KACJ;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACpB,IAAI,CAAC,YAAY,EAAE,CAAC;SACvB;AAED,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC7B;AAED,IAAA,aAAa,CAAC,KAAK,EAAA;AACf,QAAA,QAAQ,KAAK,CAAC,IAAI;AACd,YAAA,KAAK,QAAQ;gBACT,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,UAAU,CAAC,MAAK;oBACZ,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;iBACtD,EAAE,EAAE,CAAC,CAAC;gBACP,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,MAAM;AAEV,YAAA;gBACI,MAAM;SACb;KACJ;IAED,mBAAmB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC5B;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC5B;IAED,UAAU,GAAA;AACN,QAAA,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC5B;IAED,MAAM,GAAA;AACF,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC5B;IAED,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACjD,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC5B;AAED,IAAA,gBAAgB,CAAC,KAAqB,EAAA;AAClC,QAAA,QAAQ,KAAK,CAAC,OAAO;AACjB,YAAA,KAAK,SAAS;AACV,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;gBAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC;gBAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,SAAS,EAAE,CAAC;gBAEjB,UAAU,CAAC,MAAK;oBACZ,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;iBACpD,EAAE,EAAE,CAAC,CAAC;gBACP,MAAM;AAEV,YAAA,KAAK,MAAM;gBACP,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,6BAA6B,CAAC,CAAC;gBACjE,MAAM;SACb;KACJ;AAED,IAAA,cAAc,CAAC,KAAqB,EAAA;AAChC,QAAA,QAAQ,KAAK,CAAC,OAAO;AACjB,YAAA,KAAK,MAAM;AACP,gBAAA,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAChC,gBAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AACzB,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;AACtB,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;AACpB,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACrB,MAAM;AACV,YAAA,KAAK,SAAS;AACV,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACrB,MAAM;SACb;KACJ;IAED,SAAS,GAAA;AACL,QAAA,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACpE;IAED,eAAe,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM;gBAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAsB,CAAC,CAAC;;gBACrF,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC5D;KACJ;IAED,iBAAiB,GAAA;AACb,QAAA,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAAC;KACpF;AAED,IAAA,IAAI,kBAAkB,GAAA;QAClB,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC5F;IAED,cAAc,GAAA;QACV,OAAO;AACH,YAAA,yBAAyB,EAAE,IAAI;YAC/B,6BAA6B,EAAE,IAAI,CAAC,OAAO;SAC9C,CAAC;KACL;AAED,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;IAED,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;AAC5B,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACvC,UAAU,CAAC,iBAAiB,EAAE,CAAC;KAClC;AAED,IAAA,UAAU,CAAC,KAAY,EAAA;AACnB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,cAAc,GAAA;QACV,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;KAC9F;IAED,aAAa,GAAA;QACT,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;KAC7F;IAED,eAAe,GAAA;QACX,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;KACzF;IAED,gBAAgB,GAAA;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;KAC1F;IAED,cAAc,GAAA;QACV,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KACxF;AAEoD,IAAA,gBAAgB,CAAC,KAAoB,EAAA;AACtF,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,YAAY,EAAE,CAAC;SACvB;KACJ;;IAGD,SAAS,GAAA;QACL,OAAO;YACH,CAAC,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;SACxC,CAAC;KACL;AA9WQ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,KAAK,kBAmKF,QAAQ,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAnKX,KAAK,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,GAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,GAAA,EAAA,KAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAqFM,gBAAgB,CAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,yBAAA,EAAA,0BAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,EAkCnB,WAAW,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9KhC,oqHAuDA,EDNc,MAAA,EAAA,CAAA,qgCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,WAAW,wDAAE,OAAO,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,QAAQ,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAE,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,SAAS,EAAE,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,EATrH,CAAA,EAAA,UAAA,EAAA;YACR,OAAO,CAAC,WAAW,EAAE;gBACjB,UAAU,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC;gBACpH,UAAU,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC,0BAA0B,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;aACvH,CAAC;AACL,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAUQ,KAAK,EAAA,UAAA,EAAA,CAAA;kBAlBjB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAET,UAAA,EAAA;wBACR,OAAO,CAAC,WAAW,EAAE;4BACjB,UAAU,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC;4BACpH,UAAU,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC,0BAA0B,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;yBACvH,CAAC;AACL,qBAAA,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,UAAA,EACzB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,eAAe,CAAC,EAE5H,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,aAAa;AACvB,qBAAA,EAAA,QAAA,EAAA,oqHAAA,EAAA,MAAA,EAAA,CAAA,qgCAAA,CAAA,EAAA,CAAA;;0BAqKI,MAAM;2BAAC,QAAQ,CAAA;0HA9JX,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAKG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAKG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAKG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAKG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAKG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBAKG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAKG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAKG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBAKG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBAKG,iBAAiB,EAAA,CAAA;sBAAzB,KAAK;gBAKG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAKG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAKG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBAKG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAKG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAKkC,OAAO,EAAA,CAAA;sBAA9C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAK7B,qBAAqB,EAAA,CAAA;sBAA7B,KAAK;gBAKG,qBAAqB,EAAA,CAAA;sBAA7B,KAAK;gBAKI,MAAM,EAAA,CAAA;sBAAf,MAAM;gBAKG,MAAM,EAAA,CAAA;sBAAf,MAAM;gBAMG,YAAY,EAAA,CAAA;sBAArB,MAAM;gBAEY,IAAI,EAAA,CAAA;sBAAtB,SAAS;uBAAC,MAAM,CAAA;gBAEW,aAAa,EAAA,CAAA;sBAAxC,SAAS;uBAAC,eAAe,CAAA;gBAEA,WAAW,EAAA,CAAA;sBAApC,SAAS;uBAAC,aAAa,CAAA;gBAEM,SAAS,EAAA,CAAA;sBAAtC,eAAe;uBAAC,WAAW,CAAA;gBA4OyB,gBAAgB,EAAA,CAAA;sBAApE,YAAY;uBAAC,yBAAyB,EAAE,CAAC,QAAQ,CAAC,CAAA;;;MElZ1C,WAAW,CAAA;uGAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,YAHV,KAAK,EAAE,YAAY,CACnB,EAAA,OAAA,EAAA,CAAA,KAAK,EAAE,YAAY,CAAA,EAAA,CAAA,CAAA;AAEpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,EAHV,OAAA,EAAA,CAAA,KAAK,EAAE,YAAY,EACZ,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAEpB,WAAW,EAAA,UAAA,EAAA,CAAA;kBAJvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;AAC9B,oBAAA,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;AACjC,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}

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: [{