@ngneers/controls 0.0.1-pre1 → 0.0.1-pre2

package/fesm2022/ngneers-controls-popover.mjs

@@ -1,24 +1,60 @@
 import * as i0 from '@angular/core';
-import { input, contentChild, computed, output, signal, inject, Injector, viewChild, Component } from '@angular/core';
-import { autoPositionElement } from '@ngneers/controls/api';
-import { LazyCacher } from '@ngneers/controls/lazy-cacher';
-import { computedWithPrevious } from '@ngneers/controls/utils';
+import { output, model, input, booleanAttribute, contentChild, viewChild, computed, signal, inject, Injector, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toPopoverCloseBy, autoPositionElement } from '@ngneers/controls/api/ng';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnDefer } from '@ngneers/controls/defer';
+import { computedWithPrevious, explicitAfterRenderEffect } from '@ngneers/controls/utils-ng';
+import { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';
 
-class Popover {
-    anchor = input.required();
-    options = input();
-    lazyContent = contentChild('lazy');
+/**
+ * @category control
+ */
+class NgnPopover extends NgnBase {
+    theme = this.injectThemeTemplate(popoverControlTemplate);
+    /**
+     * Emits when the popover has fully closed.
+     */
+    closed = output();
+    /**
+     * Emits when the popover is closed.
+     */
+    closing = output();
+    /**
+     * Shows or hides the popover.
+     *
+     * You probably want to react to openChange events from outside to update your variable accordingly.
+     */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /**
+     * The element to which the popover is anchored.
+     */
+    anchor = input.required(...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    /**
+     * The popover options.
+     */
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+    /**
+     * Set to true for scrollable/shrink-able content
+     */
+    hasShrinkableContent = input(false, { ...(ngDevMode ? { debugName: "hasShrinkableContent" } : {}), transform: booleanAttribute });
+    /**
+     * How the drawer closes depending on user interaction.
+     * @default 'any'
+     */
+    closeBy = input('any', ...(ngDevMode ? [{ debugName: "closeBy" }] : []));
+    lazyContent = contentChild('lazy', ...(ngDevMode ? [{ debugName: "lazyContent" }] : []));
+    _content = viewChild.required('content');
+    closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()), ...(ngDevMode ? [{ debugName: "closeByPopover" }] : []));
+    isFullyClosed = signal(true, ...(ngDevMode ? [{ debugName: "isFullyClosed" }] : []));
+    _skipEmitCloseEvent = false;
+    _triggeredByInput = false;
     appliedOptions = computed(() => ({
         cache: false,
         ...this.options(),
-    }));
-    opened = output();
-    closed = output();
-    _isOpen = signal(false);
-    isOpen = this._isOpen.asReadonly();
+    }), ...(ngDevMode ? [{ debugName: "appliedOptions" }] : []));
     _injector = inject(Injector);
-    _popoverRef = viewChild('popover');
-    _popover = computed(() => this._popoverRef()?.nativeElement);
+    _popoverRef = viewChild.required('popover');
+    _popover = computed(() => this._popoverRef().nativeElement, ...(ngDevMode ? [{ debugName: "_popover" }] : []));
     _autoPos = computedWithPrevious(prev => {
         prev?.stop();
         const popoverEl = this._popover();
@@ -29,52 +65,105 @@ class Popover {
             injector: this._injector,
             stopped: true,
             sizeConstraints: this.appliedOptions()?.sizeConstraints,
+            placement: this.appliedOptions()?.placement,
+            offset: this.appliedOptions()?.padding,
+            hasShrinkableContent: this.hasShrinkableContent(),
         });
     });
-    open() {
-        if (this.isOpen()) {
-            return;
-        }
-        this._autoPos()?.start();
-        this._popover()?.togglePopover();
+    constructor() {
+        super();
+        explicitAfterRenderEffect([this.open], ([open]) => {
+            if (!open) {
+                this._triggeredByInput = true;
+                this.hide();
+            }
+            if (open) {
+                this._triggeredByInput = true;
+                this.show();
+            }
+        });
     }
+    /**
+     * Opens the drawer. Alternatively, you can also set the `open` input to `true`.
+     */
+    show() {
+        untracked(() => {
+            if (this.open() && !this._triggeredByInput) {
+                return;
+            }
+            this._triggeredByInput = false;
+            this._autoPos()?.start();
+            this._popover().togglePopover(true);
+        });
+    }
+    /**
+     * Closes the drawer. Alternatively, you can also set the `open` input to `false`.
+     */
+    hide(emitCloseEvent = true) {
+        untracked(() => {
+            if (!this.open() && !this._triggeredByInput) {
+                return;
+            }
+            this._triggeredByInput = false;
+            this._skipEmitCloseEvent = !emitCloseEvent;
+            this._autoPos()?.stop();
+            this._popover().togglePopover(false);
+        });
+    }
+    /**
+     * Toggles the drawer open or closed. Alternatively, you can also set the `open` input accordingly.
+     */
     toggle() {
-        if (this.isOpen()) {
-            this.close();
+        if (untracked(this.open)) {
+            this.hide();
         }
         else {
-            this.open();
-        }
-    }
-    close() {
-        if (!this.isOpen()) {
-            return;
+            this.show();
         }
-        this._popover()?.togglePopover();
     }
     onToggle(event) {
         const evt = event;
         if (evt.newState === 'closed') {
-            this._isOpen.set(false);
-            this.closed.emit();
+            this.open.set(false);
+            if (this._skipEmitCloseEvent) {
+                this._skipEmitCloseEvent = false;
+            }
+            else {
+                this.closing.emit();
+            }
             this._autoPos()?.stop();
+            requestAnimationFrame(() => {
+                const allAnimationsDone = Promise.all(this._content()
+                    .nativeElement.getAnimations()
+                    .map(x => x.finished));
+                allAnimationsDone
+                    .then(() => {
+                    this.isFullyClosed.set(true);
+                    this.closed.emit();
+                })
+                    .catch(() => {
+                    // ignore cancelled animation
+                });
+            });
         }
         else {
-            this._isOpen.set(true);
-            this.opened.emit();
+            this.open.set(true);
+            this.isFullyClosed.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: Popover, isStandalone: true, selector: "ngn-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: ["lazy"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div popover (toggle)=\"onToggle($event)\" #popover id=\"dropdown\">\r\n  <ngn-lazy-cacher [lazyContent]=\"lazyContent()\" [open]=\"isOpen()\" [cache]=\"appliedOptions().cache\">\r\n    <ng-content></ng-content>\r\n  </ngn-lazy-cacher>\r\n</div>\r\n", dependencies: [{ kind: "component", type: LazyCacher, selector: "ngn-lazy-cacher", inputs: ["lazyContent", "open", "cache"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: NgnPopover, isStandalone: true, selector: "ngn-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hasShrinkableContent: { classPropertyName: "hasShrinkableContent", publicName: "hasShrinkableContent", isSignal: true, isRequired: false, transformFunction: null }, closeBy: { classPropertyName: "closeBy", publicName: "closeBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", closing: "closing", open: "openChange" }, host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [provideSelf(NgnPopover)], queries: [{ propertyName: "lazyContent", first: true, predicate: ["lazy"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'root'\"\r\n  #popover\r\n  [attr.popover]=\"closeByPopover()\"\r\n  (toggle)=\"onToggle($event)\"\r\n  [style.min-height]=\"\r\n    hasShrinkableContent()\r\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\r\n      : 'fit-content'\r\n  \"\r\n>\r\n  <div\r\n    #content\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      content: true,\r\n      'content-closing': !this.open() && !this.isFullyClosed(),\r\n    }\"\r\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"lazyContent()\"\r\n      [open]=\"open() || !isFullyClosed()\"\r\n      [cache]=\"appliedOptions().cache\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </ngn-defer>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Popover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'ngn-popover', imports: [LazyCacher], template: "<div popover (toggle)=\"onToggle($event)\" #popover id=\"dropdown\">\r\n  <ngn-lazy-cacher [lazyContent]=\"lazyContent()\" [open]=\"isOpen()\" [cache]=\"appliedOptions().cache\">\r\n    <ng-content></ng-content>\r\n  </ngn-lazy-cacher>\r\n</div>\r\n" }]
-        }] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-popover', imports: [NgnPt, NgnDefer], providers: [provideSelf(NgnPopover)], host: {
+                        '(click)': '$event.stopPropagation()',
+                    }, template: "<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'root'\"\r\n  #popover\r\n  [attr.popover]=\"closeByPopover()\"\r\n  (toggle)=\"onToggle($event)\"\r\n  [style.min-height]=\"\r\n    hasShrinkableContent()\r\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\r\n      : 'fit-content'\r\n  \"\r\n>\r\n  <div\r\n    #content\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      content: true,\r\n      'content-closing': !this.open() && !this.isFullyClosed(),\r\n    }\"\r\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"lazyContent()\"\r\n      [open]=\"open() || !isFullyClosed()\"\r\n      [cache]=\"appliedOptions().cache\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </ngn-defer>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { closed: [{ type: i0.Output, args: ["closed"] }], closing: [{ type: i0.Output, args: ["closing"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hasShrinkableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShrinkableContent", required: false }] }], closeBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeBy", required: false }] }], lazyContent: [{ type: i0.ContentChild, args: ['lazy', { isSignal: true }] }], _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], _popoverRef: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Popover };
+export { NgnPopover };
 //# sourceMappingURL=ngneers-controls-popover.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-popover.mjs","sources":["../../../packages/controls/src/popover/popover.ts","../../../packages/controls/src/popover/popover.html","../../../packages/controls/src/popover/ngneers-controls-popover.ts"],"sourcesContent":["import {\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  ElementRef,\r\n  inject,\r\n  Injector,\r\n  input,\r\n  output,\r\n  signal,\r\n  TemplateRef,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport {\r\n  autoPositionElement,\r\n  AutoPositioningHandle,\r\n  PositioningSizeConstraints,\r\n} from '@ngneers/controls/api';\r\nimport { LazyCacher } from '@ngneers/controls/lazy-cacher';\r\nimport { computedWithPrevious } from '@ngneers/controls/utils';\r\n\r\nexport type PopoverOptions = {\r\n  /**\r\n   * Constraints for the size of the popover.\r\n   */\r\n  sizeConstraints?: PositioningSizeConstraints;\r\n  /**\r\n   * If true, the content of the popover will be cached and not recreated on each open.\r\n   * This is useful for performance when the content is expensive to create.\r\n   */\r\n  cache?: boolean;\r\n};\r\n@Component({\r\n  selector: 'ngn-popover',\r\n  templateUrl: './popover.html',\r\n  imports: [LazyCacher],\r\n})\r\nexport class Popover {\r\n  public readonly anchor = input.required<HTMLElement>();\r\n  public readonly options = input<PopoverOptions>();\r\n\r\n  protected readonly lazyContent = contentChild<TemplateRef<unknown>>('lazy');\r\n\r\n  protected readonly appliedOptions = computed(() => ({\r\n    cache: false,\r\n    ...this.options(),\r\n  }));\r\n\r\n  public readonly opened = output();\r\n  public readonly closed = output();\r\n\r\n  private readonly _isOpen = signal(false);\r\n  public readonly isOpen = this._isOpen.asReadonly();\r\n\r\n  private readonly _injector = inject(Injector);\r\n  private readonly _popoverRef = viewChild<ElementRef<HTMLElement>>('popover');\r\n  private readonly _popover = computed(() => this._popoverRef()?.nativeElement);\r\n  private readonly _autoPos = computedWithPrevious<AutoPositioningHandle | undefined>(prev => {\r\n    prev?.stop();\r\n    const popoverEl = this._popover();\r\n    if (!popoverEl) {\r\n      return undefined;\r\n    }\r\n    return autoPositionElement(this.anchor(), popoverEl, {\r\n      injector: this._injector,\r\n      stopped: true,\r\n      sizeConstraints: this.appliedOptions()?.sizeConstraints,\r\n    });\r\n  });\r\n\r\n  public open() {\r\n    if (this.isOpen()) {\r\n      return;\r\n    }\r\n    this._autoPos()?.start();\r\n    this._popover()?.togglePopover();\r\n  }\r\n\r\n  public toggle() {\r\n    if (this.isOpen()) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  }\r\n\r\n  public close() {\r\n    if (!this.isOpen()) {\r\n      return;\r\n    }\r\n    this._popover()?.togglePopover();\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._isOpen.set(false);\r\n      this.closed.emit();\r\n      this._autoPos()?.stop();\r\n    } else {\r\n      this._isOpen.set(true);\r\n      this.opened.emit();\r\n    }\r\n  }\r\n}\r\n","<div popover (toggle)=\"onToggle($event)\" #popover id=\"dropdown\">\r\n  <ngn-lazy-cacher [lazyContent]=\"lazyContent()\" [open]=\"isOpen()\" [cache]=\"appliedOptions().cache\">\r\n    <ng-content></ng-content>\r\n  </ngn-lazy-cacher>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngneers-controls-popover.mjs","sources":["../../src/popover/popover.ts","../../src/popover/popover.html","../../src/popover/ngneers-controls-popover.ts"],"sourcesContent":["import {\r\n  booleanAttribute,\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  ElementRef,\r\n  inject,\r\n  Injector,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  TemplateRef,\r\n  untracked,\r\n  viewChild,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport {\r\n  type PopoverCloseBy,\r\n  toPopoverCloseBy,\r\n  autoPositionElement,\r\n  type AutoPositioningHandle,\r\n  type Openable,\r\n  type Anchor,\r\n} from '@ngneers/controls/api/ng';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnDefer } from '@ngneers/controls/defer';\r\nimport { computedWithPrevious, explicitAfterRenderEffect } from '@ngneers/controls/utils-ng';\r\nimport { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';\r\n\r\nimport type { PopoverOptions } from './types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-popover',\r\n  templateUrl: './popover.html',\r\n  imports: [NgnPt, NgnDefer],\r\n  providers: [provideSelf(NgnPopover)],\r\n  host: {\r\n    '(click)': '$event.stopPropagation()',\r\n  },\r\n})\r\nexport class NgnPopover extends NgnBase<'popover'> implements Openable {\r\n  protected readonly theme = this.injectThemeTemplate(popoverControlTemplate);\r\n\r\n  /**\r\n   * Emits when the popover has fully closed.\r\n   */\r\n  public readonly closed = output();\r\n  /**\r\n   * Emits when the popover is closed.\r\n   */\r\n  public readonly closing = output();\r\n  /**\r\n   * Shows or hides the popover.\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   * The element to which the popover is anchored.\r\n   */\r\n  public readonly anchor = input.required<Anchor>();\r\n  /**\r\n   * The popover options.\r\n   */\r\n  public readonly options = input<PopoverOptions>();\r\n  /**\r\n   * Set to true for scrollable/shrink-able content\r\n   */\r\n  public readonly hasShrinkableContent = input(false, { transform: booleanAttribute });\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  protected readonly lazyContent = contentChild<TemplateRef<unknown>>('lazy');\r\n  protected readonly _content = viewChild.required<ElementRef<HTMLElement>>('content');\r\n  protected readonly closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()));\r\n  protected readonly isFullyClosed = signal(true);\r\n\r\n  private _skipEmitCloseEvent = false;\r\n  private _triggeredByInput = false;\r\n\r\n  protected readonly appliedOptions = computed(() => ({\r\n    cache: false,\r\n    ...this.options(),\r\n  }));\r\n\r\n  private readonly _injector = inject(Injector);\r\n  private readonly _popoverRef = viewChild.required<ElementRef<HTMLElement>>('popover');\r\n  private readonly _popover = computed(() => this._popoverRef().nativeElement);\r\n  private readonly _autoPos = computedWithPrevious<AutoPositioningHandle | undefined>(prev => {\r\n    prev?.stop();\r\n    const popoverEl = this._popover();\r\n    if (!popoverEl) {\r\n      return undefined;\r\n    }\r\n    return autoPositionElement(this.anchor(), popoverEl, {\r\n      injector: this._injector,\r\n      stopped: true,\r\n      sizeConstraints: this.appliedOptions()?.sizeConstraints,\r\n      placement: this.appliedOptions()?.placement,\r\n      offset: this.appliedOptions()?.padding,\r\n      hasShrinkableContent: this.hasShrinkableContent(),\r\n    });\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    explicitAfterRenderEffect([this.open], ([open]) => {\r\n      if (!open) {\r\n        this._triggeredByInput = true;\r\n        this.hide();\r\n      }\r\n      if (open) {\r\n        this._triggeredByInput = true;\r\n        this.show();\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._triggeredByInput) {\r\n        return;\r\n      }\r\n      this._triggeredByInput = false;\r\n      this._autoPos()?.start();\r\n      this._popover().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(emitCloseEvent = true) {\r\n    untracked(() => {\r\n      if (!this.open() && !this._triggeredByInput) {\r\n        return;\r\n      }\r\n      this._triggeredByInput = false;\r\n      this._skipEmitCloseEvent = !emitCloseEvent;\r\n      this._autoPos()?.stop();\r\n      this._popover().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      if (this._skipEmitCloseEvent) {\r\n        this._skipEmitCloseEvent = false;\r\n      } else {\r\n        this.closing.emit();\r\n      }\r\n      this._autoPos()?.stop();\r\n\r\n      requestAnimationFrame(() => {\r\n        const allAnimationsDone = Promise.all(\r\n          this._content()\r\n            .nativeElement.getAnimations()\r\n            .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","<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'root'\"\r\n  #popover\r\n  [attr.popover]=\"closeByPopover()\"\r\n  (toggle)=\"onToggle($event)\"\r\n  [style.min-height]=\"\r\n    hasShrinkableContent()\r\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\r\n      : 'fit-content'\r\n  \"\r\n>\r\n  <div\r\n    #content\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      content: true,\r\n      'content-closing': !this.open() && !this.isFullyClosed(),\r\n    }\"\r\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"lazyContent()\"\r\n      [open]=\"open() || !isFullyClosed()\"\r\n      [cache]=\"appliedOptions().cache\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </ngn-defer>\r\n  </div>\r\n</div>\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-progress.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { progressControlTemplate } from '@ngneers/controls-themes/templates/progress';
+
+const TAU = Math.PI * 2;
+/**
+ * @category control
+ */
+class NgnProgress extends NgnBase {
+    theme = this.injectThemeTemplate(progressControlTemplate, {
+        root: true,
+        indeterminate: () => this.indeterminate(),
+        circular: () => this.circular(),
+    });
+    /**
+     * The current progress value (0-100).
+     */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Whether the progress indicator is indeterminate.
+     */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : {}), transform: booleanAttribute });
+    /**
+     * Whether the progress indicator is circular.
+     */
+    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : {}), transform: booleanAttribute });
+    /**
+     * Radius of the circular progress indicator (in px).
+     */
+    radius = input(40, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    /**
+     * Thickness of the circular progress indicator stroke (in px).
+     */
+    thickness = input(8, ...(ngDevMode ? [{ debugName: "thickness" }] : []));
+    safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100), ...(ngDevMode ? [{ debugName: "safeValue" }] : []));
+    safeRadius = computed(() => Math.max(this.radius(), 0), ...(ngDevMode ? [{ debugName: "safeRadius" }] : []));
+    safeThickness = computed(() => Math.max(this.thickness(), 1), ...(ngDevMode ? [{ debugName: "safeThickness" }] : []));
+    svgSize = computed(() => {
+        // Full size of the SVG in px.
+        return this.safeRadius() * 2 + this.safeThickness();
+    }, ...(ngDevMode ? [{ debugName: "svgSize" }] : []));
+    svgCenter = computed(() => this.svgSize() / 2, ...(ngDevMode ? [{ debugName: "svgCenter" }] : []));
+    circumference = computed(() => TAU * this.safeRadius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    strokeDasharray = computed(() => {
+        const circumference = this.circumference();
+        // Arc length for indeterminate mode.
+        if (this.indeterminate()) {
+            return `${circumference * 0.28} ${circumference}`;
+        }
+        return `${circumference}`;
+    }, ...(ngDevMode ? [{ debugName: "strokeDasharray" }] : []));
+    strokeDashoffset = computed(() => {
+        const circumference = this.circumference();
+        if (this.indeterminate()) {
+            return `${circumference * 0.72}`;
+        }
+        return `${circumference * (1 - this.safeValue() / 100)}`;
+    }, ...(ngDevMode ? [{ debugName: "strokeDashoffset" }] : []));
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnProgress, isStandalone: true, selector: "ngn-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "indeterminate() ? null : safeValue()", "style.--progress.%": "indeterminate() ? null : safeValue()" } }, providers: [provideSelf(NgnProgress)], usesInheritance: true, ngImport: i0, template: "@if (circular()) {\r\n  <svg\r\n    [attr.width]=\"svgSize()\"\r\n    [attr.height]=\"svgSize()\"\r\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'svg'\"\r\n  >\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'track'\"\r\n    />\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\r\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'fill'\"\r\n    />\r\n  </svg>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\r\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\r\n    @if (indeterminate()) {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnProgress, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-progress', imports: [NgnPt], providers: [provideSelf(NgnProgress)], host: {
+                        role: 'progressbar',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : safeValue()',
+                        '[style.--progress.%]': 'indeterminate() ? null : safeValue()',
+                    }, template: "@if (circular()) {\r\n  <svg\r\n    [attr.width]=\"svgSize()\"\r\n    [attr.height]=\"svgSize()\"\r\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'svg'\"\r\n  >\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'track'\"\r\n    />\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\r\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'fill'\"\r\n    />\r\n  </svg>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\r\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\r\n    @if (indeterminate()) {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\r\n    }\r\n  </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnProgress };
+//# sourceMappingURL=ngneers-controls-progress.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-progress.mjs","sources":["../../src/progress/progress.ts","../../src/progress/progress.html","../../src/progress/ngneers-controls-progress.ts"],"sourcesContent":["import {\r\n  Component,\r\n  input,\r\n  ChangeDetectionStrategy,\r\n  computed,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { progressControlTemplate } from '@ngneers/controls-themes/templates/progress';\r\n\r\nconst TAU = Math.PI * 2;\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-progress',\r\n  templateUrl: './progress.html',\r\n  imports: [NgnPt],\r\n  providers: [provideSelf(NgnProgress)],\r\n  host: {\r\n    role: 'progressbar',\r\n    '[attr.aria-valuemin]': '0',\r\n    '[attr.aria-valuemax]': '100',\r\n    '[attr.aria-valuenow]': 'indeterminate() ? null : safeValue()',\r\n    '[style.--progress.%]': 'indeterminate() ? null : safeValue()',\r\n  },\r\n})\r\nexport class NgnProgress extends NgnBase<'progress'> {\r\n  protected readonly theme = this.injectThemeTemplate(progressControlTemplate, {\r\n    root: true,\r\n    indeterminate: () => this.indeterminate(),\r\n    circular: () => this.circular(),\r\n  });\r\n\r\n  /**\r\n   * The current progress value (0-100).\r\n   */\r\n  public readonly value = input<number>(0);\r\n  /**\r\n   * Whether the progress indicator is indeterminate.\r\n   */\r\n  public readonly indeterminate = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Whether the progress indicator is circular.\r\n   */\r\n  public readonly circular = input(false, { transform: booleanAttribute });\r\n\r\n  /**\r\n   * Radius of the circular progress indicator (in px).\r\n   */\r\n  public readonly radius = input<number>(40);\r\n\r\n  /**\r\n   * Thickness of the circular progress indicator stroke (in px).\r\n   */\r\n  public readonly thickness = input<number>(8);\r\n\r\n  protected readonly safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100));\r\n\r\n  protected readonly safeRadius = computed(() => Math.max(this.radius(), 0));\r\n  protected readonly safeThickness = computed(() => Math.max(this.thickness(), 1));\r\n\r\n  protected readonly svgSize = computed(() => {\r\n    // Full size of the SVG in px.\r\n    return this.safeRadius() * 2 + this.safeThickness();\r\n  });\r\n\r\n  protected readonly svgCenter = computed(() => this.svgSize() / 2);\r\n\r\n  protected readonly circumference = computed(() => TAU * this.safeRadius());\r\n\r\n  protected readonly strokeDasharray = computed(() => {\r\n    const circumference = this.circumference();\r\n    // Arc length for indeterminate mode.\r\n    if (this.indeterminate()) {\r\n      return `${circumference * 0.28} ${circumference}`;\r\n    }\r\n    return `${circumference}`;\r\n  });\r\n\r\n  protected readonly strokeDashoffset = computed(() => {\r\n    const circumference = this.circumference();\r\n    if (this.indeterminate()) {\r\n      return `${circumference * 0.72}`;\r\n    }\r\n    return `${circumference * (1 - this.safeValue() / 100)}`;\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n}\r\n","@if (circular()) {\r\n  <svg\r\n    [attr.width]=\"svgSize()\"\r\n    [attr.height]=\"svgSize()\"\r\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'svg'\"\r\n  >\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'track'\"\r\n    />\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\r\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'fill'\"\r\n    />\r\n  </svg>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\r\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\r\n    @if (indeterminate()) {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\r\n    }\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAUA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC;AAEvB;;AAEG;AAeG,MAAO,WAAY,SAAQ,OAAmB,CAAA;AAC/B,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE;AAC3E,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,aAAa,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE;AACzC,QAAA,QAAQ,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE;AAChC,KAAA,CAAC;AAEF;;AAEG;AACa,IAAA,KAAK,GAAG,KAAK,CAAS,CAAC,iDAAC;AACxC;;AAEG;IACa,aAAa,GAAG,KAAK,CAAC,KAAK,0DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC7E;;AAEG;IACa,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExE;;AAEG;AACa,IAAA,MAAM,GAAG,KAAK,CAAS,EAAE,kDAAC;AAE1C;;AAEG;AACa,IAAA,SAAS,GAAG,KAAK,CAAS,CAAC,qDAAC;IAEzB,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAEpE,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,sDAAC;AACvD,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,yDAAC;AAE7D,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;;QAEzC,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE;AACrD,IAAA,CAAC,mDAAC;AAEiB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,qDAAC;AAE9C,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,yDAAC;AAEvD,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;AACjD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;;AAE1C,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,OAAO,GAAG,aAAa,GAAG,IAAI,CAAA,CAAA,EAAI,aAAa,EAAE;QACnD;QACA,OAAO,CAAA,EAAG,aAAa,CAAA,CAAE;AAC3B,IAAA,CAAC,2DAAC;AAEiB,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AAClD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAC1C,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,OAAO,CAAA,EAAG,aAAa,GAAG,IAAI,EAAE;QAClC;AACA,QAAA,OAAO,CAAA,EAAG,aAAa,IAAI,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,CAAC,EAAE;AAC1D,IAAA,CAAC,4DAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;IACT;uGA/DW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,aAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,oBAAA,EAAA,sCAAA,EAAA,oBAAA,EAAA,sCAAA,EAAA,EAAA,EAAA,SAAA,EATX,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBvC,onCAqCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlBY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAUJ,WAAW,EAAA,UAAA,EAAA,CAAA;kBAdvB,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,cAAc,EAAA,OAAA,EAEf,CAAC,KAAK,CAAC,EAAA,SAAA,EACL,CAAC,WAAW,CAAA,WAAA,CAAa,CAAC,EAAA,IAAA,EAC/B;AACJ,wBAAA,IAAI,EAAE,aAAa;AACnB,wBAAA,sBAAsB,EAAE,GAAG;AAC3B,wBAAA,sBAAsB,EAAE,KAAK;AAC7B,wBAAA,sBAAsB,EAAE,sCAAsC;AAC9D,wBAAA,sBAAsB,EAAE,sCAAsC;AAC/D,qBAAA,EAAA,QAAA,EAAA,onCAAA,EAAA;;;AE3BH;;AAEG;;;;"}