@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-expansion-panel.mjs

@@ -0,0 +1,245 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, contentChildren, TemplateRef, computed, contentChild, input, model, Component } from '@angular/core';
+import { LucideMinus, LucidePlus } from '@lucide/angular';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class ExpansionPanelActionsTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelActionsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ExpansionPanelActionsTemplateDirective, isStandalone: true, selector: "ng-template[monaExpansionPanelActionsTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelActionsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaExpansionPanelActionsTemplate]"
+                }]
+        }] });
+
+class ExpansionPanelIconTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelIconTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ExpansionPanelIconTemplateDirective, isStandalone: true, selector: "ng-template[monaExpansionPanelIconTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaExpansionPanelIconTemplate]"
+                }]
+        }] });
+
+class ExpansionPanelTitleTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ExpansionPanelTitleTemplateDirective, isStandalone: true, selector: "ng-template[monaExpansionPanelTitleTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelTitleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaExpansionPanelTitleTemplate]"
+                }]
+        }] });
+
+const expansionPanelBaseVariants = cva(`
+        block w-full bg-background overflow-hidden
+        border border-border
+        not-last:border-b-transparent not-last:rounded-b-none
+        not-first:rounded-t-none relative
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        }
+    }
+});
+const expansionPanelHeaderVariants = cva(`
+        w-full flex items-center justify-between
+        px-2 py-1
+        bg-background-dark
+        cursor-pointer
+        font-medium
+        text-foreground
+        select-none
+        transition-border-b duration-200
+        focus-visible:outline-primary/40 focus-visible:border-b-transparent
+        focus-visible:ring-1 focus-visible:ring-primary/40
+        focus-visible:z-10 focus-visible:relative
+    `, {
+    variants: {
+        collapsed: {
+            true: "border-b-transparent",
+            false: "border-0 border-b border-border border-solid"
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            false: ""
+        }
+    }
+});
+const expansionPanelHeaderTitleVariants = cva(`
+        p-1 flex-1
+    `);
+const expansionPanelIconContainerVariants = cva(``, {
+    variants: {
+        hasTemplate: {
+            true: "",
+            false: "px-2"
+        }
+    }
+});
+const expansionPanelContentVariants = cva(`
+        text-foreground
+        grid
+        transition-[grid-template-rows] duration-300 ease-out
+        [&>div]:overflow-hidden
+    `, {
+    variants: {
+        expanded: {
+            true: "grid-rows-[1fr]",
+            false: "grid-rows-[0fr]"
+        }
+    }
+});
+
+const expansionPanelBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return expansionPanelBaseVariants;
+        default:
+            return expansionPanelBaseVariants;
+    }
+};
+const expansionPanelHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return expansionPanelHeaderVariants;
+        default:
+            return expansionPanelHeaderVariants;
+    }
+};
+const expansionPanelHeaderTitleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return expansionPanelHeaderTitleVariants;
+        default:
+            return expansionPanelHeaderTitleVariants;
+    }
+};
+const expansionPanelIconContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return expansionPanelIconContainerVariants;
+        default:
+            return expansionPanelIconContainerVariants;
+    }
+};
+const expansionPanelContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return expansionPanelContentVariants;
+        default:
+            return expansionPanelContentVariants;
+    }
+};
+
+class ExpansionPanelComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.actionsTemplateList = contentChildren(ExpansionPanelActionsTemplateDirective, { ...(ngDevMode ? { debugName: "actionsTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const variantClass = expansionPanelBaseThemeVariants(theme)({ rounded });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.contentClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const expanded = this.expanded();
+            return expansionPanelContentThemeVariants(theme)({ expanded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        this.contentId = createElementControlId();
+        this.headerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const collapsed = !this.expanded();
+            const disabled = this.disabled();
+            return expansionPanelHeaderThemeVariants(theme)({ collapsed, disabled });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.headerTitleClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return expansionPanelHeaderTitleThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : /* istanbul ignore next */ []));
+        this.iconContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const hasTemplate = !!this.iconTemplate();
+            return expansionPanelIconContainerThemeVariants(theme)({ hasTemplate });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
+        this.iconTemplate = contentChild(ExpansionPanelIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.titleTemplate = contentChild(ExpansionPanelTitleTemplateDirective, { ...(ngDevMode ? { debugName: "titleTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Disables header interaction, suppressing click and keyboard toggling.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the expansion panel is expanded or collapsed.
+         * @default false
+         */
+        this.expanded = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the expansion panel.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the title of the expansion panel.
+         * @default ""
+         */
+        this.title = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "userClass" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.expanded.update(expanded => !expanded);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ExpansionPanelComponent, isStandalone: true, selector: "mona-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "userClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "actionsTemplateList", predicate: ExpansionPanelActionsTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ExpansionPanelIconTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div\r\n    [class]=\"headerClass()\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\r\n    (click)=\"toggle()\"\r\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\r\n    <div [class]=\"headerTitleClass()\">\r\n        @if (titleTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\r\n        } @else {\r\n            {{ title() }}\r\n        }\r\n    </div>\r\n    <div>\r\n        @for (action of actionsTemplateList(); track $index) {\r\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\r\n        }\r\n    </div>\r\n    <div [class]=\"iconContainerClass()\">\r\n        @if (iconTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\r\n        } @else {\r\n            @if (expanded()) {\r\n                <svg lucideMinus [size]=\"14\"></svg>\r\n            } @else {\r\n                <svg lucidePlus [size]=\"14\"></svg>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n<div\r\n    [id]=\"contentId\"\r\n    [class]=\"contentClass()\"\r\n    [attr.aria-hidden]=\"!expanded()\"\r\n    [attr.inert]=\"!expanded() ? true : undefined\">\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-expansion-panel", imports: [NgTemplateOutlet, LucideMinus, LucidePlus], host: {
+                        "[class]": "baseClass()"
+                    }, template: "<div\r\n    [class]=\"headerClass()\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\r\n    (click)=\"toggle()\"\r\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\r\n    <div [class]=\"headerTitleClass()\">\r\n        @if (titleTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\r\n        } @else {\r\n            {{ title() }}\r\n        }\r\n    </div>\r\n    <div>\r\n        @for (action of actionsTemplateList(); track $index) {\r\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\r\n        }\r\n    </div>\r\n    <div [class]=\"iconContainerClass()\">\r\n        @if (iconTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\r\n        } @else {\r\n            @if (expanded()) {\r\n                <svg lucideMinus [size]=\"14\"></svg>\r\n            } @else {\r\n                <svg lucidePlus [size]=\"14\"></svg>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n<div\r\n    [id]=\"contentId\"\r\n    [class]=\"contentClass()\"\r\n    [attr.aria-hidden]=\"!expanded()\"\r\n    [attr.inert]=\"!expanded() ? true : undefined\">\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n" }]
+        }], propDecorators: { actionsTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ExpansionPanelActionsTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExpansionPanelIconTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExpansionPanelTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userClass", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/expansion-panel
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ExpansionPanelActionsTemplateDirective, ExpansionPanelComponent, ExpansionPanelIconTemplateDirective, ExpansionPanelTitleTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-expansion-panel.mjs.map

package/fesm2022/nanahoshi-mona-ui-fieldset.mjs

@@ -0,0 +1,170 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, computed, contentChild, TemplateRef, input, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class FieldsetLegendTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetLegendTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: FieldsetLegendTemplateDirective, isStandalone: true, selector: "ng-template[monaFieldsetLegendTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetLegendTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaFieldsetLegendTemplate]"
+                }]
+        }] });
+
+const fieldsetBaseVariants = cva(`
+        block
+    `);
+const fieldsetVariants = cva(`
+        bg-background
+        border border-border
+        text-foreground
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+const fieldsetLegendVariants = cva(`
+        ml-2
+    `, {
+    variants: {
+        hasTemplate: {
+            true: "",
+            false: "bg-background-dark text-foreground border border-border px-2"
+        },
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        }
+    },
+    defaultVariants: {
+        hasTemplate: false
+    }
+});
+
+const fieldsetBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return fieldsetBaseVariants;
+        default:
+            return fieldsetBaseVariants;
+    }
+};
+const fieldsetThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return fieldsetVariants;
+        default:
+            return fieldsetVariants;
+    }
+};
+const fieldsetLegendThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return fieldsetLegendVariants;
+        default:
+            return fieldsetLegendVariants;
+    }
+};
+
+class FieldsetComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return fieldsetBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.fieldsetClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const disabled = this.disabled();
+            const userClass = this.userClass();
+            return twMerge(fieldsetThemeVariants(theme)({ rounded, disabled }), userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldsetClass" }] : /* istanbul ignore next */ []));
+        this.legendClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const hasTemplate = !!this.legendTemplate();
+            return fieldsetLegendThemeVariants(theme)({ hasTemplate, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "legendClass" }] : /* istanbul ignore next */ []));
+        this.legendTemplate = contentChild(FieldsetLegendTemplateDirective, { ...(ngDevMode ? { debugName: "legendTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.legendVisible = computed(() => {
+            return !!this.legend() || !!this.legendTemplate();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "legendVisible" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the fieldset and its projected form controls are disabled.
+         * Reflected as the native `disabled` attribute on the rendered `<fieldset>`.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The legend text of the fieldset. Shown in the top border as a labelled notch.
+         * Ignored when `monaFieldsetLegendTemplate` is provided.
+         * @default ""
+         */
+        this.legend = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The `name` attribute reflected onto the rendered `<fieldset>` element.
+         * @default undefined
+         */
+        this.name = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the fieldset and its legend.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the rendered `<fieldset>` element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FieldsetComponent, isStandalone: true, selector: "mona-fieldset", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "legendTemplate", first: true, predicate: FieldsetLegendTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<fieldset [class]=\"fieldsetClass()\" [disabled]=\"disabled()\" [attr.name]=\"name()\">\n    @if (legendVisible()) {\n        <legend [class]=\"legendClass()\">\n            @if (legendTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"legendTemplate()\"></ng-container>\n            } @else {\n                <span>{{ legend() }}</span>\n            }\n        </legend>\n    }\n    <ng-content></ng-content>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-fieldset", imports: [NgTemplateOutlet], host: {
+                        "[class]": "baseClass()"
+                    }, template: "<fieldset [class]=\"fieldsetClass()\" [disabled]=\"disabled()\" [attr.name]=\"name()\">\n    @if (legendVisible()) {\n        <legend [class]=\"legendClass()\">\n            @if (legendTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"legendTemplate()\"></ng-container>\n            } @else {\n                <span>{{ legend() }}</span>\n            }\n        </legend>\n    }\n    <ng-content></ng-content>\n</fieldset>\n" }]
+        }], propDecorators: { legendTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FieldsetLegendTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/fieldset
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FieldsetComponent, FieldsetLegendTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-fieldset.mjs.map