primeng/fesm2022/primeng-inplace.mjs

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, inject, booleanAttribute, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i2 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import { TimesIcon } from 'primeng/icons';
import { BaseStyle } from 'primeng/base';
import { Ripple } from 'primeng/ripple';

const theme = ({ dt }) => `
.p-inplace-display {
    display: inline-block;
    cursor: pointer;
    border: 1px solid transparent;
    padding: ${dt('inplace.padding')};
    border-radius: ${dt('inplace.border.radius')};
    transition: background ${dt('inplace.transition.duration')}, color ${dt('inplace.transition.duration')}, outline-color ${dt('inplace.transition.duration')}, box-shadow ${dt('inplace.transition.duration')};
    outline-color: transparent;
}

.p-inplace-display:not(.p-disabled):hover {
    background: ${dt('inplace.display.hover.background')};
    color: ${dt('inplace.display.hover.color')};
}

.p-inplace-display:focus-visible {
    box-shadow: ${dt('inplace.focus.ring.shadow')};
    outline: ${dt('inplace.focus.ring.width')} ${dt('inplace.focus.ring.style')} ${dt('inplace.focus.ring.color')};
    outline-offset: ${dt('inplace.focus.ring.offset')};
}

.p-inplace-content {
    display: block;
}
`;
const classes = {
    root: 'p-inplace p-component',
    display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
    content: 'p-inplace-content'
};
class InplaceStyle extends BaseStyle {
    name = 'inplace';
    theme = theme;
    classes = classes;
    static ɵfac = /*@__PURE__*/ (() => { let ɵInplaceStyle_BaseFactory; return function InplaceStyle_Factory(__ngFactoryType__) { return (ɵInplaceStyle_BaseFactory || (ɵInplaceStyle_BaseFactory = i0.ɵɵgetInheritedFactory(InplaceStyle)))(__ngFactoryType__ || InplaceStyle); }; })();
    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: InplaceStyle, factory: InplaceStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InplaceStyle, [{
        type: Injectable
    }], null, null); })();
/**
 *
 * Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
 *
 * [Live Demo](https://www.primeng.org/inplace)
 *
 * @module inplacestyle
 *
 */
var InplaceClasses;
(function (InplaceClasses) {
    /**
     * Class name of the root element
     */
    InplaceClasses["root"] = "p-inplace";
    /**
     * Class name of the display element
     */
    InplaceClasses["display"] = "p-inplace-display";
    /**
     * Class name of the content element
     */
    InplaceClasses["content"] = "p-inplace-content";
})(InplaceClasses || (InplaceClasses = {}));

const _c0 = ["*"];
const _c1 = ["display"];
const _c2 = ["content"];
const _c3 = ["closeicon"];
const _c4 = [[["", "pInplaceDisplay", ""]], [["", "pInplaceContent", ""]]];
const _c5 = ["[pInplaceDisplay]", "[pInplaceContent]"];
const _c6 = a0 => ({ "p-inplace p-component": true, "p-inplace-closable": a0 });
const _c7 = a0 => ({ "p-disabled": a0 });
const _c8 = a0 => ({ closeCallback: a0 });
function Inplace_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function Inplace_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 3);
    i0.ɵɵlistener("click", function Inplace_div_1_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onActivateClick($event)); })("keydown", function Inplace_div_1_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onKeydown($event)); });
    i0.ɵɵprojection(1);
    i0.ɵɵtemplate(2, Inplace_div_1_ng_container_2_Template, 1, 0, "ng-container", 4);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c7, ctx_r1.disabled));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.displayTemplate || ctx_r1._displayTemplate);
} }
function Inplace_div_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function Inplace_div_2_ng_container_3_button_1_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 10);
    i0.ɵɵlistener("click", function Inplace_div_2_ng_container_3_button_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDeactivateClick($event)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("icon", ctx_r1.closeIcon);
    i0.ɵɵattribute("aria-label", ctx_r1.closeAriaLabel);
} }
function Inplace_div_2_ng_container_3_button_2_TimesIcon_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "TimesIcon");
} }
function Inplace_div_2_ng_container_3_button_2_2_ng_template_0_Template(rf, ctx) { }
function Inplace_div_2_ng_container_3_button_2_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, Inplace_div_2_ng_container_3_button_2_2_ng_template_0_Template, 0, 0, "ng-template");
} }
function Inplace_div_2_ng_container_3_button_2_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 11);
    i0.ɵɵlistener("click", function Inplace_div_2_ng_container_3_button_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDeactivateClick($event)); });
    i0.ɵɵtemplate(1, Inplace_div_2_ng_container_3_button_2_TimesIcon_1_Template, 1, 0, "TimesIcon", 7)(2, Inplace_div_2_ng_container_3_button_2_2_Template, 1, 0, null, 4);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("ngClass", "p-button-icon-only");
    i0.ɵɵattribute("aria-label", ctx_r1.closeAriaLabel);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r1.closeIconTemplate && !ctx_r1._closeIconTemplate);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.closeIconTemplate || ctx_r1._closeIconTemplate);
} }
function Inplace_div_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, Inplace_div_2_ng_container_3_button_1_Template, 1, 2, "button", 8)(2, Inplace_div_2_ng_container_3_button_2_Template, 3, 4, "button", 9);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.closeIcon);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r1.closeIcon);
} }
function Inplace_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 5);
    i0.ɵɵprojection(1, 1);
    i0.ɵɵtemplate(2, Inplace_div_2_ng_container_2_Template, 1, 0, "ng-container", 6)(3, Inplace_div_2_ng_container_3_Template, 3, 2, "ng-container", 7);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.contentTemplate || ctx_r1._contentTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c8, ctx_r1.onDeactivateClick.bind(ctx_r1)));
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.closable);
} }
class InplaceDisplay {
    static ɵfac = function InplaceDisplay_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InplaceDisplay)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InplaceDisplay, selectors: [["p-inplacedisplay"], ["p-inplaceDisplay"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function InplaceDisplay_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵprojection(0);
        } }, dependencies: [CommonModule], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InplaceDisplay, [{
        type: Component,
        args: [{
                selector: 'p-inplacedisplay, p-inplaceDisplay',
                standalone: true,
                imports: [CommonModule],
                template: '<ng-content></ng-content>'
            }]
    }], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InplaceDisplay, { className: "InplaceDisplay", filePath: "inplace.ts", lineNumber: 16 }); })();
class InplaceContent {
    static ɵfac = function InplaceContent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InplaceContent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InplaceContent, selectors: [["p-inplacecontent"], ["p-inplaceContent"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function InplaceContent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵprojection(0);
        } }, dependencies: [CommonModule], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InplaceContent, [{
        type: Component,
        args: [{
                selector: 'p-inplacecontent, p-inplaceContent',
                standalone: true,
                imports: [CommonModule],
                template: '<ng-content></ng-content>'
            }]
    }], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InplaceContent, { className: "InplaceContent", filePath: "inplace.ts", lineNumber: 24 }); })();
/**
 * Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
 * @group Components
 */
class Inplace extends BaseComponent {
    /**
     * Whether the content is displayed or not.
     * @group Props
     */
    active = false;
    /**
     * Displays a button to switch back to display mode.
     * @group Props
     */
    closable = false;
    /**
     * When present, it specifies that the element should be disabled.
     * @group Props
     */
    disabled = false;
    /**
     * Allows to prevent clicking.
     * @group Props
     */
    preventClick;
    /**
     * Inline style of the element.
     * @group Props
     */
    style;
    /**
     * Class of the element.
     * @group Props
     */
    styleClass;
    /**
     * Icon to display in the close button.
     * @group Props
     */
    closeIcon;
    /**
     * Establishes a string value that labels the close button.
     * @group Props
     */
    closeAriaLabel;
    /**
     * Callback to invoke when inplace is opened.
     * @param {Event} event - Browser event.
     * @group Emits
     */
    onActivate = new EventEmitter();
    /**
     * Callback to invoke when inplace is closed.
     * @param {Event} event - Browser event.
     * @group Emits
     */
    onDeactivate = new EventEmitter();
    hover;
    /**
     * Display template of the element.
     * @group Templates
     */
    displayTemplate;
    /**
     * Content template of the element.
     * @group Templates
     */
    contentTemplate;
    /**
     * Close icon template of the element.
     * @group Templates
     */
    closeIconTemplate;
    _componentStyle = inject(InplaceStyle);
    onActivateClick(event) {
        if (!this.preventClick)
            this.activate(event);
    }
    onDeactivateClick(event) {
        if (!this.preventClick)
            this.deactivate(event);
    }
    /**
     * Activates the content.
     * @param {Event} event - Browser event.
     * @group Method
     */
    activate(event) {
        if (!this.disabled) {
            this.active = true;
            this.onActivate.emit(event);
            this.cd.markForCheck();
        }
    }
    /**
     * Deactivates the content.
     * @param {Event} event - Browser event.
     * @group Method
     */
    deactivate(event) {
        if (!this.disabled) {
            this.active = false;
            this.hover = false;
            this.onDeactivate.emit(event);
            this.cd.markForCheck();
        }
    }
    onKeydown(event) {
        if (event.code === 'Enter') {
            this.activate(event);
            event.preventDefault();
        }
    }
    templates;
    _displayTemplate;
    _closeIconTemplate;
    _contentTemplate;
    ngAfterContentInit() {
        this.templates?.forEach((item) => {
            switch (item.getType()) {
                case 'display':
                    this._displayTemplate = item.template;
                    break;
                case 'closeicon':
                    this._closeIconTemplate = item.template;
                    break;
                case 'content':
                    this._contentTemplate = item.template;
                    break;
            }
        });
    }
    static ɵfac = /*@__PURE__*/ (() => { let ɵInplace_BaseFactory; return function Inplace_Factory(__ngFactoryType__) { return (ɵInplace_BaseFactory || (ɵInplace_BaseFactory = i0.ɵɵgetInheritedFactory(Inplace)))(__ngFactoryType__ || Inplace); }; })();
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Inplace, selectors: [["p-inplace"]], contentQueries: function Inplace_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
            i0.ɵɵcontentQuery(dirIndex, _c2, 4);
            i0.ɵɵcontentQuery(dirIndex, _c3, 4);
            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.displayTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeIconTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
        } }, inputs: { active: [2, "active", "active", booleanAttribute], closable: [2, "closable", "closable", booleanAttribute], disabled: [2, "disabled", "disabled", booleanAttribute], preventClick: [2, "preventClick", "preventClick", booleanAttribute], style: "style", styleClass: "styleClass", closeIcon: "closeIcon", closeAriaLabel: "closeAriaLabel" }, outputs: { onActivate: "onActivate", onDeactivate: "onDeactivate" }, features: [i0.ɵɵProvidersFeature([InplaceStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c5, decls: 3, vars: 9, consts: [[3, "ngClass", "ngStyle"], ["class", "p-inplace-display", "tabindex", "0", "role", "button", 3, "ngClass", "click", "keydown", 4, "ngIf"], ["class", "p-inplace-content", 4, "ngIf"], ["tabindex", "0", "role", "button", 1, "p-inplace-display", 3, "click", "keydown", "ngClass"], [4, "ngTemplateOutlet"], [1, "p-inplace-content"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [4, "ngIf"], ["type", "button", "pButton", "", "pRipple", "", 3, "icon", "click", 4, "ngIf"], ["type", "button", "pButton", "", "pRipple", "", 3, "ngClass", "click", 4, "ngIf"], ["type", "button", "pButton", "", "pRipple", "", 3, "click", "icon"], ["type", "button", "pButton", "", "pRipple", "", 3, "click", "ngClass"]], template: function Inplace_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef(_c4);
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵtemplate(1, Inplace_div_1_Template, 3, 4, "div", 1)(2, Inplace_div_2_Template, 4, 5, "div", 2);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵclassMap(ctx.styleClass);
            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c6, ctx.closable))("ngStyle", ctx.style);
            i0.ɵɵattribute("aria-live", "polite");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", !ctx.active);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.active);
        } }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, ButtonModule, i2.ButtonDirective, TimesIcon, SharedModule, Ripple], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Inplace, [{
        type: Component,
        args: [{
                selector: 'p-inplace',
                standalone: true,
                imports: [CommonModule, ButtonModule, TimesIcon, SharedModule, Ripple],
                template: `
        <div [ngClass]="{ 'p-inplace p-component': true, 'p-inplace-closable': closable }" [ngStyle]="style" [class]="styleClass" [attr.aria-live]="'polite'">
            <div class="p-inplace-display" (click)="onActivateClick($event)" tabindex="0" role="button" (keydown)="onKeydown($event)" [ngClass]="{ 'p-disabled': disabled }" *ngIf="!active">
                <ng-content select="[pInplaceDisplay]"></ng-content>
                <ng-container *ngTemplateOutlet="displayTemplate || _displayTemplate"></ng-container>
            </div>
            <div class="p-inplace-content" *ngIf="active">
                <ng-content select="[pInplaceContent]"></ng-content>
                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { closeCallback: onDeactivateClick.bind(this) }"></ng-container>

                <ng-container *ngIf="closable">
                    <button *ngIf="closeIcon" type="button" [icon]="closeIcon" pButton pRipple (click)="onDeactivateClick($event)" [attr.aria-label]="closeAriaLabel"></button>
                    <button *ngIf="!closeIcon" type="button" pButton pRipple [ngClass]="'p-button-icon-only'" (click)="onDeactivateClick($event)" [attr.aria-label]="closeAriaLabel">
                        <TimesIcon *ngIf="!closeIconTemplate && !_closeIconTemplate" />
                        <ng-template *ngTemplateOutlet="closeIconTemplate || _closeIconTemplate"></ng-template>
                    </button>
                </ng-container>
            </div>
        </div>
    `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                providers: [InplaceStyle]
            }]
    }], null, { active: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], closable: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], disabled: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], preventClick: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], style: [{
            type: Input
        }], styleClass: [{
            type: Input
        }], closeIcon: [{
            type: Input
        }], closeAriaLabel: [{
            type: Input
        }], onActivate: [{
            type: Output
        }], onDeactivate: [{
            type: Output
        }], displayTemplate: [{
            type: ContentChild,
            args: ['display', { descendants: false }]
        }], contentTemplate: [{
            type: ContentChild,
            args: ['content', { descendants: false }]
        }], closeIconTemplate: [{
            type: ContentChild,
            args: ['closeicon', { descendants: false }]
        }], templates: [{
            type: ContentChildren,
            args: [PrimeTemplate]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Inplace, { className: "Inplace", filePath: "inplace.ts", lineNumber: 57 }); })();
class InplaceModule {
    static ɵfac = function InplaceModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InplaceModule)(); };
    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: InplaceModule });
    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Inplace, InplaceContent, InplaceDisplay, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InplaceModule, [{
        type: NgModule,
        args: [{
                imports: [Inplace, InplaceContent, InplaceDisplay, SharedModule],
                exports: [Inplace, InplaceContent, InplaceDisplay, SharedModule]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(InplaceModule, { imports: [Inplace, InplaceContent, InplaceDisplay, SharedModule], exports: [Inplace, InplaceContent, InplaceDisplay, SharedModule] }); })();

/**
 * Generated bundle index. Do not edit.
 */

export { Inplace, InplaceClasses, InplaceContent, InplaceDisplay, InplaceModule, InplaceStyle };
//# sourceMappingURL=primeng-inplace.mjs.map