@nanahoshi/mona-ui 0.12.0 → 0.13.0

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

@@ -1,9 +1,31 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, input, output, model, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, computed, contentChild, 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';
 
+/**
+ * @description Renders the visual content of every segmented option. Overrides the default label
+ * text of each option.
+ */
+class SegmentedItemTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SegmentedItemTemplateDirective, isStandalone: true, selector: "ng-template[monaSegmentedItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSegmentedItemTemplate]"
+                }]
+        }] });
+
 const segmentedContainerThemeVariants = cva(`
         inline-flex items-center gap-0.5
         ${themeControlSurfaceClasses}
@@ -78,6 +100,7 @@ class SegmentedComponent {
         ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(SegmentedItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.optionClasses = computed(() => {
             const rounded = this.rounded();
             const size = this.size();
@@ -148,6 +171,15 @@ class SegmentedComponent {
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
+    createOptionContext(option, index) {
+        return {
+            $implicit: option,
+            disabled: this.disabled() || !!option.disabled,
+            index,
+            option,
+            selected: option.value === this.value()
+        };
+    }
     onOptionBlur() {
         this.touch.emit();
     }
@@ -159,11 +191,11 @@ class SegmentedComponent {
         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 }, 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()" } }, 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 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            {{ option.label }}\n        </span>\n    </label>\n}\n" }); }
+    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 }, 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 }], 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 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", 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,
-            args: [{ selector: "mona-segmented", host: {
+            args: [{ selector: "mona-segmented", imports: [NgTemplateOutlet], host: {
                         "[attr.aria-disabled]": "disabled() || undefined",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.aria-label]": "ariaLabel()",
@@ -172,8 +204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[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 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            {{ 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 }] }], 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"] }] } });
+                    }, 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 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" }]
+        }], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], 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
@@ -183,5 +215,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SegmentedComponent };
+export { SegmentedComponent, SegmentedItemTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-segmented.mjs.map

package/package.json

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

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

@@ -1,8 +1,10 @@
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import * as _nanahoshi_mona_ui_segmented from '@nanahoshi/mona-ui/segmented';
 
 type SegmentedValue = string | number;
 
@@ -12,6 +14,32 @@ interface SegmentedOption<T extends SegmentedValue = SegmentedValue> {
     readonly disabled?: boolean;
 }
 
+/**
+ * @description Rendering context passed to the segmented item template.
+ */
+interface SegmentedItemTemplateContext<T extends SegmentedValue = SegmentedValue> {
+    /**
+     * The option rendered by this item.
+     */
+    readonly $implicit: SegmentedOption<T>;
+    /**
+     * The option rendered by this item.
+     */
+    readonly option: SegmentedOption<T>;
+    /**
+     * Zero-based option index.
+     */
+    readonly index: number;
+    /**
+     * Whether this option is currently selected.
+     */
+    readonly selected: boolean;
+    /**
+     * Whether this option is disabled, either individually or via the group.
+     */
+    readonly disabled: boolean;
+}
+
 declare const segmentedContainerThemeVariants: (props?: ({
     rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -31,6 +59,7 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected readonly groupName: string;
     protected readonly inputClasses: _angular_core.Signal<string>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly optionClasses: _angular_core.Signal<string>;
     /**
      * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
@@ -88,11 +117,23 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
      * @default null
      */
     readonly value: _angular_core.ModelSignal<T | null>;
+    protected createOptionContext(option: SegmentedOption<T>, index: number): SegmentedItemTemplateContext<T>;
     protected onOptionBlur(): void;
     protected onOptionChange(option: SegmentedOption<T>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "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"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "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>;
+}
+
+/**
+ * @description Renders the visual content of every segmented option. Overrides the default label
+ * text of each option.
+ */
+declare class SegmentedItemTemplateDirective {
+    readonly templateRef: TemplateRef<SegmentedItemTemplateContext<_nanahoshi_mona_ui_segmented.SegmentedValue>>;
+    static ngTemplateContextGuard(_directive: SegmentedItemTemplateDirective, context: unknown): context is SegmentedItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SegmentedItemTemplateDirective, "ng-template[monaSegmentedItemTemplate]", never, {}, {}, never, never, true, never>;
 }
 
-export { SegmentedComponent };
-export type { SegmentedOption, SegmentedValue, SegmentedVariantProps };
+export { SegmentedComponent, SegmentedItemTemplateDirective };
+export type { SegmentedItemTemplateContext, SegmentedOption, SegmentedValue, SegmentedVariantProps };