@wirekyt/angular 0.0.20 → 0.0.22

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

@@ -0,0 +1,245 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectLocale } from '@wirekyt/angular';
+import { formatBytes, formatNumber, formatRelativeTime, formatTime } from '@wirekyt/dom/i18n-utils';
+
+class FormatByte {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    unit = input("byte", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    unitDisplay = input("short", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitDisplay" }] : /* istanbul ignore next */ []));
+    unitSystem = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitSystem" }] : /* istanbul ignore next */ []));
+    precision = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
+    localeContext = injectLocale();
+    formatted = computed(() => {
+        return formatBytes(this.value(), this.locale() ?? this.localeContext.locale, compactOptions$2({
+            precision: this.precision(),
+            unit: this.unit(),
+            unitDisplay: this.unitDisplay(),
+            unitSystem: this.unitSystem(),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatByte, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: FormatByte, isStandalone: true, selector: "format-byte", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitDisplay: { classPropertyName: "unitDisplay", publicName: "unitDisplay", isSignal: true, isRequired: false, transformFunction: null }, unitSystem: { classPropertyName: "unitSystem", publicName: "unitSystem", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: ` {{ formatted() }} `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatByte, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "format-byte",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: "display: contents" },
+                    template: ` {{ formatted() }} `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], unitDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitDisplay", required: false }] }], unitSystem: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitSystem", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }] } });
+function compactOptions$2(options) {
+    return Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined));
+}
+
+class FormatNumber {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    options = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    localeMatcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localeMatcher" }] : /* istanbul ignore next */ []));
+    numberingSystem = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberingSystem" }] : /* istanbul ignore next */ []));
+    style = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    currency = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+    currencyDisplay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currencyDisplay" }] : /* istanbul ignore next */ []));
+    currencySign = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currencySign" }] : /* istanbul ignore next */ []));
+    unit = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    unitDisplay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitDisplay" }] : /* istanbul ignore next */ []));
+    notation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "notation" }] : /* istanbul ignore next */ []));
+    compactDisplay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compactDisplay" }] : /* istanbul ignore next */ []));
+    useGrouping = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "useGrouping" }] : /* istanbul ignore next */ []));
+    minimumIntegerDigits = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimumIntegerDigits" }] : /* istanbul ignore next */ []));
+    minimumFractionDigits = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimumFractionDigits" }] : /* istanbul ignore next */ []));
+    maximumFractionDigits = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximumFractionDigits" }] : /* istanbul ignore next */ []));
+    minimumSignificantDigits = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimumSignificantDigits" }] : /* istanbul ignore next */ []));
+    maximumSignificantDigits = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximumSignificantDigits" }] : /* istanbul ignore next */ []));
+    signDisplay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "signDisplay" }] : /* istanbul ignore next */ []));
+    roundingPriority = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roundingPriority" }] : /* istanbul ignore next */ []));
+    roundingIncrement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roundingIncrement" }] : /* istanbul ignore next */ []));
+    roundingMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roundingMode" }] : /* istanbul ignore next */ []));
+    trailingZeroDisplay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailingZeroDisplay" }] : /* istanbul ignore next */ []));
+    localeContext = injectLocale();
+    formatted = computed(() => {
+        return formatNumber(this.value(), this.locale() ?? this.localeContext.locale, this.intlOptions());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []));
+    intlOptions() {
+        return compactOptions$1({
+            ...this.options(),
+            ...compactOptions$1({
+                localeMatcher: this.localeMatcher(),
+                numberingSystem: this.numberingSystem(),
+                style: this.style(),
+                currency: this.currency(),
+                currencyDisplay: this.currencyDisplay(),
+                currencySign: this.currencySign(),
+                unit: this.unit(),
+                unitDisplay: this.unitDisplay(),
+                notation: this.notation(),
+                compactDisplay: this.compactDisplay(),
+                useGrouping: this.useGrouping(),
+                minimumIntegerDigits: this.minimumIntegerDigits(),
+                minimumFractionDigits: this.minimumFractionDigits(),
+                maximumFractionDigits: this.maximumFractionDigits(),
+                minimumSignificantDigits: this.minimumSignificantDigits(),
+                maximumSignificantDigits: this.maximumSignificantDigits(),
+                signDisplay: this.signDisplay(),
+                roundingPriority: this.roundingPriority(),
+                roundingIncrement: this.roundingIncrement(),
+                roundingMode: this.roundingMode(),
+                trailingZeroDisplay: this.trailingZeroDisplay(),
+            }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: FormatNumber, isStandalone: true, selector: "format-number", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, localeMatcher: { classPropertyName: "localeMatcher", publicName: "localeMatcher", isSignal: true, isRequired: false, transformFunction: null }, numberingSystem: { classPropertyName: "numberingSystem", publicName: "numberingSystem", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, currencySign: { classPropertyName: "currencySign", publicName: "currencySign", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitDisplay: { classPropertyName: "unitDisplay", publicName: "unitDisplay", isSignal: true, isRequired: false, transformFunction: null }, notation: { classPropertyName: "notation", publicName: "notation", isSignal: true, isRequired: false, transformFunction: null }, compactDisplay: { classPropertyName: "compactDisplay", publicName: "compactDisplay", isSignal: true, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: true, isRequired: false, transformFunction: null }, minimumIntegerDigits: { classPropertyName: "minimumIntegerDigits", publicName: "minimumIntegerDigits", isSignal: true, isRequired: false, transformFunction: null }, minimumFractionDigits: { classPropertyName: "minimumFractionDigits", publicName: "minimumFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maximumFractionDigits: { classPropertyName: "maximumFractionDigits", publicName: "maximumFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, minimumSignificantDigits: { classPropertyName: "minimumSignificantDigits", publicName: "minimumSignificantDigits", isSignal: true, isRequired: false, transformFunction: null }, maximumSignificantDigits: { classPropertyName: "maximumSignificantDigits", publicName: "maximumSignificantDigits", isSignal: true, isRequired: false, transformFunction: null }, signDisplay: { classPropertyName: "signDisplay", publicName: "signDisplay", isSignal: true, isRequired: false, transformFunction: null }, roundingPriority: { classPropertyName: "roundingPriority", publicName: "roundingPriority", isSignal: true, isRequired: false, transformFunction: null }, roundingIncrement: { classPropertyName: "roundingIncrement", publicName: "roundingIncrement", isSignal: true, isRequired: false, transformFunction: null }, roundingMode: { classPropertyName: "roundingMode", publicName: "roundingMode", isSignal: true, isRequired: false, transformFunction: null }, trailingZeroDisplay: { classPropertyName: "trailingZeroDisplay", publicName: "trailingZeroDisplay", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: ` {{ formatted() }} `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatNumber, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "format-number",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: "display: contents" },
+                    template: ` {{ formatted() }} `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], localeMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeMatcher", required: false }] }], numberingSystem: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberingSystem", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], currencySign: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySign", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], unitDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitDisplay", required: false }] }], notation: [{ type: i0.Input, args: [{ isSignal: true, alias: "notation", required: false }] }], compactDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minimumIntegerDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumIntegerDigits", required: false }] }], minimumFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumFractionDigits", required: false }] }], maximumFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumFractionDigits", required: false }] }], minimumSignificantDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumSignificantDigits", required: false }] }], maximumSignificantDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumSignificantDigits", required: false }] }], signDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "signDisplay", required: false }] }], roundingPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundingPriority", required: false }] }], roundingIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundingIncrement", required: false }] }], roundingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundingMode", required: false }] }], trailingZeroDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingZeroDisplay", required: false }] }] } });
+function compactOptions$1(options) {
+    return Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined));
+}
+
+class FormatRelativeTime {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    unit = input("day", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    options = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    localeMatcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localeMatcher" }] : /* istanbul ignore next */ []));
+    numeric = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numeric" }] : /* istanbul ignore next */ []));
+    style = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    localeContext = injectLocale();
+    formatted = computed(() => {
+        const locale = this.locale() ?? this.localeContext.locale;
+        const options = compactOptions({
+            ...this.options(),
+            ...compactOptions({
+                localeMatcher: this.localeMatcher(),
+                numeric: this.numeric(),
+                style: this.style(),
+            }),
+        });
+        const value = this.value();
+        if (value instanceof Date) {
+            return formatRelativeTime(value, locale, options);
+        }
+        return new Intl.RelativeTimeFormat(locale, options).format(value, this.unit());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatRelativeTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: FormatRelativeTime, isStandalone: true, selector: "format-relative-time", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, localeMatcher: { classPropertyName: "localeMatcher", publicName: "localeMatcher", isSignal: true, isRequired: false, transformFunction: null }, numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: ` {{ formatted() }} `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatRelativeTime, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "format-relative-time",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: "display: contents" },
+                    template: ` {{ formatted() }} `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], localeMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeMatcher", required: false }] }], numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
+function compactOptions(options) {
+    return Object.fromEntries(Object.entries(options).filter(([, value]) => value !== undefined));
+}
+
+class FormatTime {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    amLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "amLabel" }] : /* istanbul ignore next */ []));
+    pmLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pmLabel" }] : /* istanbul ignore next */ []));
+    withSeconds = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withSeconds" }] : /* istanbul ignore next */ []));
+    localeContext = injectLocale();
+    formatted = computed(() => {
+        return (formatTime(this.value(), this.locale() ?? this.localeContext.locale, {
+            format: this.format(),
+            amLabel: this.amLabel(),
+            pmLabel: this.pmLabel(),
+            withSeconds: this.withSeconds(),
+        }) ?? "");
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: FormatTime, isStandalone: true, selector: "format-time", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, amLabel: { classPropertyName: "amLabel", publicName: "amLabel", isSignal: true, isRequired: false, transformFunction: null }, pmLabel: { classPropertyName: "pmLabel", publicName: "pmLabel", isSignal: true, isRequired: false, transformFunction: null }, withSeconds: { classPropertyName: "withSeconds", publicName: "withSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: ` {{ formatted() }} `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FormatTime, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "format-time",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: "display: contents" },
+                    template: ` {{ formatted() }} `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], amLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "amLabel", required: false }] }], pmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pmLabel", required: false }] }], withSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSeconds", required: false }] }] } });
+
+var format = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Byte: FormatByte,
+    Number: FormatNumber,
+    RelativeTime: FormatRelativeTime,
+    Time: FormatTime
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { format as Format, FormatByte, FormatNumber, FormatRelativeTime, FormatTime };
+//# sourceMappingURL=wirekyt-angular-format.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wirekyt-angular-format.mjs","sources":["../../src/components/format/byte.ts","../../src/components/format/number.ts","../../src/components/format/relative-time.ts","../../src/components/format/time.ts","../../src/components/format/wirekyt-angular-format.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from \"@angular/core\";\nimport { injectLocale } from \"@wirekyt/angular\";\nimport { type FormatBytesOptions, formatBytes } from \"@wirekyt/dom/i18n-utils\";\n\nexport interface FormatByteProps extends FormatBytesOptions {\n  value: number;\n  locale?: string;\n}\n\n@Component({\n  selector: \"format-byte\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { style: \"display: contents\" },\n  template: ` {{ formatted() }} `,\n})\nexport class FormatByte {\n  readonly value = input.required<number>();\n  readonly locale = input<string | undefined>(undefined);\n  readonly unit = input<FormatBytesOptions[\"unit\"]>(\"byte\");\n  readonly unitDisplay = input<FormatBytesOptions[\"unitDisplay\"]>(\"short\");\n  readonly unitSystem = input<FormatBytesOptions[\"unitSystem\"] | undefined>(undefined);\n  readonly precision = input<number | undefined>(undefined);\n\n  private readonly localeContext = injectLocale();\n  protected readonly formatted = computed(() => {\n    return formatBytes(\n      this.value(),\n      this.locale() ?? this.localeContext.locale,\n      compactOptions({\n        precision: this.precision(),\n        unit: this.unit(),\n        unitDisplay: this.unitDisplay(),\n        unitSystem: this.unitSystem(),\n      }),\n    );\n  });\n}\n\nfunction compactOptions<T extends Record<string, unknown>>(options: T): T {\n  return Object.fromEntries(\n    Object.entries(options).filter(([, value]) => value !== undefined),\n  ) as T;\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from \"@angular/core\";\nimport { injectLocale } from \"@wirekyt/angular\";\nimport { formatNumber } from \"@wirekyt/dom/i18n-utils\";\n\nexport interface FormatNumberProps extends Intl.NumberFormatOptions {\n  value: number;\n  locale?: string;\n}\n\n@Component({\n  selector: \"format-number\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { style: \"display: contents\" },\n  template: ` {{ formatted() }} `,\n})\nexport class FormatNumber {\n  readonly value = input.required<number>();\n  readonly locale = input<string | undefined>(undefined);\n  readonly options = input<Intl.NumberFormatOptions | undefined>(undefined);\n  readonly localeMatcher = input<Intl.NumberFormatOptions[\"localeMatcher\"] | undefined>(undefined);\n  readonly numberingSystem = input<Intl.NumberFormatOptions[\"numberingSystem\"] | undefined>(\n    undefined,\n  );\n  readonly style = input<Intl.NumberFormatOptions[\"style\"] | undefined>(undefined);\n  readonly currency = input<string | undefined>(undefined);\n  readonly currencyDisplay = input<Intl.NumberFormatOptions[\"currencyDisplay\"] | undefined>(\n    undefined,\n  );\n  readonly currencySign = input<Intl.NumberFormatOptions[\"currencySign\"] | undefined>(undefined);\n  readonly unit = input<string | undefined>(undefined);\n  readonly unitDisplay = input<Intl.NumberFormatOptions[\"unitDisplay\"] | undefined>(undefined);\n  readonly notation = input<Intl.NumberFormatOptions[\"notation\"] | undefined>(undefined);\n  readonly compactDisplay = input<Intl.NumberFormatOptions[\"compactDisplay\"] | undefined>(\n    undefined,\n  );\n  readonly useGrouping = input<Intl.NumberFormatOptions[\"useGrouping\"] | undefined>(undefined);\n  readonly minimumIntegerDigits = input<number | undefined>(undefined);\n  readonly minimumFractionDigits = input<number | undefined>(undefined);\n  readonly maximumFractionDigits = input<number | undefined>(undefined);\n  readonly minimumSignificantDigits = input<number | undefined>(undefined);\n  readonly maximumSignificantDigits = input<number | undefined>(undefined);\n  readonly signDisplay = input<Intl.NumberFormatOptions[\"signDisplay\"] | undefined>(undefined);\n  readonly roundingPriority = input<Intl.NumberFormatOptions[\"roundingPriority\"] | undefined>(\n    undefined,\n  );\n  readonly roundingIncrement = input<Intl.NumberFormatOptions[\"roundingIncrement\"] | undefined>(\n    undefined,\n  );\n  readonly roundingMode = input<Intl.NumberFormatOptions[\"roundingMode\"] | undefined>(undefined);\n  readonly trailingZeroDisplay = input<Intl.NumberFormatOptions[\"trailingZeroDisplay\"] | undefined>(\n    undefined,\n  );\n\n  private readonly localeContext = injectLocale();\n  protected readonly formatted = computed(() => {\n    return formatNumber(\n      this.value(),\n      this.locale() ?? this.localeContext.locale,\n      this.intlOptions(),\n    );\n  });\n\n  private intlOptions(): Intl.NumberFormatOptions {\n    return compactOptions({\n      ...this.options(),\n      ...compactOptions({\n        localeMatcher: this.localeMatcher(),\n        numberingSystem: this.numberingSystem(),\n        style: this.style(),\n        currency: this.currency(),\n        currencyDisplay: this.currencyDisplay(),\n        currencySign: this.currencySign(),\n        unit: this.unit(),\n        unitDisplay: this.unitDisplay(),\n        notation: this.notation(),\n        compactDisplay: this.compactDisplay(),\n        useGrouping: this.useGrouping(),\n        minimumIntegerDigits: this.minimumIntegerDigits(),\n        minimumFractionDigits: this.minimumFractionDigits(),\n        maximumFractionDigits: this.maximumFractionDigits(),\n        minimumSignificantDigits: this.minimumSignificantDigits(),\n        maximumSignificantDigits: this.maximumSignificantDigits(),\n        signDisplay: this.signDisplay(),\n        roundingPriority: this.roundingPriority(),\n        roundingIncrement: this.roundingIncrement(),\n        roundingMode: this.roundingMode(),\n        trailingZeroDisplay: this.trailingZeroDisplay(),\n      }),\n    });\n  }\n}\n\nfunction compactOptions<T extends Record<string, unknown>>(options: T): T {\n  return Object.fromEntries(\n    Object.entries(options).filter(([, value]) => value !== undefined),\n  ) as T;\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from \"@angular/core\";\nimport { injectLocale } from \"@wirekyt/angular\";\nimport { formatRelativeTime } from \"@wirekyt/dom/i18n-utils\";\n\nexport interface FormatRelativeTimeProps extends Intl.RelativeTimeFormatOptions {\n  value: Date | number;\n  unit?: Intl.RelativeTimeFormatUnit;\n  locale?: string;\n}\n\n@Component({\n  selector: \"format-relative-time\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { style: \"display: contents\" },\n  template: ` {{ formatted() }} `,\n})\nexport class FormatRelativeTime {\n  readonly value = input.required<Date | number>();\n  readonly unit = input<Intl.RelativeTimeFormatUnit>(\"day\");\n  readonly locale = input<string | undefined>(undefined);\n  readonly options = input<Intl.RelativeTimeFormatOptions | undefined>(undefined);\n  readonly localeMatcher = input<Intl.RelativeTimeFormatOptions[\"localeMatcher\"] | undefined>(\n    undefined,\n  );\n  readonly numeric = input<Intl.RelativeTimeFormatOptions[\"numeric\"] | undefined>(undefined);\n  readonly style = input<Intl.RelativeTimeFormatOptions[\"style\"] | undefined>(undefined);\n\n  private readonly localeContext = injectLocale();\n  protected readonly formatted = computed(() => {\n    const locale = this.locale() ?? this.localeContext.locale;\n    const options = compactOptions({\n      ...this.options(),\n      ...compactOptions({\n        localeMatcher: this.localeMatcher(),\n        numeric: this.numeric(),\n        style: this.style(),\n      }),\n    });\n    const value = this.value();\n    if (value instanceof Date) {\n      return formatRelativeTime(value, locale, options);\n    }\n    return new Intl.RelativeTimeFormat(locale, options).format(value, this.unit());\n  });\n}\n\nfunction compactOptions<T extends Record<string, unknown>>(options: T): T {\n  return Object.fromEntries(\n    Object.entries(options).filter(([, value]) => value !== undefined),\n  ) as T;\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from \"@angular/core\";\nimport { injectLocale } from \"@wirekyt/angular\";\nimport { type FormatTimeOptions, formatTime } from \"@wirekyt/dom/i18n-utils\";\n\nexport interface FormatTimeProps extends FormatTimeOptions {\n  value: string | Date;\n  locale?: string;\n}\n\n@Component({\n  selector: \"format-time\",\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { style: \"display: contents\" },\n  template: ` {{ formatted() }} `,\n})\nexport class FormatTime {\n  readonly value = input.required<string | Date>();\n  readonly locale = input<string | undefined>(undefined);\n  readonly format = input<FormatTimeOptions[\"format\"] | undefined>(undefined);\n  readonly amLabel = input<string | undefined>(undefined);\n  readonly pmLabel = input<string | undefined>(undefined);\n  readonly withSeconds = input<boolean | undefined>(undefined);\n\n  private readonly localeContext = injectLocale();\n  protected readonly formatted = computed(() => {\n    return (\n      formatTime(this.value(), this.locale() ?? this.localeContext.locale, {\n        format: this.format(),\n        amLabel: this.amLabel(),\n        pmLabel: this.pmLabel(),\n        withSeconds: this.withSeconds(),\n      }) ?? \"\"\n    );\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["compactOptions"],"mappings":"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"}

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.20",
+  "version": "0.0.22",
   "description": "Angular adapter for Wirekyt",
   "files": [
     "dist",
@@ -95,6 +95,14 @@
       "types": "./types/wirekyt-angular-focus-trap.d.ts",
       "default": "./fesm2022/wirekyt-angular-focus-trap.mjs"
     },
+    "./format": {
+      "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-checkbox.d.ts

@@ -7,7 +7,7 @@ import * as i0 from '@angular/core';
 import { Signal, InputSignal, ModelSignal, InputSignalWithTransform, OutputEmitterRef, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-declare const checkboxAnatomy: _wirekyt_dom_anatomy.AnatomyInstance<"root" | "control" | "indicator" | "label" | "group">;
+declare const checkboxAnatomy: _wirekyt_dom_anatomy.AnatomyInstance<"root" | "indicator" | "label" | "control" | "group">;
 
 type OptionalId<T extends {
     id: string;

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<"root" | "control" | "trigger" | "label" | "area" | "positioner" | "content" | "valueText" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;
+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<"root" | "control" | "trigger" | "input" | "label" | "itemGroup" | "item" | "clearTrigger" | "positioner" | "content" | "list" | "itemText" | "itemIndicator" | "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<"root" | "control" | "trigger" | "input" | "label" | "nextTrigger" | "prevTrigger" | "table" | "view" | "clearTrigger" | "positioner" | "content" | "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-format.d.ts

@@ -0,0 +1,101 @@
+import * as _angular_core from '@angular/core';
+import * as _wirekyt_dom_i18n_utils from '@wirekyt/dom/i18n-utils';
+import { FormatBytesOptions, FormatTimeOptions } from '@wirekyt/dom/i18n-utils';
+
+interface FormatByteProps extends FormatBytesOptions {
+    value: number;
+    locale?: string;
+}
+declare class FormatByte {
+    readonly value: _angular_core.InputSignal<number>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly unit: _angular_core.InputSignal<"bit" | "byte" | undefined>;
+    readonly unitDisplay: _angular_core.InputSignal<"long" | "short" | "narrow" | undefined>;
+    readonly unitSystem: _angular_core.InputSignal<"binary" | "decimal" | undefined>;
+    readonly precision: _angular_core.InputSignal<number | undefined>;
+    private readonly localeContext;
+    protected readonly formatted: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormatByte, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormatByte, "format-byte", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "unitDisplay": { "alias": "unitDisplay"; "required": false; "isSignal": true; }; "unitSystem": { "alias": "unitSystem"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface FormatNumberProps extends Intl.NumberFormatOptions {
+    value: number;
+    locale?: string;
+}
+declare class FormatNumber {
+    readonly value: _angular_core.InputSignal<number>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly options: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    readonly localeMatcher: _angular_core.InputSignal<"lookup" | "best fit" | undefined>;
+    readonly numberingSystem: _angular_core.InputSignal<string | undefined>;
+    readonly style: _angular_core.InputSignal<keyof Intl.NumberFormatOptionsStyleRegistry | undefined>;
+    readonly currency: _angular_core.InputSignal<string | undefined>;
+    readonly currencyDisplay: _angular_core.InputSignal<keyof Intl.NumberFormatOptionsCurrencyDisplayRegistry | undefined>;
+    readonly currencySign: _angular_core.InputSignal<"standard" | "accounting" | undefined>;
+    readonly unit: _angular_core.InputSignal<string | undefined>;
+    readonly unitDisplay: _angular_core.InputSignal<"long" | "short" | "narrow" | undefined>;
+    readonly notation: _angular_core.InputSignal<"standard" | "scientific" | "engineering" | "compact" | undefined>;
+    readonly compactDisplay: _angular_core.InputSignal<"long" | "short" | undefined>;
+    readonly useGrouping: _angular_core.InputSignal<boolean | keyof Intl.NumberFormatOptionsUseGroupingRegistry | "true" | "false" | undefined>;
+    readonly minimumIntegerDigits: _angular_core.InputSignal<number | undefined>;
+    readonly minimumFractionDigits: _angular_core.InputSignal<number | undefined>;
+    readonly maximumFractionDigits: _angular_core.InputSignal<number | undefined>;
+    readonly minimumSignificantDigits: _angular_core.InputSignal<number | undefined>;
+    readonly maximumSignificantDigits: _angular_core.InputSignal<number | undefined>;
+    readonly signDisplay: _angular_core.InputSignal<keyof Intl.NumberFormatOptionsSignDisplayRegistry | undefined>;
+    readonly roundingPriority: _angular_core.InputSignal<"auto" | "morePrecision" | "lessPrecision" | undefined>;
+    readonly roundingIncrement: _angular_core.InputSignal<2 | 1 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000 | undefined>;
+    readonly roundingMode: _angular_core.InputSignal<"ceil" | "floor" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined>;
+    readonly trailingZeroDisplay: _angular_core.InputSignal<"auto" | "stripIfInteger" | undefined>;
+    private readonly localeContext;
+    protected readonly formatted: _angular_core.Signal<string>;
+    private intlOptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormatNumber, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormatNumber, "format-number", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "localeMatcher": { "alias": "localeMatcher"; "required": false; "isSignal": true; }; "numberingSystem": { "alias": "numberingSystem"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; "isSignal": true; }; "currencySign": { "alias": "currencySign"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "unitDisplay": { "alias": "unitDisplay"; "required": false; "isSignal": true; }; "notation": { "alias": "notation"; "required": false; "isSignal": true; }; "compactDisplay": { "alias": "compactDisplay"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minimumIntegerDigits": { "alias": "minimumIntegerDigits"; "required": false; "isSignal": true; }; "minimumFractionDigits": { "alias": "minimumFractionDigits"; "required": false; "isSignal": true; }; "maximumFractionDigits": { "alias": "maximumFractionDigits"; "required": false; "isSignal": true; }; "minimumSignificantDigits": { "alias": "minimumSignificantDigits"; "required": false; "isSignal": true; }; "maximumSignificantDigits": { "alias": "maximumSignificantDigits"; "required": false; "isSignal": true; }; "signDisplay": { "alias": "signDisplay"; "required": false; "isSignal": true; }; "roundingPriority": { "alias": "roundingPriority"; "required": false; "isSignal": true; }; "roundingIncrement": { "alias": "roundingIncrement"; "required": false; "isSignal": true; }; "roundingMode": { "alias": "roundingMode"; "required": false; "isSignal": true; }; "trailingZeroDisplay": { "alias": "trailingZeroDisplay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface FormatRelativeTimeProps extends Intl.RelativeTimeFormatOptions {
+    value: Date | number;
+    unit?: Intl.RelativeTimeFormatUnit;
+    locale?: string;
+}
+declare class FormatRelativeTime {
+    readonly value: _angular_core.InputSignal<number | Date>;
+    readonly unit: _angular_core.InputSignal<Intl.RelativeTimeFormatUnit>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly options: _angular_core.InputSignal<Intl.RelativeTimeFormatOptions | undefined>;
+    readonly localeMatcher: _angular_core.InputSignal<Intl.RelativeTimeFormatLocaleMatcher | undefined>;
+    readonly numeric: _angular_core.InputSignal<Intl.RelativeTimeFormatNumeric | undefined>;
+    readonly style: _angular_core.InputSignal<Intl.RelativeTimeFormatStyle | undefined>;
+    private readonly localeContext;
+    protected readonly formatted: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormatRelativeTime, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormatRelativeTime, "format-relative-time", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "localeMatcher": { "alias": "localeMatcher"; "required": false; "isSignal": true; }; "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface FormatTimeProps extends FormatTimeOptions {
+    value: string | Date;
+    locale?: string;
+}
+declare class FormatTime {
+    readonly value: _angular_core.InputSignal<string | Date>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly format: _angular_core.InputSignal<_wirekyt_dom_i18n_utils.TimeFormat | undefined>;
+    readonly amLabel: _angular_core.InputSignal<string | undefined>;
+    readonly pmLabel: _angular_core.InputSignal<string | undefined>;
+    readonly withSeconds: _angular_core.InputSignal<boolean | undefined>;
+    private readonly localeContext;
+    protected readonly formatted: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormatTime, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormatTime, "format-time", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "amLabel": { "alias": "amLabel"; "required": false; "isSignal": true; }; "pmLabel": { "alias": "pmLabel"; "required": false; "isSignal": true; }; "withSeconds": { "alias": "withSeconds"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare namespace format_d {
+  export { FormatByte as Byte, FormatNumber as Number, FormatRelativeTime as RelativeTime, FormatTime as Time };
+  export type { FormatByteProps as ByteProps, FormatNumberProps as NumberProps, FormatRelativeTimeProps as RelativeTimeProps, FormatTimeProps as TimeProps };
+}
+
+export { format_d as Format, FormatByte, FormatNumber, FormatRelativeTime, FormatTime };
+export type { FormatByteProps, FormatNumberProps, FormatRelativeTimeProps, FormatTimeProps };
+//# sourceMappingURL=wirekyt-angular-format.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wirekyt-angular-format.d.ts","sources":["../../src/components/format/byte.ts","../../src/components/format/number.ts","../../src/components/format/relative-time.ts","../../src/components/format/time.ts"],"mappings":";;;;AAIM,UAAW,eAAgB,SAAQ,kBAAkB;;;AAG1D;AAED,cAOa,UAAU;oBACP,aAAA,CAAA,WAAA;qBACC,aAAA,CAAA,WAAA;mBACF,aAAA,CAAA,WAAA;0BACO,aAAA,CAAA,WAAA;yBACD,aAAA,CAAA,WAAA;wBACD,aAAA,CAAA,WAAA;AAElB;AACA,kCAA4B,aAAA,CAAA,MAAA;oDATjB,UAAU;sDAAV,UAAU;AAqBtB;;ACjCK,UAAW,iBAAkB,SAAQ,IAAI,CAAC,mBAAmB;;;AAGlE;AAED,cAOa,YAAY;oBACT,aAAA,CAAA,WAAA;qBACC,aAAA,CAAA,WAAA;sBACC,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,mBAAA;4BACM,aAAA,CAAA,WAAA;8BACE,aAAA,CAAA,WAAA;oBAGV,aAAA,CAAA,WAAA,OAAA,IAAA,CAAA,gCAAA;uBACG,aAAA,CAAA,WAAA;8BACO,aAAA,CAAA,WAAA,OAAA,IAAA,CAAA,0CAAA;2BAGH,aAAA,CAAA,WAAA;mBACR,aAAA,CAAA,WAAA;0BACO,aAAA,CAAA,WAAA;uBACH,aAAA,CAAA,WAAA;6BACM,aAAA,CAAA,WAAA;0BAGH,aAAA,CAAA,WAAA,iBAAA,IAAA,CAAA,sCAAA;mCACS,aAAA,CAAA,WAAA;oCACC,aAAA,CAAA,WAAA;oCACA,aAAA,CAAA,WAAA;uCACG,aAAA,CAAA,WAAA;uCACA,aAAA,CAAA,WAAA;0BACb,aAAA,CAAA,WAAA,OAAA,IAAA,CAAA,sCAAA;+BACK,aAAA,CAAA,WAAA;gCAGC,aAAA,CAAA,WAAA;2BAGL,aAAA,CAAA,WAAA;kCACO,aAAA,CAAA,WAAA;AAI5B;AACA,kCAA4B,aAAA,CAAA,MAAA;AAQ5B;oDA/CW,YAAY;sDAAZ,YAAY;AA2ExB;;ACvFK,UAAW,uBAAwB,SAAQ,IAAI,CAAC,yBAAyB;AAC7E,WAAO,IAAI;AACX,WAAO,IAAI,CAAC,sBAAsB;;AAEnC;AAED,cAOa,kBAAkB;oBACf,aAAA,CAAA,WAAA,UAAA,IAAA;mBACD,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,sBAAA;qBACE,aAAA,CAAA,WAAA;sBACC,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,yBAAA;4BACM,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,+BAAA;sBAGN,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,yBAAA;oBACF,aAAA,CAAA,WAAA,CAAA,IAAA,CAAA,uBAAA;AAEd;AACA,kCAA4B,aAAA,CAAA,MAAA;oDAZjB,kBAAkB;sDAAlB,kBAAkB;AA4B9B;;ACzCK,UAAW,eAAgB,SAAQ,iBAAiB;AACxD,oBAAgB,IAAI;;AAErB;AAED,cAOa,UAAU;oBACP,aAAA,CAAA,WAAA,UAAA,IAAA;qBACC,aAAA,CAAA,WAAA;qBACA,aAAA,CAAA,WAAA,CAAA,uBAAA,CAAA,UAAA;sBACC,aAAA,CAAA,WAAA;sBACA,aAAA,CAAA,WAAA;0BACI,aAAA,CAAA,WAAA;AAEpB;AACA,kCAA4B,aAAA,CAAA,MAAA;oDATjB,UAAU;sDAAV,UAAU;AAmBtB;;;;;;;;;;;;;;;;","names":[]}

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.20",
+  "version": "0.0.22",
   "description": "Angular adapter for Wirekyt",
   "files": [
     "dist",
@@ -95,6 +95,14 @@
       "types": "./dist/types/wirekyt-angular-focus-trap.d.ts",
       "default": "./dist/fesm2022/wirekyt-angular-focus-trap.mjs"
     },
+    "./format": {
+      "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"
@@ -108,7 +116,7 @@
   "dependencies": {
     "@internationalized/date": "^3.12.3",
     "@internationalized/number": "^3.6.7",
-    "@wirekyt/dom": "0.0.20",
+    "@wirekyt/dom": "0.0.22",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {