@ngneers/controls 0.0.1-pre1 → 0.0.1-pre2

package/fesm2022/ngneers-controls-drawer.mjs

@@ -0,0 +1,232 @@
+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, ChangeDetectionStrategy, 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 { drawerControlTemplate } from '@ngneers/controls-themes/templates/drawer';
+
+class DrawerTemplates extends NgnBase {
+    // Header template
+    _defaultHeaderTemplate = viewChild.required('defaultHeaderTemplate');
+    _userHeaderTemplate = contentChild('header', ...(ngDevMode ? [{ debugName: "_userHeaderTemplate" }] : []));
+    /**
+     * Set a custom template for the header.
+     * Can also be set using an `<ng-template>` element with `#header` template reference variable.
+     */
+    templateHeader = input(null, ...(ngDevMode ? [{ debugName: "templateHeader" }] : []));
+    headerTemplate = computed(() => this._userHeaderTemplate() ?? this.templateHeader() ?? this._defaultHeaderTemplate(), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    // Footer template
+    _userFooterTemplate = contentChild('footer', ...(ngDevMode ? [{ debugName: "_userFooterTemplate" }] : []));
+    /**
+     * Set a custom template for the footer.
+     * Can also be set using an `<ng-template>` element with `#footer` template reference variable.
+     */
+    templateFooter = input(null, ...(ngDevMode ? [{ debugName: "templateFooter" }] : []));
+    footerTemplate = computed(() => this._userFooterTemplate() ?? this.templateFooter(), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    // Content template
+    _userContentTemplate = contentChild('content', ...(ngDevMode ? [{ debugName: "_userContentTemplate" }] : []));
+    /**
+     * Set a custom template for the content.
+     * Can also be set using an `<ng-template>` element with `#content` template reference variable.
+     */
+    content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    contentTemplate = computed(() => this._userContentTemplate() ?? this.content(), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+    /**
+     * Types for the drawer templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DrawerTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", 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: "21.1.0", 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;
+    /**
+     * 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.
+     */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /**
+     * How the drawer closes depending on user interaction.
+     * @default 'any'
+     */
+    closeBy = input('any', ...(ngDevMode ? [{ debugName: "closeBy" }] : []));
+    /**
+     * 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" } : {}), transform: booleanAttribute });
+    /**
+     * Position of the drawer
+     * @default 'left'
+     */
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * The width or height of the drawer depending on its position
+     * @default '300px'
+     */
+    size = input('300px', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Header text of the drawer
+     */
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
+    /**
+     * The icon to use for the close button in the default header template
+     */
+    iconClose = input(...(ngDevMode ? [undefined, { debugName: "iconClose" }] : []));
+    /**
+     * Lazy load the drawer content
+     * @default false
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : {}), transform: booleanAttribute });
+    /**
+     * Whether to cache the lazy loaded content
+     * @default false
+     */
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : {}), transform: booleanAttribute });
+    appliedPosition = computed(() => {
+        const position = this.position();
+        if (this.platform.windowSize().height < 600 || this.platform.windowSize().width < 600) {
+            return 'fullscreen';
+        }
+        return position;
+    }, ...(ngDevMode ? [{ debugName: "appliedPosition" }] : []));
+    platform = inject(Platform);
+    _togglingTriggeredByInput = false;
+    isFullyClosed = signal(true, ...(ngDevMode ? [{ debugName: "isFullyClosed" }] : []));
+    closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()), ...(ngDevMode ? [{ debugName: "closeByPopover" }] : []));
+    horizontal = computed(() => this.position() === 'top' || this.position() === 'bottom', ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
+    doClose = this.hide.bind(this);
+    constructor() {
+        super();
+        afterRenderEffect(() => {
+            if (this.open()) {
+                this._togglingTriggeredByInput = true;
+                this.show();
+            }
+            else {
+                this._togglingTriggeredByInput = true;
+                this.hide();
+            }
+        });
+        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: "21.1.0", ngImport: i0, type: NgnDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: { attributes: { "role": "complementary" }, listeners: { "toggle": "onToggle($event)" }, properties: { "attr.popover": "closeByPopover()", "ariaModal": "modal() ? \"true\" : undefined", "attr.data-position": "position()" } }, providers: [provideSelf(NgnDrawer)], usesInheritance: true, ngImport: i0, template: "<header [ptInt]=\"this\" [ptClass]=\"'header'\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      headerTemplate();\r\n      context: { $implicit: { close: doClose, text: this.header() } }\r\n    \"\r\n  />\r\n</header>\r\n<ngn-defer\r\n  [lazyContent]=\"contentTemplate()\"\r\n  [open]=\"open() || !isFullyClosed()\"\r\n  [lazy]=\"lazy()\"\r\n  [cache]=\"cache()\"\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'content'\"\r\n>\r\n  <ng-content />\r\n</ngn-defer>\r\n@if (footerTemplate(); as footerTemplate) {\r\n  <footer [ptInt]=\"this\" [ptClass]=\"'footer'\">\r\n    <ng-container *ngTemplateOutlet=\"footerTemplate\" />\r\n  </footer>\r\n}\r\n\r\n<ng-template #defaultHeaderTemplate [ngnTemplate]=\"templateTypes.header\" let-header>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-header'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'default-header-text'\">{{ header.text }}</span>\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [attr.aria-label]=\"i18n['drawer_close']()\"\r\n      (click)=\"header.close()\"\r\n    >\r\n      <ngn-icon defaultIcon=\"xmark\" [icon]=\"iconClose()\" />\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { 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: ["inline"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnDrawer, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-drawer', imports: [NgnPt, NgTemplateOutlet, NgnDefer, NgnButton, NgnIcon, NgnTemplate], providers: [provideSelf(NgnDrawer)], host: {
+                        '[attr.popover]': 'closeByPopover()',
+                        '(toggle)': 'onToggle($event)',
+                        '[ariaModal]': 'modal() ? "true" : undefined',
+                        role: 'complementary',
+                        '[attr.data-position]': 'position()',
+                    }, template: "<header [ptInt]=\"this\" [ptClass]=\"'header'\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      headerTemplate();\r\n      context: { $implicit: { close: doClose, text: this.header() } }\r\n    \"\r\n  />\r\n</header>\r\n<ngn-defer\r\n  [lazyContent]=\"contentTemplate()\"\r\n  [open]=\"open() || !isFullyClosed()\"\r\n  [lazy]=\"lazy()\"\r\n  [cache]=\"cache()\"\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'content'\"\r\n>\r\n  <ng-content />\r\n</ngn-defer>\r\n@if (footerTemplate(); as footerTemplate) {\r\n  <footer [ptInt]=\"this\" [ptClass]=\"'footer'\">\r\n    <ng-container *ngTemplateOutlet=\"footerTemplate\" />\r\n  </footer>\r\n}\r\n\r\n<ng-template #defaultHeaderTemplate [ngnTemplate]=\"templateTypes.header\" let-header>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-header'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'default-header-text'\">{{ header.text }}</span>\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [attr.aria-label]=\"i18n['drawer_close']()\"\r\n      (click)=\"header.close()\"\r\n    >\r\n      <ngn-icon defaultIcon=\"xmark\" [icon]=\"iconClose()\" />\r\n    </button>\r\n  </div>\r\n</ng-template>\r\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';\r\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\n\r\nimport type { HeaderTemplateType } from './types';\r\n\r\n@Directive()\r\nexport abstract class DrawerTemplates extends NgnBase<'drawer'> {\r\n  // Header template\r\n  private readonly _defaultHeaderTemplate =\r\n    viewChild.required<TemplateRef<typeof this.templateTypes.header>>('defaultHeaderTemplate');\r\n  private readonly _userHeaderTemplate =\r\n    contentChild<TemplateRef<typeof this.templateTypes.header>>('header');\r\n  /**\r\n   * Set a custom template for the header.\r\n   * Can also be set using an `<ng-template>` element with `#header` template reference variable.\r\n   */\r\n  public readonly templateHeader = input<TemplateRef<typeof this.templateTypes.header> | null>(\r\n    null\r\n  );\r\n  protected readonly headerTemplate = computed(\r\n    () => this._userHeaderTemplate() ?? this.templateHeader() ?? this._defaultHeaderTemplate()\r\n  );\r\n\r\n  // Footer template\r\n  private readonly _userFooterTemplate = contentChild<TemplateRef<unknown>>('footer');\r\n  /**\r\n   * Set a custom template for the footer.\r\n   * Can also be set using an `<ng-template>` element with `#footer` template reference variable.\r\n   */\r\n  public readonly templateFooter = input<TemplateRef<unknown> | null>(null);\r\n  protected readonly footerTemplate = computed(\r\n    () => this._userFooterTemplate() ?? this.templateFooter()\r\n  );\r\n\r\n  // Content template\r\n  private readonly _userContentTemplate = contentChild<TemplateRef<unknown>>('content');\r\n  /**\r\n   * Set a custom template for the content.\r\n   * Can also be set using an `<ng-template>` element with `#content` template reference variable.\r\n   */\r\n  public readonly content = input<TemplateRef<unknown> | null>(null);\r\n  protected readonly contentTemplate = computed(\r\n    () => this._userContentTemplate() ?? this.content()\r\n  );\r\n\r\n  /**\r\n   * Types for the drawer templates.\r\n   */\r\n  public readonly templateTypes = templateTypesFn<{\r\n    /**\r\n     * Type of the template variable for the header template.\r\n     */\r\n    header: HeaderTemplateType;\r\n  }>();\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  afterRenderEffect,\r\n  booleanAttribute,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  untracked,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport {\r\n  NgnTemplate,\r\n  type Openable,\r\n  Platform,\r\n  type PopoverCloseBy,\r\n  toPopoverCloseBy,\r\n} from '@ngneers/controls/api/ng';\r\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { NgnDefer } from '@ngneers/controls/defer';\r\nimport { I18n } from '@ngneers/controls/i18n';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { drawerControlTemplate } from '@ngneers/controls-themes/templates/drawer';\r\n\r\nimport { DrawerTemplates } from './drawer-templates';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-drawer',\r\n  templateUrl: './drawer.html',\r\n  imports: [NgnPt, NgTemplateOutlet, NgnDefer, NgnButton, NgnIcon, NgnTemplate],\r\n  providers: [provideSelf(NgnDrawer)],\r\n  host: {\r\n    '[attr.popover]': 'closeByPopover()',\r\n    '(toggle)': 'onToggle($event)',\r\n    '[ariaModal]': 'modal() ? \"true\" : undefined',\r\n    role: 'complementary',\r\n    '[attr.data-position]': 'position()',\r\n  },\r\n})\r\nexport class NgnDrawer extends DrawerTemplates implements Openable {\r\n  protected readonly theme = this.injectThemeTemplate(drawerControlTemplate, {\r\n    root: true,\r\n    horizontal: () => this.horizontal(),\r\n  });\r\n  protected readonly i18n = inject(I18n).translations;\r\n\r\n  /**\r\n   * Emits when the drawer has fully closed.\r\n   */\r\n  public readonly closed = output();\r\n  /**\r\n   * Shows or hides the drawer.\r\n   *\r\n   * You probably want to react to openChange events from outside to update your variable accordingly.\r\n   */\r\n  public readonly open = model<boolean>(false);\r\n  /**\r\n   * How the drawer closes depending on user interaction.\r\n   * @default 'any'\r\n   */\r\n  public readonly closeBy = input<PopoverCloseBy>('any');\r\n  /**\r\n   * Whether the drawer is a modal or not.\r\n   * A modal drawer prevents interaction with the rest of the page while open.\r\n   * @default false\r\n   */\r\n  public readonly modal = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Position of the drawer\r\n   * @default 'left'\r\n   */\r\n  public readonly position = input<'top' | 'right' | 'bottom' | 'left' | 'fullscreen'>('left');\r\n  /**\r\n   * The width or height of the drawer depending on its position\r\n   * @default '300px'\r\n   */\r\n  public readonly size = input<string>('300px');\r\n  /**\r\n   * Header text of the drawer\r\n   */\r\n  public readonly header = input<string>();\r\n  /**\r\n   * The icon to use for the close button in the default header template\r\n   */\r\n  public readonly iconClose = input<IconType>();\r\n  /**\r\n   * Lazy load the drawer content\r\n   * @default false\r\n   */\r\n  public readonly lazy = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Whether to cache the lazy loaded content\r\n   * @default false\r\n   */\r\n  public readonly cache = input(false, { transform: booleanAttribute });\r\n\r\n  protected readonly appliedPosition = computed(() => {\r\n    const position = this.position();\r\n    if (this.platform.windowSize().height < 600 || this.platform.windowSize().width < 600) {\r\n      return 'fullscreen';\r\n    }\r\n    return position;\r\n  });\r\n\r\n  private readonly platform = inject(Platform);\r\n  private _togglingTriggeredByInput = false;\r\n  protected readonly isFullyClosed = signal(true);\r\n  protected readonly closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()));\r\n  protected readonly horizontal = computed(\r\n    () => this.position() === 'top' || this.position() === 'bottom'\r\n  );\r\n  protected readonly doClose = this.hide.bind(this);\r\n\r\n  constructor() {\r\n    super();\r\n    afterRenderEffect(() => {\r\n      if (this.open()) {\r\n        this._togglingTriggeredByInput = true;\r\n        this.show();\r\n      } else {\r\n        this._togglingTriggeredByInput = true;\r\n        this.hide();\r\n      }\r\n    });\r\n\r\n    effect(() => {\r\n      const position = this.appliedPosition();\r\n\r\n      if (position === 'fullscreen') {\r\n        this.element.nativeElement.style.top = '0';\r\n        this.element.nativeElement.style.bottom = '0';\r\n        this.element.nativeElement.style.left = '0';\r\n        this.element.nativeElement.style.right = '0';\r\n        this.element.nativeElement.style.width = '100%';\r\n        this.element.nativeElement.style.height = '100%';\r\n        return;\r\n      }\r\n\r\n      this.element.nativeElement.style.top = position !== 'bottom' ? '0' : 'unset';\r\n      this.element.nativeElement.style.bottom = position !== 'top' ? '0' : 'unset';\r\n      this.element.nativeElement.style.left = position !== 'right' ? '0' : 'unset';\r\n      this.element.nativeElement.style.right = position !== 'left' ? '0' : 'unset';\r\n      if (position === 'left' || position === 'right') {\r\n        this.element.nativeElement.style.width = this.size();\r\n        this.element.nativeElement.style.height = '100%';\r\n      } else {\r\n        this.element.nativeElement.style.height = this.size();\r\n        this.element.nativeElement.style.width = '100%';\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Opens the drawer. Alternatively, you can also set the `open` input to `true`.\r\n   */\r\n  public show() {\r\n    untracked(() => {\r\n      if (this.open() && !this._togglingTriggeredByInput) {\r\n        return;\r\n      }\r\n      this._togglingTriggeredByInput = false;\r\n      this.element.nativeElement.togglePopover(true);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Closes the drawer. Alternatively, you can also set the `open` input to `false`.\r\n   */\r\n  public hide() {\r\n    untracked(() => {\r\n      if (!this.open() && !this._togglingTriggeredByInput) {\r\n        return;\r\n      }\r\n      this._togglingTriggeredByInput = false;\r\n      this.element.nativeElement.togglePopover(false);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Toggles the drawer open or closed. Alternatively, you can also set the `open` input accordingly.\r\n   */\r\n  public toggle() {\r\n    if (untracked(this.open)) {\r\n      this.hide();\r\n    } else {\r\n      this.show();\r\n    }\r\n  }\r\n\r\n  protected onToggle(event: Event) {\r\n    const evt = event as ToggleEvent;\r\n    if (evt.newState === 'closed') {\r\n      this.open.set(false);\r\n\r\n      requestAnimationFrame(() => {\r\n        const allAnimationsDone = Promise.all(\r\n          this.element.nativeElement.getAnimations().map(x => x.finished)\r\n        );\r\n        allAnimationsDone\r\n          .then(() => {\r\n            this.isFullyClosed.set(true);\r\n            this.closed.emit();\r\n          })\r\n          .catch(() => {\r\n            // ignore cancelled animation\r\n          });\r\n      });\r\n    } else {\r\n      this.open.set(true);\r\n      this.isFullyClosed.set(false);\r\n    }\r\n  }\r\n}\r\n","<header [ptInt]=\"this\" [ptClass]=\"'header'\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      headerTemplate();\r\n      context: { $implicit: { close: doClose, text: this.header() } }\r\n    \"\r\n  />\r\n</header>\r\n<ngn-defer\r\n  [lazyContent]=\"contentTemplate()\"\r\n  [open]=\"open() || !isFullyClosed()\"\r\n  [lazy]=\"lazy()\"\r\n  [cache]=\"cache()\"\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'content'\"\r\n>\r\n  <ng-content />\r\n</ngn-defer>\r\n@if (footerTemplate(); as footerTemplate) {\r\n  <footer [ptInt]=\"this\" [ptClass]=\"'footer'\">\r\n    <ng-container *ngTemplateOutlet=\"footerTemplate\" />\r\n  </footer>\r\n}\r\n\r\n<ng-template #defaultHeaderTemplate [ngnTemplate]=\"templateTypes.header\" let-header>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-header'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'default-header-text'\">{{ header.text }}</span>\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [attr.aria-label]=\"i18n['drawer_close']()\"\r\n      (click)=\"header.close()\"\r\n    >\r\n      <ngn-icon defaultIcon=\"xmark\" [icon]=\"iconClose()\" />\r\n    </button>\r\n  </div>\r\n</ng-template>\r\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,120 @@
+import * as i0 from '@angular/core';
+import { viewChild, contentChild, input, computed, Directive, inject, model, booleanAttribute, ChangeDetectionStrategy, 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', ...(ngDevMode ? [{ debugName: "_userDisplayTemplate" }] : []));
+    /**
+     * Set a custom template for the display.
+     * Can also be set using an `<ng-template>` element with `#display` template reference variable.
+     */
+    templateDisplay = input(null, ...(ngDevMode ? [{ debugName: "templateDisplay" }] : []));
+    displayTemplate = computed(() => this._userDisplayTemplate() ?? this.templateDisplay() ?? this._defaultDisplayTemplate(), ...(ngDevMode ? [{ debugName: "displayTemplate" }] : []));
+    // Edit template
+    _defaultEditTemplate = viewChild.required('defaultEditTemplate');
+    _userEditTemplate = contentChild('edit', ...(ngDevMode ? [{ debugName: "_userEditTemplate" }] : []));
+    /**
+     * 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, ...(ngDevMode ? [{ debugName: "templateEdit" }] : []));
+    editTemplate = computed(() => this._userEditTemplate() ?? this.templateEdit() ?? this._defaultEditTemplate(), ...(ngDevMode ? [{ debugName: "editTemplate" }] : []));
+    /**
+     * Types for the drawer templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EditInplaceTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", 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: "21.1.0", 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, ...(ngDevMode ? [{ debugName: "editVisible" }] : []));
+    /**
+     * Whether the content is loaded lazily.
+     * @default true
+     */
+    lazy = input(true, { ...(ngDevMode ? { debugName: "lazy" } : {}), transform: booleanAttribute });
+    /**
+     * Whether the content is cached when closed.
+     * @default false
+     */
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : {}), 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: "21.1.0", ngImport: i0, type: NgnEditInplace, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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\r\n  [templateDisplay]=\"displayTemplate()\"\r\n  [templateDisplayContext]=\"{ $implicit: { value: value() } }\"\r\n  [templateContent]=\"editTemplate()\"\r\n  [templateContentContext]=\"{\r\n    $implicit: {\r\n      value: value(),\r\n      update: value.set.bind(value),\r\n      close: editVisible.set.bind(editVisible, false),\r\n    },\r\n  }\"\r\n  [contentVisible]=\"editVisible()\"\r\n  (contentVisibleChange)=\"editVisible.set($event)\"\r\n  [lazy]=\"lazy()\"\r\n  [cache]=\"cache()\"\r\n  [disabled]=\"disabled() || readonly()\"\r\n  (contentVisibleChange)=\"!$event && touched.set(true)\"\r\n/>\r\n\r\n<ng-template #defaultDisplayTemplate [ngnTemplate]=\"templateTypes.display\" let-display>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-display'\">\r\n    @if (!display.value) {\r\n      <span [ptInt]=\"this\" [ptClass]=\"'default-fallback-display'\">{{\r\n        i18n['editInplace_placeholder']()\r\n      }}</span>\r\n    } @else {\r\n      <span>{{ display.value }}</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEditTemplate [ngnTemplate]=\"templateTypes.edit\" let-edit>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-edit'\">\r\n    <ngn-input-field\r\n      (focusout)=\"focusOut($event)\"\r\n      [label]=\"label()\"\r\n      [inputId]=\"inputId()\"\r\n      [invalid]=\"invalid()\"\r\n      [labelledBy]=\"labelledBy()\"\r\n    >\r\n      <input\r\n        type=\"text\"\r\n        ngnInput\r\n        ngnAutofocus\r\n        [value]=\"edit.value\"\r\n        (valueChange)=\"edit.update($event ?? '')\"\r\n        (keydown.enter)=\"edit.close()\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'default-edit-input'\"\r\n        (blur)=\"touched.set(true)\"\r\n      />\r\n      <button\r\n        ngnButton\r\n        type=\"button\"\r\n        kind=\"icon\"\r\n        [inline]=\"true\"\r\n        (click)=\"edit.close()\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'default-edit-close-button'\"\r\n      >\r\n        <ngn-icon defaultIcon=\"check\" />\r\n      </button>\r\n    </ngn-input-field>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { 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"] }, { kind: "directive", type: NgnAutofocus, selector: "[ngnAutofocus]", inputs: ["ngnAutofocus"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnEditInplace, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-edit-inplace', imports: [
+                        NgnPt,
+                        NgnInplace,
+                        NgnTemplate,
+                        NgnInput,
+                        NgnAutofocus,
+                        NgnButton,
+                        NgnIcon,
+                        NgnInputField,
+                    ], providers: [provideSelf(NgnEditInplace)], template: "<ngn-inplace\r\n  [templateDisplay]=\"displayTemplate()\"\r\n  [templateDisplayContext]=\"{ $implicit: { value: value() } }\"\r\n  [templateContent]=\"editTemplate()\"\r\n  [templateContentContext]=\"{\r\n    $implicit: {\r\n      value: value(),\r\n      update: value.set.bind(value),\r\n      close: editVisible.set.bind(editVisible, false),\r\n    },\r\n  }\"\r\n  [contentVisible]=\"editVisible()\"\r\n  (contentVisibleChange)=\"editVisible.set($event)\"\r\n  [lazy]=\"lazy()\"\r\n  [cache]=\"cache()\"\r\n  [disabled]=\"disabled() || readonly()\"\r\n  (contentVisibleChange)=\"!$event && touched.set(true)\"\r\n/>\r\n\r\n<ng-template #defaultDisplayTemplate [ngnTemplate]=\"templateTypes.display\" let-display>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-display'\">\r\n    @if (!display.value) {\r\n      <span [ptInt]=\"this\" [ptClass]=\"'default-fallback-display'\">{{\r\n        i18n['editInplace_placeholder']()\r\n      }}</span>\r\n    } @else {\r\n      <span>{{ display.value }}</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEditTemplate [ngnTemplate]=\"templateTypes.edit\" let-edit>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-edit'\">\r\n    <ngn-input-field\r\n      (focusout)=\"focusOut($event)\"\r\n      [label]=\"label()\"\r\n      [inputId]=\"inputId()\"\r\n      [invalid]=\"invalid()\"\r\n      [labelledBy]=\"labelledBy()\"\r\n    >\r\n      <input\r\n        type=\"text\"\r\n        ngnInput\r\n        ngnAutofocus\r\n        [value]=\"edit.value\"\r\n        (valueChange)=\"edit.update($event ?? '')\"\r\n        (keydown.enter)=\"edit.close()\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'default-edit-input'\"\r\n        (blur)=\"touched.set(true)\"\r\n      />\r\n      <button\r\n        ngnButton\r\n        type=\"button\"\r\n        kind=\"icon\"\r\n        [inline]=\"true\"\r\n        (click)=\"edit.close()\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'default-edit-close-button'\"\r\n      >\r\n        <ngn-icon defaultIcon=\"check\" />\r\n      </button>\r\n    </ngn-input-field>\r\n  </div>\r\n</ng-template>\r\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';\r\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\r\nimport { ValueControlBase } from '@ngneers/controls/base';\r\n\r\nimport type { DisplayTemplateType, EditTemplateType } from './types';\r\n\r\n@Directive()\r\nexport abstract class EditInplaceTemplates extends ValueControlBase<'editInplace', string> {\r\n  // Display template\r\n  private readonly _defaultDisplayTemplate =\r\n    viewChild.required<TemplateRef<typeof this.templateTypes.display>>('defaultDisplayTemplate');\r\n  private readonly _userDisplayTemplate =\r\n    contentChild<TemplateRef<typeof this.templateTypes.display>>('display');\r\n  /**\r\n   * Set a custom template for the display.\r\n   * Can also be set using an `<ng-template>` element with `#display` template reference variable.\r\n   */\r\n  public readonly templateDisplay = input<TemplateRef<typeof this.templateTypes.display> | null>(\r\n    null\r\n  );\r\n  protected readonly displayTemplate = computed(\r\n    () => this._userDisplayTemplate() ?? this.templateDisplay() ?? this._defaultDisplayTemplate()\r\n  );\r\n\r\n  // Edit template\r\n  private readonly _defaultEditTemplate =\r\n    viewChild.required<TemplateRef<typeof this.templateTypes.edit>>('defaultEditTemplate');\r\n  private readonly _userEditTemplate =\r\n    contentChild<TemplateRef<typeof this.templateTypes.edit>>('edit');\r\n  /**\r\n   * Set a custom template for the edit view.\r\n   * Can also be set using an `<ng-template>` element with `#edit` template reference variable.\r\n   */\r\n  public readonly templateEdit = input<TemplateRef<typeof this.templateTypes.edit> | null>(null);\r\n  protected readonly editTemplate = computed(\r\n    () => this._userEditTemplate() ?? this.templateEdit() ?? this._defaultEditTemplate()\r\n  );\r\n\r\n  /**\r\n   * Types for the drawer templates.\r\n   */\r\n  public readonly templateTypes = templateTypesFn<{\r\n    /**\r\n     * Type of the template variable for the display template.\r\n     */\r\n    display: DisplayTemplateType;\r\n    /**\r\n     * Type of the template variable for the edit template.\r\n     */\r\n    edit: EditTemplateType;\r\n  }>();\r\n}\r\n","import {\r\n  booleanAttribute,\r\n  Component,\r\n  input,\r\n  model,\r\n  ChangeDetectionStrategy,\r\n  inject,\r\n} from '@angular/core';\r\nimport { NgnTemplate } from '@ngneers/controls/api/ng';\r\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { NgnAutofocus } from '@ngneers/controls/directives';\r\nimport { I18n } from '@ngneers/controls/i18n';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnInplace } from '@ngneers/controls/inplace';\r\nimport { NgnInput } from '@ngneers/controls/input';\r\nimport { NgnInputField } from '@ngneers/controls/input-field';\r\nimport { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';\r\n\r\nimport { EditInplaceTemplates } from './edit-inplace-templates';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-edit-inplace',\r\n  templateUrl: './edit-inplace.html',\r\n  imports: [\r\n    NgnPt,\r\n    NgnInplace,\r\n    NgnTemplate,\r\n    NgnInput,\r\n    NgnAutofocus,\r\n    NgnButton,\r\n    NgnIcon,\r\n    NgnInputField,\r\n  ],\r\n  providers: [provideSelf(NgnEditInplace)],\r\n})\r\nexport class NgnEditInplace extends EditInplaceTemplates {\r\n  protected readonly theme = this.injectThemeTemplate(editInplaceControlTemplate, {\r\n    root: true,\r\n    invalid: this.invalid(),\r\n    readonly: this.readonly(),\r\n    disabled: this.disabled(),\r\n  });\r\n  protected readonly i18n = inject(I18n).translations;\r\n\r\n  protected readonly closeContent = this.switchToDisplay.bind(this);\r\n\r\n  /**\r\n   * Controls the visibility of the content.\r\n   */\r\n  public readonly editVisible = model<boolean>(false);\r\n  /**\r\n   * Whether the content is loaded lazily.\r\n   * @default true\r\n   */\r\n  public readonly lazy = input(true, { transform: booleanAttribute });\r\n  /**\r\n   * Whether the content is cached when closed.\r\n   * @default false\r\n   */\r\n  public readonly cache = input(false, { transform: booleanAttribute });\r\n\r\n  /**\r\n   * Switches to the edit view.\r\n   */\r\n  public switchToEdit() {\r\n    this.editVisible.set(true);\r\n  }\r\n\r\n  /**\r\n   * Switches to the display view.\r\n   */\r\n  public switchToDisplay() {\r\n    this.editVisible.set(false);\r\n  }\r\n\r\n  /**\r\n   * Toggles between the display and content views.\r\n   */\r\n  public toggle() {\r\n    this.editVisible.update(v => !v);\r\n  }\r\n\r\n  protected focusOut(event: FocusEvent) {\r\n    if (!this.editVisible()) {\r\n      return;\r\n    }\r\n    if (\r\n      event.relatedTarget instanceof HTMLElement &&\r\n      this.element.nativeElement.contains(event.relatedTarget as HTMLElement)\r\n    ) {\r\n      return;\r\n    }\r\n    this.switchToDisplay();\r\n  }\r\n}\r\n","<ngn-inplace\r\n  [templateDisplay]=\"displayTemplate()\"\r\n  [templateDisplayContext]=\"{ $implicit: { value: value() } }\"\r\n  [templateContent]=\"editTemplate()\"\r\n  [templateContentContext]=\"{\r\n    $implicit: {\r\n      value: value(),\r\n      update: value.set.bind(value),\r\n      close: editVisible.set.bind(editVisible, false),\r\n    },\r\n  }\"\r\n  [contentVisible]=\"editVisible()\"\r\n  (contentVisibleChange)=\"editVisible.set($event)\"\r\n  [lazy]=\"lazy()\"\r\n  [cache]=\"cache()\"\r\n  [disabled]=\"disabled() || readonly()\"\r\n  (contentVisibleChange)=\"!$event && touched.set(true)\"\r\n/>\r\n\r\n<ng-template #defaultDisplayTemplate [ngnTemplate]=\"templateTypes.display\" let-display>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-display'\">\r\n    @if (!display.value) {\r\n      <span [ptInt]=\"this\" [ptClass]=\"'default-fallback-display'\">{{\r\n        i18n['editInplace_placeholder']()\r\n      }}</span>\r\n    } @else {\r\n      <span>{{ display.value }}</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEditTemplate [ngnTemplate]=\"templateTypes.edit\" let-edit>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'default-edit'\">\r\n    <ngn-input-field\r\n      (focusout)=\"focusOut($event)\"\r\n      [label]=\"label()\"\r\n      [inputId]=\"inputId()\"\r\n      [invalid]=\"invalid()\"\r\n      [labelledBy]=\"labelledBy()\"\r\n    >\r\n      <input\r\n        type=\"text\"\r\n        ngnInput\r\n        ngnAutofocus\r\n        [value]=\"edit.value\"\r\n        (valueChange)=\"edit.update($event ?? '')\"\r\n        (keydown.enter)=\"edit.close()\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'default-edit-input'\"\r\n        (blur)=\"touched.set(true)\"\r\n      />\r\n      <button\r\n        ngnButton\r\n        type=\"button\"\r\n        kind=\"icon\"\r\n        [inline]=\"true\"\r\n        (click)=\"edit.close()\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'default-edit-close-button'\"\r\n      >\r\n        <ngn-icon defaultIcon=\"check\" />\r\n      </button>\r\n    </ngn-input-field>\r\n  </div>\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}