@nanahoshi/mona-ui 0.16.0 → 0.17.0

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

@@ -36,6 +36,12 @@ const segmentedContainerThemeVariants = cva(`
         transition-colors duration-(--mona-motion-fast)
     `, {
     variants: {
+        alignment: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            stretch: "justify-stretch"
+        },
         rounded: {
             none: "rounded-none",
             small: "rounded-sm",
@@ -45,11 +51,12 @@ const segmentedContainerThemeVariants = cva(`
         }
     },
     defaultVariants: {
+        alignment: "stretch",
         rounded: "medium"
     }
 });
 const segmentedOptionThemeVariants = cva(`
-        relative flex flex-1 cursor-pointer items-center justify-center gap-1
+        relative flex cursor-pointer items-center justify-center gap-1
         whitespace-nowrap
         transition-colors duration-(--mona-motion-fast)
         data-[disabled='true']:pointer-events-none
@@ -63,6 +70,12 @@ const segmentedOptionThemeVariants = cva(`
         data-[selected='true']:transition-none
     `, {
     variants: {
+        alignment: {
+            start: "flex-none",
+            center: "flex-none",
+            end: "flex-none",
+            stretch: "flex-1"
+        },
         rounded: {
             none: "rounded-none",
             small: "rounded-xs",
@@ -77,6 +90,7 @@ const segmentedOptionThemeVariants = cva(`
         }
     },
     defaultVariants: {
+        alignment: "stretch",
         rounded: "medium",
         size: "medium"
     }
@@ -127,7 +141,7 @@ class SegmentedComponent {
         this.#lastSize = null;
         this.#resizeObserver = null;
         this.containerClasses = computed(() => {
-            const classes = segmentedContainerThemeVariants({ rounded: this.rounded() });
+            const classes = segmentedContainerThemeVariants({ alignment: this.alignment(), rounded: this.rounded() });
             return twMerge(classes, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
@@ -150,9 +164,10 @@ class SegmentedComponent {
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(SegmentedItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.optionClasses = computed(() => {
+            const alignment = this.alignment();
             const rounded = this.rounded();
             const size = this.size();
-            return segmentedOptionThemeVariants({ rounded, size });
+            return segmentedOptionThemeVariants({ alignment, rounded, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "optionClasses" }] : /* istanbul ignore next */ []));
         this.optionElements = viewChildren("optionElement", /* @ts-ignore */
@@ -171,6 +186,12 @@ class SegmentedComponent {
             return this.disabled() || !!option?.disabled;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedOptionDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls the alignment of the items inside the segmented component.
+         * @default "stretch"
+         */
+        this.alignment = input("stretch", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
         /**
          * @description Controls whether the selection indicator animates between selected options.
          * When false, selection changes are applied immediately without transition.
@@ -245,6 +266,7 @@ class SegmentedComponent {
             read: () => {
                 this.selectedIndex();
                 this.optionElements();
+                this.alignment();
                 this.rounded();
                 this.animate();
                 const size = this.size();
@@ -335,7 +357,7 @@ class SegmentedComponent {
         }
     }
     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: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, 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 }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, 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()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SegmentedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [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 flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SegmentedComponent, isStandalone: true, selector: "mona-segmented", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, 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 }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, 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()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SegmentedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [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 flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\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: SegmentedComponent, decorators: [{
             type: Component,
@@ -349,7 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.role]": "'radiogroup'",
                         "[class]": "containerClasses()"
                     }, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [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 flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\n" }]
-        }], ctorParameters: () => [], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionElements: [{ type: i0.ViewChildren, args: ["optionElement", { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], 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 }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionElements: [{ type: i0.ViewChildren, args: ["optionElement", { isSignal: true }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], 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 }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-segmented.d.ts

@@ -47,9 +47,11 @@ interface SegmentedItemTemplateContext<T extends SegmentedValue = SegmentedValue
 }
 
 declare const segmentedContainerThemeVariants: (props?: ({
+    alignment?: "start" | "center" | "end" | "stretch" | null | undefined;
     rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const segmentedOptionThemeVariants: (props?: ({
+    alignment?: "start" | "center" | "end" | "stretch" | null | undefined;
     rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -75,6 +77,11 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected readonly optionElements: _angular_core.Signal<readonly ElementRef<HTMLLabelElement>[]>;
     protected readonly selectedIndex: _angular_core.Signal<number>;
     protected readonly selectedOptionDisabled: _angular_core.Signal<boolean>;
+    /**
+     * @description Controls the alignment of the items inside the segmented component.
+     * @default "stretch"
+     */
+    readonly alignment: _angular_core.InputSignal<"start" | "center" | "end" | "stretch" | null | undefined>;
     /**
      * @description Controls whether the selection indicator animates between selected options.
      * When false, selection changes are applied immediately without transition.
@@ -144,7 +151,7 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     private setupResizeObserver;
     private updateIndicatorGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
 }
 
 /**