@nanahoshi/mona-ui 0.7.1 → 0.9.0

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

@@ -1,2 +1,2 @@
-export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DWzYyGnb.mjs';
+export { C as CellEditEvent, x as GridAddCommandDirective, y as GridAddEvent, z as GridCancelCommandDirective, A as GridCancelEvent, B as GridCellTemplateDirective, D as GridColumnComponent, E as GridColumnTitleTemplateDirective, F as GridCommandColumnComponent, H as GridComponent, I as GridContextMenuDirective, J as GridDetailTemplateDirective, K as GridEditCommandDirective, L as GridEditEvent, M as GridEditTemplateDirective, N as GridEditableDirective, O as GridExportDirective, P as GridFilterableDirective, Q as GridFooterTemplateDirective, R as GridGroupFooterTemplateDirective, S as GridGroupableDirective, T as GridHeaderTemplateDirective, U as GridNoDataTemplateDirective, V as GridRemoveCommandDirective, W as GridRemoveEvent, X as GridReorderableDirective, Y as GridResizableDirective, Z as GridSaveCommandDirective, _ as GridSaveEvent, $ as GridSelectableDirective, a0 as GridSortableDirective, a1 as GridStatePersistenceDirective, a2 as GridToolbarTemplateDirective, a3 as GridVirtualScrollDirective, a4 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs';
 //# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

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

@@ -0,0 +1,159 @@
+import * as i0 from '@angular/core';
+import { computed, input, output, model, Component } from '@angular/core';
+import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const segmentedContainerThemeVariants = cva(`
+        inline-flex items-center gap-0.5
+        ${themeControlSurfaceClasses}
+        border border-input-border
+        rounded-lg
+        p-1
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        transition-colors duration-(--mona-motion-fast)
+    `);
+const segmentedOptionThemeVariants = cva(`
+        relative flex flex-1 cursor-pointer items-center justify-center gap-1
+        whitespace-nowrap
+        rounded-md
+        transition-colors duration-(--mona-motion-fast)
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground
+        data-[selected='true']:bg-primary data-[selected='true']:text-primary-foreground
+        data-[selected='true']:shadow-sm data-[selected='true']:ring-1 data-[selected='true']:ring-selected-border
+        data-[selected='false']:text-muted-foreground
+        data-[selected='false']:hover:bg-hover data-[selected='false']:hover:text-foreground
+    `, {
+    variants: {
+        size: {
+            small: "h-6 px-1.5 text-sm",
+            medium: "h-8 px-2.5 text-sm",
+            large: "h-10 px-3.5 text-base"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+const segmentedInputThemeVariants = cva(`
+        peer absolute inset-0 z-10 h-full w-full
+        cursor-pointer appearance-none opacity-0
+        outline-none
+        disabled:cursor-not-allowed
+    `);
+
+class SegmentedComponent {
+    constructor() {
+        this.containerClasses = computed(() => {
+            const classes = segmentedContainerThemeVariants();
+            return twMerge(classes, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+        this.groupName = createElementControlId();
+        this.inputClasses = computed(() => segmentedInputThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.optionClasses = computed(() => {
+            const size = this.size();
+            return segmentedOptionThemeVariants({ size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
+         * @default null
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description ID of an external element that provides the accessible name for the radio group.
+         * @default null
+         */
+        this.ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @description Disables every option in the group and prevents value changes.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the component as invalid. Error styling requires both `invalid` and `touched` to be `true`.
+         * When bound to a signal form field via `[formField]`, this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The list of selectable options. Exactly one option is selected at a time.
+         */
+        this.options = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the height, horizontal padding, text size, and spacing of each option.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the selected value changes or focus leaves a radio input.
+         */
+        this.touch = output();
+        /**
+         * @description Marks the component as touched. When bound to a signal form field via `[formField]`,
+         * this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description The currently selected value. When it matches no current option, no option is checked.
+         * A `null` value is allowed initially but cannot be restored through segmented interaction.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    onOptionBlur() {
+        this.touch.emit();
+    }
+    onOptionChange(option) {
+        if (this.disabled() || option.disabled) {
+            return;
+        }
+        this.value.set(option.value);
+        this.touch.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SegmentedComponent, isStandalone: true, selector: "mona-segmented", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() || undefined", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.role": "'radiogroup'", "class": "containerClasses()" } }, ngImport: i0, template: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center gap-1 rounded-md peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35\">\n            {{ option.label }}\n        </span>\n    </label>\n}\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-segmented", host: {
+                        "[attr.aria-disabled]": "disabled() || undefined",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-labelledby]": "ariaLabelledBy()",
+                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.role]": "'radiogroup'",
+                        "[class]": "containerClasses()"
+                    }, template: "@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label [class]=\"optionClasses()\" [attr.data-selected]=\"selected\" [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center gap-1 rounded-md peer-focus-visible:ring-2 peer-focus-visible:ring-focus-indicator/35\">\n            {{ option.label }}\n        </span>\n    </label>\n}\n" }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/segmented
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SegmentedComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-segmented.mjs.map