@wirekyt/angular 0.0.21 → 0.0.22

package/dist/fesm2022/wirekyt-angular-frame.mjs

@@ -0,0 +1,196 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, inject, ViewContainerRef, Injector, signal, computed, afterNextRender, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ENVIRONMENT_TOKEN } from '@wirekyt/angular';
+
+const resetStyle = "<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>";
+const initialFrameSrcdoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
+let frameId = 0;
+const createDefaultTitle = () => {
+    const randomId = globalThis.crypto?.randomUUID?.();
+    return `frame:${randomId ?? ++frameId}`;
+};
+class Frame {
+    srcdoc = input(initialFrameSrcdoc, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "srcdoc" }] : /* istanbul ignore next */ []));
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    head = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "head" }] : /* istanbul ignore next */ []));
+    mount = output();
+    unmount = output();
+    frameElement = viewChild.required("frame", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameElement" }] : /* istanbul ignore next */ []));
+    contentTpl = viewChild.required("content", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
+    vcRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    defaultTitle = createDefaultTitle();
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    frameDocument = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameDocument" }] : /* istanbul ignore next */ []));
+    frameRevision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameRevision" }] : /* istanbul ignore next */ []));
+    contentView;
+    headView;
+    resizeCleanup;
+    mounted = false;
+    environment = {
+        getRootNode: () => this.frameDocument(),
+    };
+    resolvedTitle = computed(() => this.title() ?? this.defaultTitle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.ready.set(true);
+        });
+        effect(() => {
+            const srcdoc = this.srcdoc() ?? initialFrameSrcdoc;
+            if (!this.ready())
+                return;
+            this.mountFrame(srcdoc);
+        });
+        effect(() => {
+            const head = this.head();
+            const doc = this.frameDocument();
+            this.frameRevision();
+            if (!this.ready() || !doc)
+                return;
+            this.mountHead(head, doc);
+        });
+    }
+    ngOnDestroy() {
+        this.destroyViews();
+        this.resizeCleanup?.();
+        if (this.mounted) {
+            this.mounted = false;
+            this.unmount.emit();
+        }
+    }
+    mountFrame(srcdoc) {
+        const frame = this.frameElement().nativeElement;
+        const doc = frame.contentDocument ?? frame.contentWindow?.document;
+        if (!doc)
+            return;
+        this.resizeCleanup?.();
+        this.resizeCleanup = undefined;
+        if (this.mounted) {
+            this.mounted = false;
+            this.unmount.emit();
+        }
+        this.destroyViews();
+        doc.open();
+        doc.write(srcdoc);
+        doc.close();
+        this.frameDocument.set(doc);
+        this.frameRevision.update((revision) => revision + 1);
+        const mountNode = doc.body.querySelector(".frame-root") ?? doc.body;
+        const frameInjector = this.createFrameInjector(doc);
+        this.contentView = this.vcRef.createEmbeddedView(this.contentTpl(), undefined, {
+            injector: frameInjector,
+        });
+        this.contentView.detectChanges();
+        for (const node of this.contentView.rootNodes) {
+            mountNode.appendChild(node);
+        }
+        this.observeSize(frame, mountNode, doc);
+        this.mounted = true;
+        this.mount.emit();
+    }
+    mountHead(head, doc) {
+        this.destroyView(this.headView);
+        this.headView = undefined;
+        if (!head)
+            return;
+        this.headView = this.vcRef.createEmbeddedView(head, undefined, {
+            injector: this.createFrameInjector(doc),
+        });
+        this.headView.detectChanges();
+        for (const node of this.headView.rootNodes) {
+            doc.head.appendChild(node);
+        }
+    }
+    destroyViews() {
+        for (const view of [this.contentView, this.headView]) {
+            this.destroyView(view);
+        }
+        this.contentView = undefined;
+        this.headView = undefined;
+    }
+    destroyView(view) {
+        if (!view)
+            return;
+        for (const node of view.rootNodes) {
+            node.parentNode?.removeChild(node);
+        }
+        view.destroy();
+    }
+    createFrameInjector(doc) {
+        return Injector.create({
+            providers: [
+                {
+                    provide: ENVIRONMENT_TOKEN,
+                    useValue: { getRootNode: () => doc },
+                },
+            ],
+            parent: this.injector,
+        });
+    }
+    observeSize(frame, mountNode, doc) {
+        this.resizeCleanup?.();
+        const win = doc.defaultView;
+        if (!win?.ResizeObserver)
+            return;
+        const updateSize = () => {
+            win.requestAnimationFrame(() => {
+                if (!frame.contentDocument?.documentElement)
+                    return;
+                frame.style.setProperty("--width", `${mountNode.scrollWidth}px`);
+                frame.style.setProperty("--height", `${mountNode.scrollHeight}px`);
+            });
+        };
+        const observer = new win.ResizeObserver(updateSize);
+        observer.observe(mountNode);
+        updateSize();
+        this.resizeCleanup = () => observer.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: Frame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: Frame, isStandalone: true, selector: "frame", inputs: { srcdoc: { classPropertyName: "srcdoc", publicName: "srcdoc", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, head: { classPropertyName: "head", publicName: "head", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mount: "mount", unmount: "unmount" }, host: { styleAttribute: "display: block;" }, providers: [
+            {
+                provide: ENVIRONMENT_TOKEN,
+                useFactory: (frame) => frame.environment,
+                deps: [forwardRef(() => Frame)],
+            },
+        ], viewQueries: [{ propertyName: "frameElement", first: true, predicate: ["frame"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <iframe #frame [attr.title]="resolvedTitle()" [attr.name]="name()"></iframe>
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true, styles: ["iframe{border:0;display:block;height:100%;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: Frame, decorators: [{
+            type: Component,
+            args: [{ selector: "frame", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        style: "display: block;",
+                    }, providers: [
+                        {
+                            provide: ENVIRONMENT_TOKEN,
+                            useFactory: (frame) => frame.environment,
+                            deps: [forwardRef(() => Frame)],
+                        },
+                    ], template: `
+    <iframe #frame [attr.title]="resolvedTitle()" [attr.name]="name()"></iframe>
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `, styles: ["iframe{border:0;display:block;height:100%;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { srcdoc: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcdoc", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], head: [{ type: i0.Input, args: [{ isSignal: true, alias: "head", required: false }] }], mount: [{ type: i0.Output, args: ["mount"] }], unmount: [{ type: i0.Output, args: ["unmount"] }], frameElement: [{ type: i0.ViewChild, args: ["frame", { isSignal: true }] }], contentTpl: [{ type: i0.ViewChild, args: ["content", { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Frame };
+//# sourceMappingURL=wirekyt-angular-frame.mjs.map

package/dist/fesm2022/wirekyt-angular-frame.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wirekyt-angular-frame.mjs","sources":["../../src/components/frame/frame.ts","../../src/components/frame/wirekyt-angular-frame.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Injector,\n  type ElementRef,\n  type EmbeddedViewRef,\n  type OnDestroy,\n  type TemplateRef,\n  ViewContainerRef,\n  afterNextRender,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from \"@angular/core\";\nimport { ENVIRONMENT_TOKEN, type EnvironmentContext } from \"@wirekyt/angular\";\n\nexport interface FrameBaseProps {\n  head?: TemplateRef<unknown> | null;\n  onMount?: (() => void) | undefined;\n  onUnmount?: (() => void) | undefined;\n}\n\nexport interface FrameProps extends FrameBaseProps {\n  srcdoc?: string;\n  title?: string;\n  name?: string;\n}\n\nconst resetStyle =\n  \"<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>\";\nconst initialFrameSrcdoc = `<html><head>${resetStyle}</head><body><div class=\"frame-root\"></div></body></html>`;\nlet frameId = 0;\n\nconst createDefaultTitle = (): string => {\n  const randomId = globalThis.crypto?.randomUUID?.();\n  return `frame:${randomId ?? ++frameId}`;\n};\n\n@Component({\n  selector: \"frame\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    style: \"display: block;\",\n  },\n  providers: [\n    {\n      provide: ENVIRONMENT_TOKEN,\n      useFactory: (frame: Frame) => frame.environment,\n      deps: [forwardRef(() => Frame)],\n    },\n  ],\n  template: `\n    <iframe #frame [attr.title]=\"resolvedTitle()\" [attr.name]=\"name()\"></iframe>\n    <ng-template #content>\n      <ng-content></ng-content>\n    </ng-template>\n  `,\n  styles: [\n    `\n      iframe {\n        border: 0;\n        display: block;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n  ],\n})\nexport class Frame implements OnDestroy {\n  readonly srcdoc = input<string | undefined>(initialFrameSrcdoc);\n  readonly title = input<string | undefined>(undefined);\n  readonly name = input<string | undefined>(undefined);\n  readonly head = input<TemplateRef<unknown> | null>(null);\n  readonly mount = output<void>();\n  readonly unmount = output<void>();\n  readonly frameElement = viewChild.required<ElementRef<HTMLIFrameElement>>(\"frame\");\n\n  private readonly contentTpl = viewChild.required<TemplateRef<unknown>>(\"content\");\n  private readonly vcRef = inject(ViewContainerRef);\n  private readonly injector = inject(Injector);\n  private readonly defaultTitle = createDefaultTitle();\n  private readonly ready = signal(false);\n  private readonly frameDocument = signal<Document | undefined>(undefined);\n  private readonly frameRevision = signal(0);\n  private contentView: EmbeddedViewRef<unknown> | undefined;\n  private headView: EmbeddedViewRef<unknown> | undefined;\n  private resizeCleanup: (() => void) | undefined;\n  private mounted = false;\n\n  readonly environment: EnvironmentContext = {\n    getRootNode: () => this.frameDocument(),\n  };\n\n  protected readonly resolvedTitle = computed(() => this.title() ?? this.defaultTitle);\n\n  constructor() {\n    afterNextRender(() => {\n      this.ready.set(true);\n    });\n\n    effect(() => {\n      const srcdoc = this.srcdoc() ?? initialFrameSrcdoc;\n      if (!this.ready()) return;\n      this.mountFrame(srcdoc);\n    });\n\n    effect(() => {\n      const head = this.head();\n      const doc = this.frameDocument();\n      this.frameRevision();\n      if (!this.ready() || !doc) return;\n      this.mountHead(head, doc);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.destroyViews();\n    this.resizeCleanup?.();\n    if (this.mounted) {\n      this.mounted = false;\n      this.unmount.emit();\n    }\n  }\n\n  private mountFrame(srcdoc: string): void {\n    const frame = this.frameElement().nativeElement;\n    const doc = frame.contentDocument ?? frame.contentWindow?.document;\n    if (!doc) return;\n\n    this.resizeCleanup?.();\n    this.resizeCleanup = undefined;\n    if (this.mounted) {\n      this.mounted = false;\n      this.unmount.emit();\n    }\n    this.destroyViews();\n\n    doc.open();\n    doc.write(srcdoc);\n    doc.close();\n    this.frameDocument.set(doc);\n    this.frameRevision.update((revision) => revision + 1);\n\n    const mountNode = doc.body.querySelector<HTMLElement>(\".frame-root\") ?? doc.body;\n    const frameInjector = this.createFrameInjector(doc);\n\n    this.contentView = this.vcRef.createEmbeddedView(this.contentTpl(), undefined, {\n      injector: frameInjector,\n    });\n    this.contentView.detectChanges();\n    for (const node of this.contentView.rootNodes as Node[]) {\n      mountNode.appendChild(node);\n    }\n\n    this.observeSize(frame, mountNode, doc);\n    this.mounted = true;\n    this.mount.emit();\n  }\n\n  private mountHead(head: TemplateRef<unknown> | null, doc: Document): void {\n    this.destroyView(this.headView);\n    this.headView = undefined;\n    if (!head) return;\n\n    this.headView = this.vcRef.createEmbeddedView(head, undefined, {\n      injector: this.createFrameInjector(doc),\n    });\n    this.headView.detectChanges();\n    for (const node of this.headView.rootNodes as Node[]) {\n      doc.head.appendChild(node);\n    }\n  }\n\n  private destroyViews(): void {\n    for (const view of [this.contentView, this.headView]) {\n      this.destroyView(view);\n    }\n    this.contentView = undefined;\n    this.headView = undefined;\n  }\n\n  private destroyView(view: EmbeddedViewRef<unknown> | undefined): void {\n    if (!view) return;\n    for (const node of view.rootNodes as Node[]) {\n      node.parentNode?.removeChild(node);\n    }\n    view.destroy();\n  }\n\n  private createFrameInjector(doc: Document): Injector {\n    return Injector.create({\n      providers: [\n        {\n          provide: ENVIRONMENT_TOKEN,\n          useValue: { getRootNode: () => doc } satisfies EnvironmentContext,\n        },\n      ],\n      parent: this.injector,\n    });\n  }\n\n  private observeSize(frame: HTMLIFrameElement, mountNode: HTMLElement, doc: Document): void {\n    this.resizeCleanup?.();\n    const win = doc.defaultView as (Window & typeof globalThis) | null;\n    if (!win?.ResizeObserver) return;\n\n    const updateSize = () => {\n      win.requestAnimationFrame(() => {\n        if (!frame.contentDocument?.documentElement) return;\n        frame.style.setProperty(\"--width\", `${mountNode.scrollWidth}px`);\n        frame.style.setProperty(\"--height\", `${mountNode.scrollHeight}px`);\n      });\n    };\n    const observer = new win.ResizeObserver(updateSize);\n    observer.observe(mountNode);\n    updateSize();\n    this.resizeCleanup = () => observer.disconnect();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirekyt/angular",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Angular adapter for Wirekyt",
   "files": [
     "dist",
@@ -99,6 +99,10 @@
       "types": "./types/wirekyt-angular-format.d.ts",
       "default": "./fesm2022/wirekyt-angular-format.mjs"
     },
+    "./frame": {
+      "types": "./types/wirekyt-angular-frame.d.ts",
+      "default": "./fesm2022/wirekyt-angular-frame.mjs"
+    },
     "./presence": {
       "types": "./types/wirekyt-angular-presence.d.ts",
       "default": "./fesm2022/wirekyt-angular-presence.mjs"

package/dist/types/wirekyt-angular-color-picker.d.ts

@@ -9,7 +9,7 @@ import { PresenceBase } from '@wirekyt/angular/presence';
 import { ControlValueAccessor } from '@angular/forms';
 import { ColorStringFormat } from '@wirekyt/dom/color-utils';
 
-declare const colorPickerAnatomy: _wirekyt_dom_anatomy.Anatomy<"trigger" | "content" | "positioner" | "root" | "area" | "label" | "control" | "valueText" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const colorPickerAnatomy: _wirekyt_dom_anatomy.Anatomy<"root" | "label" | "control" | "content" | "area" | "trigger" | "positioner" | "valueText" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
 declare class ColorPickerArea {
     readonly xChannel: InputSignal<colorPicker.ColorChannel | undefined>;

package/dist/types/wirekyt-angular-combobox.d.ts

@@ -13,7 +13,7 @@ import { PresenceBase } from '@wirekyt/angular/presence';
 import { ControlValueAccessor } from '@angular/forms';
 import * as _wirekyt_angular_combobox from '@wirekyt/angular/combobox';
 
-declare const comboboxAnatomy: _wirekyt_dom_anatomy.AnatomyInstance<"trigger" | "content" | "positioner" | "input" | "root" | "item" | "label" | "control" | "clearTrigger" | "list" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "empty">;
+declare const comboboxAnatomy: _wirekyt_dom_anatomy.AnatomyInstance<"root" | "list" | "item" | "label" | "control" | "content" | "input" | "trigger" | "positioner" | "clearTrigger" | "itemIndicator" | "itemGroup" | "itemText" | "itemGroupLabel" | "empty">;
 
 type ComboboxSchema<T extends CollectionItem = CollectionItem> = Machine<T> extends Machine$1<infer S> ? S : never;
 

package/dist/types/wirekyt-angular-date-picker.d.ts

@@ -9,7 +9,7 @@ import * as _wirekyt_angular_presence from '@wirekyt/angular/presence';
 import { PresenceBase } from '@wirekyt/angular/presence';
 import { ControlValueAccessor } from '@angular/forms';
 
-declare const datePickerAnatomy: _wirekyt_dom_anatomy.AnatomyInstance<"trigger" | "content" | "positioner" | "input" | "root" | "label" | "table" | "view" | "control" | "clearTrigger" | "nextTrigger" | "prevTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "valueText">;
+declare const datePickerAnatomy: _wirekyt_dom_anatomy.AnatomyInstance<"root" | "label" | "control" | "content" | "input" | "table" | "view" | "trigger" | "positioner" | "clearTrigger" | "prevTrigger" | "nextTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "valueText">;
 
 type OptionalId<T extends {
     id?: string | undefined;

package/dist/types/wirekyt-angular-frame.d.ts

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, TemplateRef, ElementRef } from '@angular/core';
+import { EnvironmentContext } from '@wirekyt/angular';
+
+interface FrameBaseProps {
+    head?: TemplateRef<unknown> | null;
+    onMount?: (() => void) | undefined;
+    onUnmount?: (() => void) | undefined;
+}
+interface FrameProps extends FrameBaseProps {
+    srcdoc?: string;
+    title?: string;
+    name?: string;
+}
+declare class Frame implements OnDestroy {
+    readonly srcdoc: _angular_core.InputSignal<string | undefined>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly head: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly mount: _angular_core.OutputEmitterRef<void>;
+    readonly unmount: _angular_core.OutputEmitterRef<void>;
+    readonly frameElement: _angular_core.Signal<ElementRef<HTMLIFrameElement>>;
+    private readonly contentTpl;
+    private readonly vcRef;
+    private readonly injector;
+    private readonly defaultTitle;
+    private readonly ready;
+    private readonly frameDocument;
+    private readonly frameRevision;
+    private contentView;
+    private headView;
+    private resizeCleanup;
+    private mounted;
+    readonly environment: EnvironmentContext;
+    protected readonly resolvedTitle: _angular_core.Signal<string>;
+    constructor();
+    ngOnDestroy(): void;
+    private mountFrame;
+    private mountHead;
+    private destroyViews;
+    private destroyView;
+    private createFrameInjector;
+    private observeSize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Frame, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Frame, "frame", never, { "srcdoc": { "alias": "srcdoc"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "head": { "alias": "head"; "required": false; "isSignal": true; }; }, { "mount": "mount"; "unmount": "unmount"; }, never, ["*"], true, never>;
+}
+
+export { Frame };
+export type { FrameBaseProps, FrameProps };
+//# sourceMappingURL=wirekyt-angular-frame.d.ts.map

package/dist/types/wirekyt-angular-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wirekyt-angular-frame.d.ts","sources":["../../src/components/frame/frame.ts"],"mappings":";;;;UAqBiB,cAAc;WACtB,WAAW;;;AAGnB;AAEK,UAAW,UAAW,SAAQ,cAAc;;;;AAIjD;AAYD,cA+Ba,KAAM,YAAW,SAAS;qBACtB,aAAA,CAAA,WAAA;oBACD,aAAA,CAAA,WAAA;mBACD,aAAA,CAAA,WAAA;mBACA,aAAA,CAAA,WAAA,CAAA,WAAA;oBACC,aAAA,CAAA,gBAAA;sBACE,aAAA,CAAA,gBAAA;2BACK,aAAA,CAAA,MAAA,CAAA,UAAA,CAAA,iBAAA;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAMA,0BAAsB,kBAAkB;AAIxC,sCAAgC,aAAA,CAAA,MAAA;;AAsBhC;AASA;AAmCA;AAcA;AAQA;AAQA;AAYA;oDArIW,KAAK;sDAAL,KAAK;AAsJjB;;;;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirekyt/angular",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Angular adapter for Wirekyt",
   "files": [
     "dist",
@@ -99,6 +99,10 @@
       "types": "./dist/types/wirekyt-angular-format.d.ts",
       "default": "./dist/fesm2022/wirekyt-angular-format.mjs"
     },
+    "./frame": {
+      "types": "./dist/types/wirekyt-angular-frame.d.ts",
+      "default": "./dist/fesm2022/wirekyt-angular-frame.mjs"
+    },
     "./presence": {
       "types": "./dist/types/wirekyt-angular-presence.d.ts",
       "default": "./dist/fesm2022/wirekyt-angular-presence.mjs"
@@ -112,7 +116,7 @@
   "dependencies": {
     "@internationalized/date": "^3.12.3",
     "@internationalized/number": "^3.6.7",
-    "@wirekyt/dom": "0.0.21",
+    "@wirekyt/dom": "0.0.22",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {