@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-drawer.mjs

@@ -0,0 +1,271 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { viewChild, contentChild, input, computed, Directive, inject, output, model, booleanAttribute, signal, afterRenderEffect, effect, untracked, Component } from '@angular/core';
+import { templateTypesFn, Platform, toPopoverCloseBy, NgnTemplate } from '@ngneers/controls/api/ng';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnButton } from '@ngneers/controls/button';
+import { NgnDefer } from '@ngneers/controls/defer';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { generateElementId, FocusTrap } from '@ngneers/controls/utils-ng';
+import { drawerControlTemplate } from '@ngneers/controls-themes/templates/drawer';
+
+class DrawerTemplates extends NgnBase {
+    // Header template
+    _defaultHeaderTemplate = viewChild.required('defaultHeaderTemplate');
+    _userHeaderTemplate = contentChild('header', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userHeaderTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the header.
+     * Can also be set using an `<ng-template>` element with `#header` template reference variable.
+     */
+    templateHeader = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateHeader" }] : /* istanbul ignore next */ []));
+    headerTemplate = computed(() => this._userHeaderTemplate() ?? this.templateHeader() ?? this._defaultHeaderTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    // Footer template
+    _userFooterTemplate = contentChild('footer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userFooterTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the footer.
+     * Can also be set using an `<ng-template>` element with `#footer` template reference variable.
+     */
+    templateFooter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateFooter" }] : /* istanbul ignore next */ []));
+    footerTemplate = computed(() => this._userFooterTemplate() ?? this.templateFooter(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    // Content template
+    _userContentTemplate = contentChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userContentTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the content.
+     * Can also be set using an `<ng-template>` element with `#content` template reference variable.
+     */
+    content = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    contentTemplate = computed(() => this._userContentTemplate() ?? this.content(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Types for the drawer templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DrawerTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: DrawerTemplates, isStandalone: true, inputs: { templateHeader: { classPropertyName: "templateHeader", publicName: "templateHeader", isSignal: true, isRequired: false, transformFunction: null }, templateFooter: { classPropertyName: "templateFooter", publicName: "templateFooter", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userHeaderTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "_userFooterTemplate", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "_userContentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultHeaderTemplate", first: true, predicate: ["defaultHeaderTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DrawerTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _defaultHeaderTemplate: [{ type: i0.ViewChild, args: ['defaultHeaderTemplate', { isSignal: true }] }], _userHeaderTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], templateHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateHeader", required: false }] }], _userFooterTemplate: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], templateFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateFooter", required: false }] }], _userContentTemplate: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
+
+/**
+ * @category control
+ */
+class NgnDrawer extends DrawerTemplates {
+    theme = this.injectThemeTemplate(drawerControlTemplate, {
+        root: true,
+        horizontal: () => this.horizontal(),
+    });
+    i18n = inject(I18n).translations;
+    headerId = generateElementId();
+    _focusTrap;
+    /**
+     * Emits when the drawer has fully closed.
+     */
+    closed = output();
+    /**
+     * Shows or hides the drawer.
+     *
+     * You probably want to react to openChange events from outside to update your variable accordingly.
+     * @default false
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * How the drawer closes depending on user interaction.
+     * @default 'any'
+     */
+    closeBy = input('any', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the drawer is a modal or not.
+     * A modal drawer prevents interaction with the rest of the page while open.
+     * @default false
+     */
+    modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Position of the drawer
+     * @default 'left'
+     */
+    position = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * The width or height of the drawer depending on its position
+     * @default '300px'
+     */
+    size = input('300px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Header text of the drawer
+     */
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    /**
+     * The icon to use for the close button in the default header template
+     */
+    iconClose = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconClose" }] : /* istanbul ignore next */ []));
+    /**
+     * Lazy load the drawer content
+     * @default false
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to cache the lazy loaded content
+     * @default false
+     */
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    appliedPosition = computed(() => {
+        const position = this.position();
+        if (this.platform.windowSize().height < 600 || this.platform.windowSize().width < 600) {
+            return 'fullscreen';
+        }
+        return position;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedPosition" }] : /* istanbul ignore next */ []));
+    platform = inject(Platform);
+    _togglingTriggeredByInput = false;
+    isFullyClosed = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullyClosed" }] : /* istanbul ignore next */ []));
+    closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeByPopover" }] : /* istanbul ignore next */ []));
+    horizontal = computed(() => this.position() === 'top' || this.position() === 'bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
+    doClose = this.hide.bind(this);
+    constructor() {
+        super();
+        afterRenderEffect(() => {
+            if (this.open()) {
+                this._togglingTriggeredByInput = true;
+                this.show();
+            }
+            else {
+                this._togglingTriggeredByInput = true;
+                this.hide();
+            }
+        });
+        // Trap focus inside a modal drawer while it is open. The Popover API already
+        // handles Escape/light-dismiss; the trap adds focus-in, Tab wrapping, and
+        // focus restore on close that the popover does not provide. Runs as an
+        // afterRenderEffect so the (deferred) content has rendered before we move
+        // focus onto its first focusable child — a rAF can fire before zoneless CD.
+        afterRenderEffect(() => {
+            if (this.open() && this.modal()) {
+                (this._focusTrap ??= new FocusTrap(this.element.nativeElement)).activate();
+            }
+            else {
+                this._focusTrap?.deactivate();
+            }
+        });
+        effect(() => {
+            const position = this.appliedPosition();
+            if (position === 'fullscreen') {
+                this.element.nativeElement.style.top = '0';
+                this.element.nativeElement.style.bottom = '0';
+                this.element.nativeElement.style.left = '0';
+                this.element.nativeElement.style.right = '0';
+                this.element.nativeElement.style.width = '100%';
+                this.element.nativeElement.style.height = '100%';
+                return;
+            }
+            this.element.nativeElement.style.top = position !== 'bottom' ? '0' : 'unset';
+            this.element.nativeElement.style.bottom = position !== 'top' ? '0' : 'unset';
+            this.element.nativeElement.style.left = position !== 'right' ? '0' : 'unset';
+            this.element.nativeElement.style.right = position !== 'left' ? '0' : 'unset';
+            if (position === 'left' || position === 'right') {
+                this.element.nativeElement.style.width = this.size();
+                this.element.nativeElement.style.height = '100%';
+            }
+            else {
+                this.element.nativeElement.style.height = this.size();
+                this.element.nativeElement.style.width = '100%';
+            }
+        });
+    }
+    /**
+     * Opens the drawer. Alternatively, you can also set the `open` input to `true`.
+     */
+    show() {
+        untracked(() => {
+            if (this.open() && !this._togglingTriggeredByInput) {
+                return;
+            }
+            this._togglingTriggeredByInput = false;
+            this.element.nativeElement.togglePopover(true);
+        });
+    }
+    /**
+     * Closes the drawer. Alternatively, you can also set the `open` input to `false`.
+     */
+    hide() {
+        untracked(() => {
+            if (!this.open() && !this._togglingTriggeredByInput) {
+                return;
+            }
+            this._togglingTriggeredByInput = false;
+            this.element.nativeElement.togglePopover(false);
+        });
+    }
+    /**
+     * Toggles the drawer open or closed. Alternatively, you can also set the `open` input accordingly.
+     */
+    toggle() {
+        if (untracked(this.open)) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    onToggle(event) {
+        const evt = event;
+        if (evt.newState === 'closed') {
+            this.open.set(false);
+            requestAnimationFrame(() => {
+                const allAnimationsDone = Promise.all(this.element.nativeElement.getAnimations().map(x => x.finished));
+                allAnimationsDone
+                    .then(() => {
+                    this.isFullyClosed.set(true);
+                    this.closed.emit();
+                })
+                    .catch(() => {
+                    // ignore cancelled animation
+                });
+            });
+        }
+        else {
+            this.open.set(true);
+            this.isFullyClosed.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnDrawer, isStandalone: true, selector: "ngn-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeBy: { classPropertyName: "closeBy", publicName: "closeBy", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, iconClose: { classPropertyName: "iconClose", publicName: "iconClose", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", open: "openChange" }, host: { listeners: { "toggle": "onToggle($event)" }, properties: { "attr.popover": "closeByPopover()", "attr.aria-modal": "modal() ? \"true\" : null", "attr.role": "modal() ? \"dialog\" : \"complementary\"", "attr.aria-labelledby": "header() ? headerId : null", "attr.data-position": "position()" } }, providers: [provideSelf(NgnDrawer)], usesInheritance: true, ngImport: i0, template: "<header [ptInt]=\"this\" [ptClass]=\"'header'\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      headerTemplate();\n      context: { $implicit: { close: doClose, text: this.header(), headerId } }\n    \"\n  />\n</header>\n<ngn-defer\n  [lazyContent]=\"contentTemplate()\"\n  [open]=\"open() || !isFullyClosed()\"\n  [lazy]=\"lazy()\"\n  [cache]=\"cache()\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'content'\"\n>\n  <ng-content />\n</ngn-defer>\n@if (footerTemplate(); as footerTemplate) {\n  <footer [ptInt]=\"this\" [ptClass]=\"'footer'\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n  </footer>\n}\n\n<ng-template #defaultHeaderTemplate [ngnTemplate]=\"templateTypes.header\" let-header>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-header'\">\n    <span [id]=\"header.headerId\" [ptInt]=\"this\" [ptClass]=\"'default-header-text'\">{{\n      header.text\n    }}</span>\n    <button\n      ngnButton\n      [kind]=\"'icon'\"\n      [attr.aria-label]=\"i18n['drawer_close']()\"\n      (click)=\"header.close()\"\n    >\n      <ngn-icon defaultIcon=\"drawer-close\" [icon]=\"iconClose()\" />\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["ngnButtonInline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-drawer', imports: [NgnPt, NgTemplateOutlet, NgnDefer, NgnButton, NgnIcon, NgnTemplate], providers: [provideSelf(NgnDrawer)], host: {
+                        '[attr.popover]': 'closeByPopover()',
+                        '(toggle)': 'onToggle($event)',
+                        '[attr.aria-modal]': 'modal() ? "true" : null',
+                        // A modal overlay is a dialog; a non-modal side panel is complementary
+                        // landmark content. `aria-modal` is only coherent on the dialog role.
+                        '[attr.role]': 'modal() ? "dialog" : "complementary"',
+                        '[attr.aria-labelledby]': 'header() ? headerId : null',
+                        '[attr.data-position]': 'position()',
+                    }, template: "<header [ptInt]=\"this\" [ptClass]=\"'header'\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      headerTemplate();\n      context: { $implicit: { close: doClose, text: this.header(), headerId } }\n    \"\n  />\n</header>\n<ngn-defer\n  [lazyContent]=\"contentTemplate()\"\n  [open]=\"open() || !isFullyClosed()\"\n  [lazy]=\"lazy()\"\n  [cache]=\"cache()\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'content'\"\n>\n  <ng-content />\n</ngn-defer>\n@if (footerTemplate(); as footerTemplate) {\n  <footer [ptInt]=\"this\" [ptClass]=\"'footer'\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n  </footer>\n}\n\n<ng-template #defaultHeaderTemplate [ngnTemplate]=\"templateTypes.header\" let-header>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-header'\">\n    <span [id]=\"header.headerId\" [ptInt]=\"this\" [ptClass]=\"'default-header-text'\">{{\n      header.text\n    }}</span>\n    <button\n      ngnButton\n      [kind]=\"'icon'\"\n      [attr.aria-label]=\"i18n['drawer_close']()\"\n      (click)=\"header.close()\"\n    >\n      <ngn-icon defaultIcon=\"drawer-close\" [icon]=\"iconClose()\" />\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { closed: [{ type: i0.Output, args: ["closed"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeBy", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], iconClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClose", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], cache: [{ type: i0.Input, args: [{ isSignal: true, alias: "cache", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnDrawer };
+//# sourceMappingURL=ngneers-controls-drawer.mjs.map

package/fesm2022/ngneers-controls-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-drawer.mjs","sources":["../../src/drawer/drawer-templates.ts","../../src/drawer/drawer.ts","../../src/drawer/drawer.html","../../src/drawer/ngneers-controls-drawer.ts"],"sourcesContent":["import { computed, contentChild, Directive, input, TemplateRef, viewChild } from '@angular/core';\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\nimport { NgnBase } from '@ngneers/controls/base';\n\nimport type { HeaderTemplateType } from './types';\n\n@Directive()\nexport abstract class DrawerTemplates extends NgnBase<'drawer'> {\n  // Header template\n  private readonly _defaultHeaderTemplate =\n    viewChild.required<TemplateRef<typeof this.templateTypes.header>>('defaultHeaderTemplate');\n  private readonly _userHeaderTemplate =\n    contentChild<TemplateRef<typeof this.templateTypes.header>>('header');\n  /**\n   * Set a custom template for the header.\n   * Can also be set using an `<ng-template>` element with `#header` template reference variable.\n   */\n  public readonly templateHeader = input<TemplateRef<typeof this.templateTypes.header> | null>(\n    null\n  );\n  protected readonly headerTemplate = computed(\n    () => this._userHeaderTemplate() ?? this.templateHeader() ?? this._defaultHeaderTemplate()\n  );\n\n  // Footer template\n  private readonly _userFooterTemplate = contentChild<TemplateRef<unknown>>('footer');\n  /**\n   * Set a custom template for the footer.\n   * Can also be set using an `<ng-template>` element with `#footer` template reference variable.\n   */\n  public readonly templateFooter = input<TemplateRef<unknown> | null>(null);\n  protected readonly footerTemplate = computed(\n    () => this._userFooterTemplate() ?? this.templateFooter()\n  );\n\n  // Content template\n  private readonly _userContentTemplate = contentChild<TemplateRef<unknown>>('content');\n  /**\n   * Set a custom template for the content.\n   * Can also be set using an `<ng-template>` element with `#content` template reference variable.\n   */\n  public readonly content = input<TemplateRef<unknown> | null>(null);\n  protected readonly contentTemplate = computed(\n    () => this._userContentTemplate() ?? this.content()\n  );\n\n  /**\n   * Types for the drawer templates.\n   */\n  public readonly templateTypes = templateTypesFn<{\n    /**\n     * Type of the template variable for the header template.\n     */\n    header: HeaderTemplateType;\n  }>();\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  afterRenderEffect,\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n} from '@angular/core';\nimport {\n  NgnTemplate,\n  type Openable,\n  Platform,\n  type PopoverCloseBy,\n  toPopoverCloseBy,\n} from '@ngneers/controls/api/ng';\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\nimport { NgnButton } from '@ngneers/controls/button';\nimport { NgnDefer } from '@ngneers/controls/defer';\nimport { I18n } from '@ngneers/controls/i18n';\nimport { NgnIcon } from '@ngneers/controls/icon';\nimport { FocusTrap, generateElementId } from '@ngneers/controls/utils-ng';\nimport { drawerControlTemplate } from '@ngneers/controls-themes/templates/drawer';\n\nimport { DrawerTemplates } from './drawer-templates';\n\nimport type { IconType } from '@ngneers/controls-custom-types';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-drawer',\n  templateUrl: './drawer.html',\n  imports: [NgnPt, NgTemplateOutlet, NgnDefer, NgnButton, NgnIcon, NgnTemplate],\n  providers: [provideSelf(NgnDrawer)],\n  host: {\n    '[attr.popover]': 'closeByPopover()',\n    '(toggle)': 'onToggle($event)',\n    '[attr.aria-modal]': 'modal() ? \"true\" : null',\n    // A modal overlay is a dialog; a non-modal side panel is complementary\n    // landmark content. `aria-modal` is only coherent on the dialog role.\n    '[attr.role]': 'modal() ? \"dialog\" : \"complementary\"',\n    '[attr.aria-labelledby]': 'header() ? headerId : null',\n    '[attr.data-position]': 'position()',\n  },\n})\nexport class NgnDrawer extends DrawerTemplates implements Openable {\n  protected readonly theme = this.injectThemeTemplate(drawerControlTemplate, {\n    root: true,\n    horizontal: () => this.horizontal(),\n  });\n  protected readonly i18n = inject(I18n).translations;\n  protected readonly headerId = generateElementId();\n  private _focusTrap?: FocusTrap;\n\n  /**\n   * Emits when the drawer has fully closed.\n   */\n  public readonly closed = output();\n  /**\n   * Shows or hides the drawer.\n   *\n   * You probably want to react to openChange events from outside to update your variable accordingly.\n   * @default false\n   */\n  public readonly open = model<boolean>(false);\n  /**\n   * How the drawer closes depending on user interaction.\n   * @default 'any'\n   */\n  public readonly closeBy = input<PopoverCloseBy>('any');\n  /**\n   * Whether the drawer is a modal or not.\n   * A modal drawer prevents interaction with the rest of the page while open.\n   * @default false\n   */\n  public readonly modal = input(false, { transform: booleanAttribute });\n  /**\n   * Position of the drawer\n   * @default 'left'\n   */\n  public readonly position = input<'top' | 'right' | 'bottom' | 'left' | 'fullscreen'>('left');\n  /**\n   * The width or height of the drawer depending on its position\n   * @default '300px'\n   */\n  public readonly size = input<string>('300px');\n  /**\n   * Header text of the drawer\n   */\n  public readonly header = input<string>();\n  /**\n   * The icon to use for the close button in the default header template\n   */\n  public readonly iconClose = input<IconType>();\n  /**\n   * Lazy load the drawer content\n   * @default false\n   */\n  public readonly lazy = input(false, { transform: booleanAttribute });\n  /**\n   * Whether to cache the lazy loaded content\n   * @default false\n   */\n  public readonly cache = input(false, { transform: booleanAttribute });\n\n  protected readonly appliedPosition = computed(() => {\n    const position = this.position();\n    if (this.platform.windowSize().height < 600 || this.platform.windowSize().width < 600) {\n      return 'fullscreen';\n    }\n    return position;\n  });\n\n  private readonly platform = inject(Platform);\n  private _togglingTriggeredByInput = false;\n  protected readonly isFullyClosed = signal(true);\n  protected readonly closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()));\n  protected readonly horizontal = computed(\n    () => this.position() === 'top' || this.position() === 'bottom'\n  );\n  protected readonly doClose = this.hide.bind(this);\n\n  constructor() {\n    super();\n    afterRenderEffect(() => {\n      if (this.open()) {\n        this._togglingTriggeredByInput = true;\n        this.show();\n      } else {\n        this._togglingTriggeredByInput = true;\n        this.hide();\n      }\n    });\n\n    // Trap focus inside a modal drawer while it is open. The Popover API already\n    // handles Escape/light-dismiss; the trap adds focus-in, Tab wrapping, and\n    // focus restore on close that the popover does not provide. Runs as an\n    // afterRenderEffect so the (deferred) content has rendered before we move\n    // focus onto its first focusable child — a rAF can fire before zoneless CD.\n    afterRenderEffect(() => {\n      if (this.open() && this.modal()) {\n        (this._focusTrap ??= new FocusTrap(this.element.nativeElement)).activate();\n      } else {\n        this._focusTrap?.deactivate();\n      }\n    });\n\n    effect(() => {\n      const position = this.appliedPosition();\n\n      if (position === 'fullscreen') {\n        this.element.nativeElement.style.top = '0';\n        this.element.nativeElement.style.bottom = '0';\n        this.element.nativeElement.style.left = '0';\n        this.element.nativeElement.style.right = '0';\n        this.element.nativeElement.style.width = '100%';\n        this.element.nativeElement.style.height = '100%';\n        return;\n      }\n\n      this.element.nativeElement.style.top = position !== 'bottom' ? '0' : 'unset';\n      this.element.nativeElement.style.bottom = position !== 'top' ? '0' : 'unset';\n      this.element.nativeElement.style.left = position !== 'right' ? '0' : 'unset';\n      this.element.nativeElement.style.right = position !== 'left' ? '0' : 'unset';\n      if (position === 'left' || position === 'right') {\n        this.element.nativeElement.style.width = this.size();\n        this.element.nativeElement.style.height = '100%';\n      } else {\n        this.element.nativeElement.style.height = this.size();\n        this.element.nativeElement.style.width = '100%';\n      }\n    });\n  }\n\n  /**\n   * Opens the drawer. Alternatively, you can also set the `open` input to `true`.\n   */\n  public show() {\n    untracked(() => {\n      if (this.open() && !this._togglingTriggeredByInput) {\n        return;\n      }\n      this._togglingTriggeredByInput = false;\n      this.element.nativeElement.togglePopover(true);\n    });\n  }\n\n  /**\n   * Closes the drawer. Alternatively, you can also set the `open` input to `false`.\n   */\n  public hide() {\n    untracked(() => {\n      if (!this.open() && !this._togglingTriggeredByInput) {\n        return;\n      }\n      this._togglingTriggeredByInput = false;\n      this.element.nativeElement.togglePopover(false);\n    });\n  }\n\n  /**\n   * Toggles the drawer open or closed. Alternatively, you can also set the `open` input accordingly.\n   */\n  public toggle() {\n    if (untracked(this.open)) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  protected onToggle(event: Event) {\n    const evt = event as ToggleEvent;\n    if (evt.newState === 'closed') {\n      this.open.set(false);\n\n      requestAnimationFrame(() => {\n        const allAnimationsDone = Promise.all(\n          this.element.nativeElement.getAnimations().map(x => x.finished)\n        );\n        allAnimationsDone\n          .then(() => {\n            this.isFullyClosed.set(true);\n            this.closed.emit();\n          })\n          .catch(() => {\n            // ignore cancelled animation\n          });\n      });\n    } else {\n      this.open.set(true);\n      this.isFullyClosed.set(false);\n    }\n  }\n}\n","<header [ptInt]=\"this\" [ptClass]=\"'header'\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      headerTemplate();\n      context: { $implicit: { close: doClose, text: this.header(), headerId } }\n    \"\n  />\n</header>\n<ngn-defer\n  [lazyContent]=\"contentTemplate()\"\n  [open]=\"open() || !isFullyClosed()\"\n  [lazy]=\"lazy()\"\n  [cache]=\"cache()\"\n  [ptInt]=\"this\"\n  [ptClass]=\"'content'\"\n>\n  <ng-content />\n</ngn-defer>\n@if (footerTemplate(); as footerTemplate) {\n  <footer [ptInt]=\"this\" [ptClass]=\"'footer'\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n  </footer>\n}\n\n<ng-template #defaultHeaderTemplate [ngnTemplate]=\"templateTypes.header\" let-header>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-header'\">\n    <span [id]=\"header.headerId\" [ptInt]=\"this\" [ptClass]=\"'default-header-text'\">{{\n      header.text\n    }}</span>\n    <button\n      ngnButton\n      [kind]=\"'icon'\"\n      [attr.aria-label]=\"i18n['drawer_close']()\"\n      (click)=\"header.close()\"\n    >\n      <ngn-icon defaultIcon=\"drawer-close\" [icon]=\"iconClose()\" />\n    </button>\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-edit-inplace.mjs

@@ -0,0 +1,127 @@
+import * as i0 from '@angular/core';
+import { viewChild, contentChild, input, computed, Directive, inject, model, booleanAttribute, Component } from '@angular/core';
+import { templateTypesFn, NgnTemplate } from '@ngneers/controls/api/ng';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnButton } from '@ngneers/controls/button';
+import { NgnAutofocus } from '@ngneers/controls/directives';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnInplace } from '@ngneers/controls/inplace';
+import { NgnInput } from '@ngneers/controls/input';
+import { NgnInputField } from '@ngneers/controls/input-field';
+import { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';
+
+class EditInplaceTemplates extends ValueControlBase {
+    // Display template
+    _defaultDisplayTemplate = viewChild.required('defaultDisplayTemplate');
+    _userDisplayTemplate = contentChild('display', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userDisplayTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the display.
+     * Can also be set using an `<ng-template>` element with `#display` template reference variable.
+     */
+    templateDisplay = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateDisplay" }] : /* istanbul ignore next */ []));
+    displayTemplate = computed(() => this._userDisplayTemplate() ?? this.templateDisplay() ?? this._defaultDisplayTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayTemplate" }] : /* istanbul ignore next */ []));
+    // Edit template
+    _defaultEditTemplate = viewChild.required('defaultEditTemplate');
+    _userEditTemplate = contentChild('edit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userEditTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the edit view.
+     * Can also be set using an `<ng-template>` element with `#edit` template reference variable.
+     */
+    templateEdit = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateEdit" }] : /* istanbul ignore next */ []));
+    editTemplate = computed(() => this._userEditTemplate() ?? this.templateEdit() ?? this._defaultEditTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Types for the edit-inplace templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EditInplaceTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: EditInplaceTemplates, isStandalone: true, inputs: { templateDisplay: { classPropertyName: "templateDisplay", publicName: "templateDisplay", isSignal: true, isRequired: false, transformFunction: null }, templateEdit: { classPropertyName: "templateEdit", publicName: "templateEdit", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userDisplayTemplate", first: true, predicate: ["display"], descendants: true, isSignal: true }, { propertyName: "_userEditTemplate", first: true, predicate: ["edit"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultDisplayTemplate", first: true, predicate: ["defaultDisplayTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultEditTemplate", first: true, predicate: ["defaultEditTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EditInplaceTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _defaultDisplayTemplate: [{ type: i0.ViewChild, args: ['defaultDisplayTemplate', { isSignal: true }] }], _userDisplayTemplate: [{ type: i0.ContentChild, args: ['display', { isSignal: true }] }], templateDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateDisplay", required: false }] }], _defaultEditTemplate: [{ type: i0.ViewChild, args: ['defaultEditTemplate', { isSignal: true }] }], _userEditTemplate: [{ type: i0.ContentChild, args: ['edit', { isSignal: true }] }], templateEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateEdit", required: false }] }] } });
+
+/**
+ * @category control
+ */
+class NgnEditInplace extends EditInplaceTemplates {
+    theme = this.injectThemeTemplate(editInplaceControlTemplate, {
+        root: true,
+        invalid: this.invalid(),
+        readonly: this.readonly(),
+        disabled: this.disabled(),
+    });
+    i18n = inject(I18n).translations;
+    closeContent = this.switchToDisplay.bind(this);
+    /**
+     * Controls the visibility of the content.
+     */
+    editVisible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editVisible" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the content is loaded lazily.
+     * @default true
+     */
+    lazy = input(true, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the content is cached when closed.
+     * @default false
+     */
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Switches to the edit view.
+     */
+    switchToEdit() {
+        this.editVisible.set(true);
+    }
+    /**
+     * Switches to the display view.
+     */
+    switchToDisplay() {
+        this.editVisible.set(false);
+    }
+    /**
+     * Toggles between the display and content views.
+     */
+    toggle() {
+        this.editVisible.update(v => !v);
+    }
+    focusOut(event) {
+        if (!this.editVisible()) {
+            return;
+        }
+        if (event.relatedTarget instanceof HTMLElement &&
+            this.element.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.switchToDisplay();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnEditInplace, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnEditInplace, isStandalone: true, selector: "ngn-edit-inplace", inputs: { editVisible: { classPropertyName: "editVisible", publicName: "editVisible", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editVisible: "editVisibleChange" }, providers: [provideSelf(NgnEditInplace)], usesInheritance: true, ngImport: i0, template: "<ngn-inplace\n  [ptInt]=\"this\"\n  [ptDep]=\"'inplace'\"\n  [templateDisplay]=\"displayTemplate()\"\n  [templateDisplayContext]=\"{ $implicit: { value: value() } }\"\n  [templateContent]=\"editTemplate()\"\n  [templateContentContext]=\"{\n    $implicit: {\n      value: value(),\n      update: value.set.bind(value),\n      close: editVisible.set.bind(editVisible, false),\n    },\n  }\"\n  [contentVisible]=\"editVisible()\"\n  (contentVisibleChange)=\"editVisible.set($event)\"\n  [lazy]=\"lazy()\"\n  [cache]=\"cache()\"\n  [disabled]=\"disabled() || readonly()\"\n  (contentVisibleChange)=\"!$event && touched.set(true)\"\n/>\n\n<ng-template #defaultDisplayTemplate [ngnTemplate]=\"templateTypes.display\" let-display>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-display'\">\n    @if (!display.value) {\n      <span [ptInt]=\"this\" [ptClass]=\"'default-fallback-display'\">{{\n        i18n['editInplace_placeholder']()\n      }}</span>\n    } @else {\n      <span>{{ display.value }}</span>\n      <span [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ i18n['editInplace_placeholder']() }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultEditTemplate [ngnTemplate]=\"templateTypes.edit\" let-edit>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-edit'\">\n    <ngn-input-field\n      (focusout)=\"focusOut($event)\"\n      [label]=\"label()\"\n      [inputId]=\"inputId()\"\n      [invalid]=\"invalid()\"\n      [labelledBy]=\"labelledBy()\"\n    >\n      <input\n        type=\"text\"\n        ngnInput\n        ngnAutofocus\n        [value]=\"edit.value\"\n        (valueChange)=\"edit.update($event ?? '')\"\n        (keydown.enter)=\"edit.close()\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'default-edit-input'\"\n        (blur)=\"touched.set(true)\"\n      />\n      <button\n        ngnButton\n        type=\"button\"\n        kind=\"icon\"\n        [ngnButtonInline]=\"true\"\n        (click)=\"edit.close()\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'default-edit-close-button'\"\n        [attr.aria-label]=\"i18n['editInplace_confirm']()\"\n      >\n        <ngn-icon defaultIcon=\"edit-confirm\" />\n      </button>\n    </ngn-input-field>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnInplace, selector: "ngn-inplace", inputs: ["contentVisible", "lazy", "cache", "disabled"], outputs: ["contentVisibleChange"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnInput, selector: "input[ngnInput], textarea[ngnInput]", inputs: ["invalid", "value"], outputs: ["valueChange"], exportAs: ["ngnInput"] }, { kind: "directive", type: NgnAutofocus, selector: "[ngnAutofocus]", inputs: ["ngnAutofocus"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["ngnButtonInline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "component", type: NgnInputField, selector: "ngn-input-field", inputs: ["label", "labelledBy", "labelKind", "inputId", "showClearButton", "iconClearButton", "tabindex", "invalid", "readonly", "disabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnEditInplace, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-edit-inplace', imports: [
+                        NgnPt,
+                        NgnInplace,
+                        NgnTemplate,
+                        NgnInput,
+                        NgnAutofocus,
+                        NgnButton,
+                        NgnIcon,
+                        NgnInputField,
+                    ], providers: [provideSelf(NgnEditInplace)], template: "<ngn-inplace\n  [ptInt]=\"this\"\n  [ptDep]=\"'inplace'\"\n  [templateDisplay]=\"displayTemplate()\"\n  [templateDisplayContext]=\"{ $implicit: { value: value() } }\"\n  [templateContent]=\"editTemplate()\"\n  [templateContentContext]=\"{\n    $implicit: {\n      value: value(),\n      update: value.set.bind(value),\n      close: editVisible.set.bind(editVisible, false),\n    },\n  }\"\n  [contentVisible]=\"editVisible()\"\n  (contentVisibleChange)=\"editVisible.set($event)\"\n  [lazy]=\"lazy()\"\n  [cache]=\"cache()\"\n  [disabled]=\"disabled() || readonly()\"\n  (contentVisibleChange)=\"!$event && touched.set(true)\"\n/>\n\n<ng-template #defaultDisplayTemplate [ngnTemplate]=\"templateTypes.display\" let-display>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-display'\">\n    @if (!display.value) {\n      <span [ptInt]=\"this\" [ptClass]=\"'default-fallback-display'\">{{\n        i18n['editInplace_placeholder']()\n      }}</span>\n    } @else {\n      <span>{{ display.value }}</span>\n      <span [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ i18n['editInplace_placeholder']() }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultEditTemplate [ngnTemplate]=\"templateTypes.edit\" let-edit>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-edit'\">\n    <ngn-input-field\n      (focusout)=\"focusOut($event)\"\n      [label]=\"label()\"\n      [inputId]=\"inputId()\"\n      [invalid]=\"invalid()\"\n      [labelledBy]=\"labelledBy()\"\n    >\n      <input\n        type=\"text\"\n        ngnInput\n        ngnAutofocus\n        [value]=\"edit.value\"\n        (valueChange)=\"edit.update($event ?? '')\"\n        (keydown.enter)=\"edit.close()\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'default-edit-input'\"\n        (blur)=\"touched.set(true)\"\n      />\n      <button\n        ngnButton\n        type=\"button\"\n        kind=\"icon\"\n        [ngnButtonInline]=\"true\"\n        (click)=\"edit.close()\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'default-edit-close-button'\"\n        [attr.aria-label]=\"i18n['editInplace_confirm']()\"\n      >\n        <ngn-icon defaultIcon=\"edit-confirm\" />\n      </button>\n    </ngn-input-field>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { editVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "editVisible", required: false }] }, { type: i0.Output, args: ["editVisibleChange"] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], cache: [{ type: i0.Input, args: [{ isSignal: true, alias: "cache", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnEditInplace };
+//# sourceMappingURL=ngneers-controls-edit-inplace.mjs.map

package/fesm2022/ngneers-controls-edit-inplace.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-edit-inplace.mjs","sources":["../../src/edit-inplace/edit-inplace-templates.ts","../../src/edit-inplace/edit-inplace.ts","../../src/edit-inplace/edit-inplace.html","../../src/edit-inplace/ngneers-controls-edit-inplace.ts"],"sourcesContent":["import { computed, contentChild, Directive, input, TemplateRef, viewChild } from '@angular/core';\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\nimport { ValueControlBase } from '@ngneers/controls/base';\n\nimport type { DisplayTemplateType, EditTemplateType } from './types';\n\n@Directive()\nexport abstract class EditInplaceTemplates extends ValueControlBase<'editInplace', string> {\n  // Display template\n  private readonly _defaultDisplayTemplate =\n    viewChild.required<TemplateRef<typeof this.templateTypes.display>>('defaultDisplayTemplate');\n  private readonly _userDisplayTemplate =\n    contentChild<TemplateRef<typeof this.templateTypes.display>>('display');\n  /**\n   * Set a custom template for the display.\n   * Can also be set using an `<ng-template>` element with `#display` template reference variable.\n   */\n  public readonly templateDisplay = input<TemplateRef<typeof this.templateTypes.display> | null>(\n    null\n  );\n  protected readonly displayTemplate = computed(\n    () => this._userDisplayTemplate() ?? this.templateDisplay() ?? this._defaultDisplayTemplate()\n  );\n\n  // Edit template\n  private readonly _defaultEditTemplate =\n    viewChild.required<TemplateRef<typeof this.templateTypes.edit>>('defaultEditTemplate');\n  private readonly _userEditTemplate =\n    contentChild<TemplateRef<typeof this.templateTypes.edit>>('edit');\n  /**\n   * Set a custom template for the edit view.\n   * Can also be set using an `<ng-template>` element with `#edit` template reference variable.\n   */\n  public readonly templateEdit = input<TemplateRef<typeof this.templateTypes.edit> | null>(null);\n  protected readonly editTemplate = computed(\n    () => this._userEditTemplate() ?? this.templateEdit() ?? this._defaultEditTemplate()\n  );\n\n  /**\n   * Types for the edit-inplace templates.\n   */\n  public readonly templateTypes = templateTypesFn<{\n    /**\n     * Type of the template variable for the display template.\n     */\n    display: DisplayTemplateType;\n    /**\n     * Type of the template variable for the edit template.\n     */\n    edit: EditTemplateType;\n  }>();\n}\n","import { booleanAttribute, Component, input, model, inject } from '@angular/core';\nimport { NgnTemplate } from '@ngneers/controls/api/ng';\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\nimport { NgnButton } from '@ngneers/controls/button';\nimport { NgnAutofocus } from '@ngneers/controls/directives';\nimport { I18n } from '@ngneers/controls/i18n';\nimport { NgnIcon } from '@ngneers/controls/icon';\nimport { NgnInplace } from '@ngneers/controls/inplace';\nimport { NgnInput } from '@ngneers/controls/input';\nimport { NgnInputField } from '@ngneers/controls/input-field';\nimport { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';\n\nimport { EditInplaceTemplates } from './edit-inplace-templates';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-edit-inplace',\n  templateUrl: './edit-inplace.html',\n  imports: [\n    NgnPt,\n    NgnInplace,\n    NgnTemplate,\n    NgnInput,\n    NgnAutofocus,\n    NgnButton,\n    NgnIcon,\n    NgnInputField,\n  ],\n  providers: [provideSelf(NgnEditInplace)],\n})\nexport class NgnEditInplace extends EditInplaceTemplates {\n  protected readonly theme = this.injectThemeTemplate(editInplaceControlTemplate, {\n    root: true,\n    invalid: this.invalid(),\n    readonly: this.readonly(),\n    disabled: this.disabled(),\n  });\n  protected readonly i18n = inject(I18n).translations;\n\n  protected readonly closeContent = this.switchToDisplay.bind(this);\n\n  /**\n   * Controls the visibility of the content.\n   */\n  public readonly editVisible = model<boolean>(false);\n  /**\n   * Whether the content is loaded lazily.\n   * @default true\n   */\n  public readonly lazy = input(true, { transform: booleanAttribute });\n  /**\n   * Whether the content is cached when closed.\n   * @default false\n   */\n  public readonly cache = input(false, { transform: booleanAttribute });\n\n  /**\n   * Switches to the edit view.\n   */\n  public switchToEdit() {\n    this.editVisible.set(true);\n  }\n\n  /**\n   * Switches to the display view.\n   */\n  public switchToDisplay() {\n    this.editVisible.set(false);\n  }\n\n  /**\n   * Toggles between the display and content views.\n   */\n  public toggle() {\n    this.editVisible.update(v => !v);\n  }\n\n  protected focusOut(event: FocusEvent) {\n    if (!this.editVisible()) {\n      return;\n    }\n    if (\n      event.relatedTarget instanceof HTMLElement &&\n      this.element.nativeElement.contains(event.relatedTarget as HTMLElement)\n    ) {\n      return;\n    }\n    this.switchToDisplay();\n  }\n}\n","<ngn-inplace\n  [ptInt]=\"this\"\n  [ptDep]=\"'inplace'\"\n  [templateDisplay]=\"displayTemplate()\"\n  [templateDisplayContext]=\"{ $implicit: { value: value() } }\"\n  [templateContent]=\"editTemplate()\"\n  [templateContentContext]=\"{\n    $implicit: {\n      value: value(),\n      update: value.set.bind(value),\n      close: editVisible.set.bind(editVisible, false),\n    },\n  }\"\n  [contentVisible]=\"editVisible()\"\n  (contentVisibleChange)=\"editVisible.set($event)\"\n  [lazy]=\"lazy()\"\n  [cache]=\"cache()\"\n  [disabled]=\"disabled() || readonly()\"\n  (contentVisibleChange)=\"!$event && touched.set(true)\"\n/>\n\n<ng-template #defaultDisplayTemplate [ngnTemplate]=\"templateTypes.display\" let-display>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-display'\">\n    @if (!display.value) {\n      <span [ptInt]=\"this\" [ptClass]=\"'default-fallback-display'\">{{\n        i18n['editInplace_placeholder']()\n      }}</span>\n    } @else {\n      <span>{{ display.value }}</span>\n      <span [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ i18n['editInplace_placeholder']() }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultEditTemplate [ngnTemplate]=\"templateTypes.edit\" let-edit>\n  <div [ptInt]=\"this\" [ptClass]=\"'default-edit'\">\n    <ngn-input-field\n      (focusout)=\"focusOut($event)\"\n      [label]=\"label()\"\n      [inputId]=\"inputId()\"\n      [invalid]=\"invalid()\"\n      [labelledBy]=\"labelledBy()\"\n    >\n      <input\n        type=\"text\"\n        ngnInput\n        ngnAutofocus\n        [value]=\"edit.value\"\n        (valueChange)=\"edit.update($event ?? '')\"\n        (keydown.enter)=\"edit.close()\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'default-edit-input'\"\n        (blur)=\"touched.set(true)\"\n      />\n      <button\n        ngnButton\n        type=\"button\"\n        kind=\"icon\"\n        [ngnButtonInline]=\"true\"\n        (click)=\"edit.close()\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'default-edit-close-button'\"\n        [attr.aria-label]=\"i18n['editInplace_confirm']()\"\n      >\n        <ngn-icon defaultIcon=\"edit-confirm\" />\n      </button>\n    </ngn-input-field>\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}