primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-iconfield.mjs

@@ -7,40 +7,33 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { BaseStyle } from 'primeng/base';
 
 const theme = ({ dt }) => `
-/* For PrimeNG */
 .p-iconfield {
     position: relative;
 }
 
-.p-iconfield > p-inputicon {
+.p-inputicon {
     position: absolute;
     top: 50%;
     margin-top: calc(-1 * (${dt('icon.size')} / 2));
+    color: ${dt('iconfield.icon.color')};
+    line-height: 1;
 }
 
-.p-iconfield-left {
-    color: ${dt('iconfield.icon.color')};
+.p-iconfield .p-inputicon:first-child {
+    left: ${dt('form.field.padding.x')};
 }
 
-.p-iconfield-right {
-    color: ${dt('iconfield.icon.color')};
+.p-iconfield .p-inputicon:last-child {
+    right: ${dt('form.field.padding.x')};
 }
 
-.p-iconfield.p-iconfield-left > .p-inputtext {
+.p-iconfield .p-inputtext:not(:first-child) {
     padding-left: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
 }
 
-.p-iconfield.p-iconfield-right > .p-inputtext {
+.p-iconfield .p-inputtext:not(:last-child) {
     padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
 }
-
-.p-iconfield.p-iconfield-left > p-inputicon {
-    left: ${dt('form.field.padding.x')};
-}
-
-.p-iconfield.p-iconfield-right > p-inputicon {
-    right: ${dt('form.field.padding.x')};
-}
 `;
 const classes = {
     root: 'p-iconfield',
@@ -55,6 +48,22 @@ class IconFieldStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IconFieldStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * IconField wraps an input and an icon.
+ *
+ * [Live Demo](https://www.primeng.org/iconfield/)
+ *
+ * @module iconfieldstyle
+ *
+ */
+var IconFieldClasses;
+(function (IconFieldClasses) {
+    /**
+     * Class name of the root element
+     */
+    IconFieldClasses["root"] = "p-iconfield";
+})(IconFieldClasses || (IconFieldClasses = {}));
 
 /**
  * IconField wraps an input and an icon.
@@ -65,7 +74,7 @@ class IconField extends BaseComponent {
      * Position of the icon.
      * @group Props
      */
-    iconPosition = 'left';
+    iconPosition;
     /**
      * Style class of the component.
      * @group Props
@@ -79,13 +88,13 @@ class IconField extends BaseComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IconField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: IconField, selector: "p-iconfield, p-iconField", inputs: { iconPosition: "iconPosition", styleClass: "styleClass" }, providers: [IconFieldStyle], usesInheritance: true, ngImport: i0, template: ` <span class="p-iconfield" [ngClass]="containerClass" [class]="styleClass"><ng-content></ng-content> </span>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: IconField, selector: "p-iconfield, p-iconField", inputs: { iconPosition: "iconPosition", styleClass: "styleClass" }, providers: [IconFieldStyle], usesInheritance: true, ngImport: i0, template: ` <div class="p-iconfield" [ngClass]="containerClass" [class]="styleClass"><ng-content></ng-content></div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IconField, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-iconfield, p-iconField',
-                    template: ` <span class="p-iconfield" [ngClass]="containerClass" [class]="styleClass"><ng-content></ng-content> </span>`,
+                    template: ` <div class="p-iconfield" [ngClass]="containerClass" [class]="styleClass"><ng-content></ng-content></div>`,
                     providers: [IconFieldStyle],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -113,5 +122,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { IconField, IconFieldModule };
+export { IconField, IconFieldClasses, IconFieldModule, IconFieldStyle };
 //# sourceMappingURL=primeng-iconfield.mjs.map

package/fesm2022/primeng-iconfield.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-iconfield.mjs","sources":["../../src/app/components/iconfield/style/iconfieldstyle.ts","../../src/app/components/iconfield/iconfield.ts","../../src/app/components/iconfield/primeng-iconfield.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n/* For PrimeNG */\n.p-iconfield {\n    position: relative;\n}\n\n.p-iconfield > p-inputicon {\n    position: absolute;\n    top: 50%;\n    margin-top: calc(-1 * (${dt('icon.size')} / 2));\n}\n\n.p-iconfield-left {\n    color: ${dt('iconfield.icon.color')};\n}\n\n.p-iconfield-right {\n    color: ${dt('iconfield.icon.color')};\n}\n\n.p-iconfield.p-iconfield-left > .p-inputtext {\n    padding-left: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});\n}\n\n.p-iconfield.p-iconfield-right > .p-inputtext {\n    padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});\n}\n\n.p-iconfield.p-iconfield-left > p-inputicon {\n    left: ${dt('form.field.padding.x')};\n}\n\n.p-iconfield.p-iconfield-right > p-inputicon {\n    right: ${dt('form.field.padding.x')};\n}\n`;\n\nconst classes = {\n    root: 'p-iconfield',\n};\n\n@Injectable()\nexport class IconFieldStyle extends BaseStyle {\n    name = 'iconfield';\n\n    theme = theme;\n\n    classes = classes;\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core';\n\nimport { SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { IconFieldStyle } from './style/iconfieldstyle';\n\n/**\n * IconField wraps an input and an icon.\n * @group Components\n */\n@Component({\n    selector: 'p-iconfield, p-iconField',\n    template: ` <span class=\"p-iconfield\" [ngClass]=\"containerClass\" [class]=\"styleClass\"><ng-content></ng-content> </span>`,\n    providers: [IconFieldStyle],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IconField extends BaseComponent {\n    /**\n     * Position of the icon.\n     * @group Props\n     */\n    @Input() iconPosition: 'right' | 'left' = 'left';\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string;\n\n    _componentStyle = inject(IconFieldStyle);\n\n    get containerClass() {\n        return {\n            'p-iconfield-left': this.iconPosition === 'left',\n            'p-iconfield-right': this.iconPosition === 'right',\n        };\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [IconField, SharedModule],\n    declarations: [IconField],\n})\nexport class IconFieldModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-iconfield.mjs","sources":["../../src/app/components/iconfield/style/iconfieldstyle.ts","../../src/app/components/iconfield/iconfield.ts","../../src/app/components/iconfield/primeng-iconfield.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-iconfield {\n    position: relative;\n}\n\n.p-inputicon {\n    position: absolute;\n    top: 50%;\n    margin-top: calc(-1 * (${dt('icon.size')} / 2));\n    color: ${dt('iconfield.icon.color')};\n    line-height: 1;\n}\n\n.p-iconfield .p-inputicon:first-child {\n    left: ${dt('form.field.padding.x')};\n}\n\n.p-iconfield .p-inputicon:last-child {\n    right: ${dt('form.field.padding.x')};\n}\n\n.p-iconfield .p-inputtext:not(:first-child) {\n    padding-left: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});\n}\n\n.p-iconfield .p-inputtext:not(:last-child) {\n    padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});\n}\n`;\n\nconst classes = {\n    root: 'p-iconfield',\n};\n\n@Injectable()\nexport class IconFieldStyle extends BaseStyle {\n    name = 'iconfield';\n\n    theme = theme;\n\n    classes = classes;\n}\n\n/**\n *\n * IconField wraps an input and an icon.\n *\n * [Live Demo](https://www.primeng.org/iconfield/)\n *\n * @module iconfieldstyle\n *\n */\nexport enum IconFieldClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-iconfield',\n}\n\nexport interface IconFieldStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core';\nimport { SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { IconFieldStyle } from './style/iconfieldstyle';\n\n/**\n * IconField wraps an input and an icon.\n * @group Components\n */\n@Component({\n    selector: 'p-iconfield, p-iconField',\n    template: ` <div class=\"p-iconfield\" [ngClass]=\"containerClass\" [class]=\"styleClass\"><ng-content></ng-content></div>`,\n    providers: [IconFieldStyle],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IconField extends BaseComponent {\n    /**\n     * Position of the icon.\n     * @group Props\n     */\n    @Input() iconPosition: 'right' | 'left' | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string;\n\n    _componentStyle = inject(IconFieldStyle);\n    get containerClass() {\n        return {\n            'p-iconfield-left': this.iconPosition === 'left',\n            'p-iconfield-right': this.iconPosition === 'right',\n        };\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [IconField, SharedModule],\n    declarations: [IconField],\n})\nexport class IconFieldModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/primeng-iftalabel.mjs

@@ -0,0 +1,143 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { SharedModule } from 'primeng/api';
+import { RouterModule } from '@angular/router';
+import { BaseComponent } from 'primeng/basecomponent';
+import { BaseStyle } from 'primeng/base';
+
+const theme = ({ dt }) => `
+.p-iftalabel {
+    display: block;
+    position: relative;
+}
+
+.p-iftalabel label {
+    position: absolute;
+    pointer-events: none;
+    top: ${dt('iftalabel.top')};
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+    font-size: ${dt('iftalabel.font.size')};
+    font-weight: ${dt('iftalabel.font.weight')};
+    left: ${dt('iftalabel.position.x')};
+    color: ${dt('iftalabel.color')};
+    transition-duration: ${dt('iftalabel.transition.duration')};
+}
+
+.p-iftalabel .p-inputtext,
+.p-iftalabel .p-textarea,
+.p-iftalabel .p-select-label,
+.p-iftalabel .p-multiselect-label-container,
+.p-iftalabel .p-autocomplete-input-multiple,
+.p-iftalabel .p-cascadeselect-label,
+.p-iftalabel .p-treeselect-label {
+    padding-top: ${dt('iftalabel.input.padding.top')};
+}
+
+.p-iftalabel:has(.ng-invalid.ng-dirty) label {
+    color: ${dt('iftalabel.invalid.color')};
+}
+
+.p-iftalabel:has(input:focus) label ,
+.p-iftalabel:has(input:-webkit-autofill) label,
+.p-iftalabel:has(textarea:focus) label ,
+.p-iftalabel:has(.p-inputwrapper-focus) label  {
+    color: ${dt('iftalabel.focus.color')};
+}
+
+.p-iftalabel .p-inputicon {
+    top: ${dt('iftalabel.input.padding.top')};
+    transform: translateY(25%);
+    margin-top: 0;
+}
+
+/*.p-iftalabel .p-placeholder,
+.p-iftalabel input::placeholder,
+.p-iftalabel .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-iftalabel .p-focus .p-placeholder,
+.p-iftalabel input:focus::placeholder,
+.p-iftalabel .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}*/
+`;
+const classes = {
+    root: 'p-iftalabel',
+};
+class IftaLabelStyle extends BaseStyle {
+    name = 'iftalabel';
+    theme = theme;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabelStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabelStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * IftaLabel visually integrates a label within its form element.
+ *
+ * [Live Demo](https://www.primeng.org/iftalabel/)
+ *
+ * @module iftalabelstyle
+ *
+ */
+var IftaLabelClasses;
+(function (IftaLabelClasses) {
+    /**
+     * Class name of the root element
+     */
+    IftaLabelClasses["root"] = "p-iftalabel";
+})(IftaLabelClasses || (IftaLabelClasses = {}));
+
+/**
+ * IftaLabel is used to create infield top aligned labels.
+ * @group Components
+ */
+class IftaLabel extends BaseComponent {
+    _componentStyle = inject(IftaLabelStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: IftaLabel, selector: "p-iftalabel, p-iftaLabel", host: { classAttribute: "p-iftalabel" }, providers: [IftaLabelStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-iftalabel, p-iftaLabel',
+                    template: ` <ng-content></ng-content> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [IftaLabelStyle],
+                    host: {
+                        class: 'p-iftalabel',
+                    },
+                }]
+        }] });
+class IftaLabelModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: IftaLabelModule, declarations: [IftaLabel], imports: [CommonModule, SharedModule, RouterModule], exports: [IftaLabel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabelModule, imports: [CommonModule, SharedModule, RouterModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: IftaLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SharedModule, RouterModule],
+                    exports: [IftaLabel, SharedModule],
+                    declarations: [IftaLabel],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IftaLabel, IftaLabelClasses, IftaLabelModule, IftaLabelStyle };
+//# sourceMappingURL=primeng-iftalabel.mjs.map

package/fesm2022/primeng-iftalabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"primeng-iftalabel.mjs","sources":["../../src/app/components/iftalabel/style/iftalabelstyle.ts","../../src/app/components/iftalabel/iftalabel.ts","../../src/app/components/iftalabel/primeng-iftalabel.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-iftalabel {\n    display: block;\n    position: relative;\n}\n\n.p-iftalabel label {\n    position: absolute;\n    pointer-events: none;\n    top: ${dt('iftalabel.top')};\n    transition-property: all;\n    transition-timing-function: ease;\n    line-height: 1;\n    font-size: ${dt('iftalabel.font.size')};\n    font-weight: ${dt('iftalabel.font.weight')};\n    left: ${dt('iftalabel.position.x')};\n    color: ${dt('iftalabel.color')};\n    transition-duration: ${dt('iftalabel.transition.duration')};\n}\n\n.p-iftalabel .p-inputtext,\n.p-iftalabel .p-textarea,\n.p-iftalabel .p-select-label,\n.p-iftalabel .p-multiselect-label-container,\n.p-iftalabel .p-autocomplete-input-multiple,\n.p-iftalabel .p-cascadeselect-label,\n.p-iftalabel .p-treeselect-label {\n    padding-top: ${dt('iftalabel.input.padding.top')};\n}\n\n.p-iftalabel:has(.ng-invalid.ng-dirty) label {\n    color: ${dt('iftalabel.invalid.color')};\n}\n\n.p-iftalabel:has(input:focus) label ,\n.p-iftalabel:has(input:-webkit-autofill) label,\n.p-iftalabel:has(textarea:focus) label ,\n.p-iftalabel:has(.p-inputwrapper-focus) label  {\n    color: ${dt('iftalabel.focus.color')};\n}\n\n.p-iftalabel .p-inputicon {\n    top: ${dt('iftalabel.input.padding.top')};\n    transform: translateY(25%);\n    margin-top: 0;\n}\n\n/*.p-iftalabel .p-placeholder,\n.p-iftalabel input::placeholder,\n.p-iftalabel .p-inputtext::placeholder {\n    opacity: 0;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-iftalabel .p-focus .p-placeholder,\n.p-iftalabel input:focus::placeholder,\n.p-iftalabel .p-inputtext:focus::placeholder {\n    opacity: 1;\n    transition-property: all;\n    transition-timing-function: ease;\n}*/\n`;\n\nconst classes = {\n    root: 'p-iftalabel',\n};\n\n@Injectable()\nexport class IftaLabelStyle extends BaseStyle {\n    name = 'iftalabel';\n\n    theme = theme;\n\n    classes = classes;\n}\n\n/**\n *\n * IftaLabel visually integrates a label within its form element.\n *\n * [Live Demo](https://www.primeng.org/iftalabel/)\n *\n * @module iftalabelstyle\n *\n */\nexport enum IftaLabelClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-iftalabel',\n}\n\nexport interface IftaLabelStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, NgModule, ViewEncapsulation } from '@angular/core';\nimport { SharedModule } from 'primeng/api';\nimport { RouterModule } from '@angular/router';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { IftaLabelStyle } from './style/iftalabelstyle';\n\n/**\n * IftaLabel is used to create infield top aligned labels.\n * @group Components\n */\n@Component({\n    selector: 'p-iftalabel, p-iftaLabel',\n    template: ` <ng-content></ng-content> `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [IftaLabelStyle],\n    host: {\n        class: 'p-iftalabel',\n    },\n})\nexport class IftaLabel extends BaseComponent {\n    _componentStyle = inject(IftaLabelStyle);\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule, RouterModule],\n    exports: [IftaLabel, SharedModule],\n    declarations: [IftaLabel],\n})\nexport class IftaLabelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/primeng-image.mjs

@@ -176,6 +176,62 @@ class ImageStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ImageStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * Displays an image with preview and tranformation options. For multiple image, see Galleria.
+ *
+ * [Live Demo](https://www.primeng.org/image/)
+ *
+ * @module imagestyle
+ *
+ */
+var ImageClasses;
+(function (ImageClasses) {
+    /**
+     * Class name of the root element
+     */
+    ImageClasses["root"] = "p-image";
+    /**
+     * Class name of the preview mask element
+     */
+    ImageClasses["previewMask"] = "p-image-preview-mask";
+    /**
+     * Class name of the preview icon element
+     */
+    ImageClasses["previewIcon"] = "p-image-preview-icon";
+    /**
+     * Class name of the mask element
+     */
+    ImageClasses["mask"] = "p-image-mask";
+    /**
+     * Class name of the toolbar element
+     */
+    ImageClasses["toolbar"] = "p-image-toolbar";
+    /**
+     * Class name of the rotate right button element
+     */
+    ImageClasses["rotateRightButton"] = "p-image-rotate-right-button";
+    /**
+     * Class name of the rotate left button element
+     */
+    ImageClasses["rotateLeftButton"] = "p-image-rotate-left-button";
+    /**
+     * Class name of the zoom out button element
+     */
+    ImageClasses["zoomOutButton"] = "p-image-zoom-out-button";
+    /**
+     * Class name of the zoom in button element
+     */
+    ImageClasses["zoomInButton"] = "p-image-zoom-in-button";
+    /**
+     * Class name of the close button element
+     */
+    ImageClasses["closeButton"] = "p-image-close-button";
+    /**
+     * Class name of the original element
+     */
+    ImageClasses["original"] = "p-image-original";
+})(ImageClasses || (ImageClasses = {}));
 
 /**
  * Displays an image with preview and tranformation options. For multiple image, see Galleria.
@@ -293,6 +349,8 @@ class Image extends BaseComponent {
     closeButton;
     templates;
     indicatorTemplate;
+    imageTemplate;
+    previewTemplate;
     rotateRightIconTemplate;
     rotateLeftIconTemplate;
     zoomOutIconTemplate;
@@ -327,6 +385,12 @@ class Image extends BaseComponent {
                 case 'indicator':
                     this.indicatorTemplate = item.template;
                     break;
+                case 'image':
+                    this.imageTemplate = item.template;
+                    break;
+                case 'preview':
+                    this.previewTemplate = item.template;
+                    break;
                 case 'rotaterighticon':
                     this.rotateRightIconTemplate = item.template;
                     break;
@@ -482,18 +546,23 @@ class Image extends BaseComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Image, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: Image, selector: "p-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", styleClass: "styleClass", style: "style", src: "src", srcSet: "srcSet", sizes: "sizes", 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)" } }, providers: [ImageStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], 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 }], usesInheritance: true, ngImport: i0, template: `
         <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
-            <img
-                [attr.src]="src"
-                [attr.srcset]="srcSet"
-                [attr.sizes]="sizes"
-                [attr.alt]="alt"
-                [attr.width]="width"
-                [attr.height]="height"
-                [attr.loading]="loading"
-                [ngStyle]="imageStyle"
-                [class]="imageClass"
-                (error)="imageError($event)"
-            />
+            <ng-container *ngIf="!imageTemplate">
+                <img
+                    [attr.src]="src"
+                    [attr.srcset]="srcSet"
+                    [attr.sizes]="sizes"
+                    [attr.alt]="alt"
+                    [attr.width]="width"
+                    [attr.height]="height"
+                    [attr.loading]="loading"
+                    [ngStyle]="imageStyle"
+                    [class]="imageClass"
+                    (error)="imageError($event)"
+                />
+            </ng-container>
+
+            <ng-container *ngTemplateOutlet="imageTemplate; context: { errorCallback: imageError.bind(this) }"></ng-container>
+
             <button
                 *ngIf="preview"
                 [attr.aria-label]="zoomImageAriaLabel"
@@ -580,14 +649,27 @@ class Image extends BaseComponent {
                     (@animation.start)="onAnimationStart($event)"
                     (@animation.done)="onAnimationEnd($event)"
                 >
-                    <img
-                        [attr.src]="previewImageSrc ? previewImageSrc : src"
-                        [attr.srcset]="previewImageSrcSet"
-                        [attr.sizes]="previewImageSizes"
-                        class="p-image-original"
-                        [ngStyle]="imagePreviewStyle()"
-                        (click)="onPreviewImageClick()"
-                    />
+                    <ng-container *ngIf="!previewTemplate">
+                        <img
+                            [attr.src]="previewImageSrc ? previewImageSrc : src"
+                            [attr.srcset]="previewImageSrcSet"
+                            [attr.sizes]="previewImageSizes"
+                            class="p-image-original"
+                            [ngStyle]="imagePreviewStyle()"
+                            (click)="onPreviewImageClick()"
+                        />
+                    </ng-container>
+                    <ng-container
+                        *ngTemplateOutlet="
+                            previewTemplate;
+                            context: {
+                                class: 'p-image-original',
+                                style: imagePreviewStyle(),
+                                previewCallback: onPreviewImageClick.bind(this),
+                            }
+                        "
+                    >
+                    </ng-container>
                 </div>
             </div>
         </span>
@@ -604,18 +686,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     selector: 'p-image',
                     template: `
         <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
-            <img
-                [attr.src]="src"
-                [attr.srcset]="srcSet"
-                [attr.sizes]="sizes"
-                [attr.alt]="alt"
-                [attr.width]="width"
-                [attr.height]="height"
-                [attr.loading]="loading"
-                [ngStyle]="imageStyle"
-                [class]="imageClass"
-                (error)="imageError($event)"
-            />
+            <ng-container *ngIf="!imageTemplate">
+                <img
+                    [attr.src]="src"
+                    [attr.srcset]="srcSet"
+                    [attr.sizes]="sizes"
+                    [attr.alt]="alt"
+                    [attr.width]="width"
+                    [attr.height]="height"
+                    [attr.loading]="loading"
+                    [ngStyle]="imageStyle"
+                    [class]="imageClass"
+                    (error)="imageError($event)"
+                />
+            </ng-container>
+
+            <ng-container *ngTemplateOutlet="imageTemplate; context: { errorCallback: imageError.bind(this) }"></ng-container>
+
             <button
                 *ngIf="preview"
                 [attr.aria-label]="zoomImageAriaLabel"
@@ -702,14 +789,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     (@animation.start)="onAnimationStart($event)"
                     (@animation.done)="onAnimationEnd($event)"
                 >
-                    <img
-                        [attr.src]="previewImageSrc ? previewImageSrc : src"
-                        [attr.srcset]="previewImageSrcSet"
-                        [attr.sizes]="previewImageSizes"
-                        class="p-image-original"
-                        [ngStyle]="imagePreviewStyle()"
-                        (click)="onPreviewImageClick()"
-                    />
+                    <ng-container *ngIf="!previewTemplate">
+                        <img
+                            [attr.src]="previewImageSrc ? previewImageSrc : src"
+                            [attr.srcset]="previewImageSrcSet"
+                            [attr.sizes]="previewImageSizes"
+                            class="p-image-original"
+                            [ngStyle]="imagePreviewStyle()"
+                            (click)="onPreviewImageClick()"
+                        />
+                    </ng-container>
+                    <ng-container
+                        *ngTemplateOutlet="
+                            previewTemplate;
+                            context: {
+                                class: 'p-image-original',
+                                style: imagePreviewStyle(),
+                                previewCallback: onPreviewImageClick.bind(this),
+                            }
+                        "
+                    >
+                    </ng-container>
                 </div>
             </div>
         </span>
@@ -801,5 +901,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Image, ImageModule };
+export { Image, ImageClasses, ImageModule, ImageStyle };
 //# sourceMappingURL=primeng-image.mjs.map