mn-angular-lib 1.0.167 → 1.0.168

package/fesm2022/mn-angular-lib.mjs

@@ -285,6 +285,9 @@ const mnButtonVariants = tv({
             two_xl: 'rounded-2xl',
             three_xl: 'rounded-3xl',
             four_xl: 'rounded-4xl',
+            // A pill. Also what a fully-rounded container (e.g. a segmented track)
+            // hands its segments, since there is no tighter step below it.
+            full: 'rounded-full',
         },
         // Icon-button shape. `circle`/`square` drop the text padding and make the button a
         // fixed square sized off `size` (see compoundVariants), overriding `borderRadius`.
@@ -13868,37 +13871,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * row of loose buttons: the segments share one bordered surface, so they read as
  * one control with one answer instead of several independent actions. Theme
  * tokens only, so it holds up in both light and dark.
+ *
+ * Each segment is an `mnButton`, which owns its own size, colour, radius and
+ * disabled look; the `segment` slot adds only what the button does not know
+ * about — how it sits inside the track.
  */
 const mnSegmentedVariants = tv({
     slots: {
         root: 'inline-flex items-center gap-0.5 border border-base-300 bg-base-200 p-0.5',
-        segment: 'inline-flex items-center justify-center gap-1.5 cursor-pointer select-none ' +
-            'whitespace-nowrap border border-transparent transition-colors ' +
-            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary ' +
-            'disabled:opacity-50 disabled:pointer-events-none',
+        segment: 'gap-1.5 select-none ' +
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
     },
     variants: {
         /**
-         * Corner rounding of the track, with the segments rounded one step tighter so
-         * a filled segment nests inside the track's own corner instead of poking out
-         * of it. Token names match mn-button's; `full` makes a pill, where track and
-         * segment share the same fully-rounded ends.
+         * Corner rounding of the track. The segments are rounded one step tighter
+         * (see `SEGMENT_RADIUS` on the component) so a filled segment nests inside
+         * the track's own corner instead of poking out of it. Token names match
+         * mn-button's; `full` makes a pill, where track and segment share the same
+         * fully-rounded ends.
          */
         borderRadius: {
-            none: { root: 'rounded-none', segment: 'rounded-none' },
-            xs: { root: 'rounded-xs', segment: 'rounded-none' },
-            sm: { root: 'rounded-sm', segment: 'rounded-xs' },
-            md: { root: 'rounded-md', segment: 'rounded-sm' },
-            lg: { root: 'rounded-lg', segment: 'rounded-md' },
-            xl: { root: 'rounded-xl', segment: 'rounded-lg' },
-            two_xl: { root: 'rounded-2xl', segment: 'rounded-xl' },
-            three_xl: { root: 'rounded-3xl', segment: 'rounded-2xl' },
-            four_xl: { root: 'rounded-4xl', segment: 'rounded-3xl' },
-            full: { root: 'rounded-full', segment: 'rounded-full' },
-        },
-        size: {
-            sm: { segment: 'px-2.5 py-1 text-sm' },
-            md: { segment: 'px-3 py-1.5 text-base' },
+            none: { root: 'rounded-none' },
+            xs: { root: 'rounded-xs' },
+            sm: { root: 'rounded-sm' },
+            md: { root: 'rounded-md' },
+            lg: { root: 'rounded-lg' },
+            xl: { root: 'rounded-xl' },
+            two_xl: { root: 'rounded-2xl' },
+            three_xl: { root: 'rounded-3xl' },
+            four_xl: { root: 'rounded-4xl' },
+            full: { root: 'rounded-full' },
         },
         /**
          * Stretch the track and share its width evenly between the segments.
@@ -13913,17 +13915,17 @@ const mnSegmentedVariants = tv({
             false: {},
         },
         /**
-         * The picked segment. Filled rather than merely tinted: the control is often
-         * the only thing on its row, so the answer has to be readable at a glance
-         * without comparing two subtle shades.
+         * Whether the segment is the picked one. The colours come from the button
+         * itself (a filled primary button when active, a ghost one otherwise); this
+         * only keeps an inactive segment's box the same size as an active one, whose
+         * fill variant carries a real border.
          */
         active: {
-            true: { segment: 'bg-primary text-primary-content' },
-            false: { segment: 'bg-transparent text-base-content hover:bg-base-content/10' },
+            true: {},
+            false: { segment: 'border border-transparent' },
         },
     },
     defaultVariants: {
-        size: 'md',
         borderRadius: 'lg',
         justified: false,
         active: false,
@@ -13932,6 +13934,23 @@ const mnSegmentedVariants = tv({
 
 /** Icon edge length per size, so a segment's glyph matches its own text. */
 const ICON_SIZE = { sm: 16, md: 18 };
+/**
+ * Segment radius per track radius: one step tighter, so a filled segment nests
+ * inside the track's corner instead of poking out of it. A pill has no tighter
+ * step, so its segments are pills too.
+ */
+const SEGMENT_RADIUS = {
+    none: 'none',
+    xs: 'none',
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg',
+    two_xl: 'xl',
+    three_xl: 'two_xl',
+    four_xl: 'three_xl',
+    full: 'full',
+};
 /**
  * A segmented control: two or three mutually exclusive choices sharing one
  * track, of which exactly one is active — a view switch (list ⇄ calendar), a
@@ -13944,6 +13963,10 @@ const ICON_SIZE = { sm: 16, md: 18 };
  * URL, so it can sit on a page that already has a tab bar without the two
  * fighting over the query string.
  *
+ * Each segment is an `mnButton` — a filled primary one when active, a ghost one
+ * otherwise — so the control inherits the button's sizes, colours and disabled
+ * look rather than maintaining a parallel set.
+ *
  * For switching between panes of a page, reach for `mn-tab`; this is for
  * switching how one pane is rendered.
  */
@@ -13966,10 +13989,9 @@ class MnSegmented {
     valueChange = new EventEmitter();
     /** Resolves this control's own accessible names against the app's bundle. */
     lang = inject(MnLanguageService);
-    /** Resolved slot classes for the current size and layout. */
+    /** Resolved slot classes for the current rounding and layout. */
     get styles() {
         return mnSegmentedVariants({
-            size: this.dataSource.size,
             borderRadius: this.dataSource.borderRadius,
             justified: this.justified,
         });
@@ -13991,17 +14013,35 @@ class MnSegmented {
         return item.value === this.value;
     }
     /**
-     * Classes for one segment, which differ only in whether it is the active one.
+     * Layout classes for one segment — how it sits in the track. Its size, colour,
+     * radius and disabled look come from the button itself; see
+     * {@link segmentButton}.
      * @param item - The segment to style.
      */
     segmentClass(item) {
         return mnSegmentedVariants({
-            size: this.dataSource.size,
-            borderRadius: this.dataSource.borderRadius,
             justified: this.justified,
             active: this.isActive(item),
         }).segment();
     }
+    /**
+     * The `mnButton` configuration of one segment: a filled primary button when it
+     * is the active choice, a ghost button otherwise, at the control's size and one
+     * radius step inside the track. The active segment has no hover — re-picking it
+     * does nothing, so nothing should invite the click.
+     * @param item - The segment to configure.
+     */
+    segmentButton(item) {
+        const active = this.isActive(item);
+        return {
+            size: this.dataSource.size ?? 'md',
+            variant: active ? 'fill' : 'ghost',
+            color: active ? 'primary' : 'gray',
+            hover: !active,
+            borderRadius: SEGMENT_RADIUS[this.dataSource.borderRadius ?? 'lg'],
+            disabled: item.disabled ?? false,
+        };
+    }
     /**
      * Accessible name for an icon-only segment, or null when the segment shows a
      * label — that label already names it, and a second name would only compete.
@@ -14031,11 +14071,11 @@ class MnSegmented {
         this.valueChange.emit(item.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSegmented, isStandalone: true, selector: "mn-segmented", inputs: { dataSource: "dataSource", value: "value", justified: "justified" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- One control, one answer: `role=\"group\"` with `aria-pressed` per segment, so\n     the picked choice is announced as pressed rather than as a plain button\n     nobody can tell the state of. Not a radiogroup \u2014 these are buttons that act\n     immediately, not a value being edited inside a form. -->\n<div [attr.aria-label]=\"groupLabel\" [class]=\"styles.root()\" role=\"group\">\n  @for (item of dataSource.items; track item.value) {\n    <button\n      (click)=\"select(item)\"\n      [attr.aria-label]=\"segmentLabel(item)\"\n      [attr.aria-pressed]=\"isActive(item)\"\n      [class]=\"segmentClass(item)\"\n      [disabled]=\"item.disabled ?? false\"\n      type=\"button\"\n    >\n      @if (item.icon; as icon) {\n        <span class=\"inline-flex shrink-0 items-center\">\n          <!-- A caller's template, else lucide data rendered at the size that\n               matches this control's text \u2014 the same icon convention the\n               dropdown's actions use. -->\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"iconSize\"></svg>\n          }\n        </span>\n      }\n      @if (item.label; as label) {\n        <span class=\"truncate\">{{ label | mnTranslate }}</span>\n      }\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSegmented, isStandalone: true, selector: "mn-segmented", inputs: { dataSource: "dataSource", value: "value", justified: "justified" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- One control, one answer: `role=\"group\"` with `aria-pressed` per segment, so\n     the picked choice is announced as pressed rather than as a plain button\n     nobody can tell the state of. Not a radiogroup \u2014 these are buttons that act\n     immediately, not a value being edited inside a form. -->\n<div [attr.aria-label]=\"groupLabel\" [class]=\"styles.root()\" role=\"group\">\n  @for (item of dataSource.items; track item.value) {\n    <!-- Each segment is an mn-button: the active one a filled primary button, the\n         rest ghost buttons, so the control shares the button's sizes, colours and\n         disabled look instead of re-deriving them. -->\n    <button\n      mnButton\n      (click)=\"select(item)\"\n      [attr.aria-label]=\"segmentLabel(item)\"\n      [attr.aria-pressed]=\"isActive(item)\"\n      [class]=\"segmentClass(item)\"\n      [data]=\"segmentButton(item)\"\n      type=\"button\"\n    >\n      @if (item.icon; as icon) {\n        <span class=\"inline-flex shrink-0 items-center\">\n          <!-- A caller's template, else lucide data rendered at the size that\n               matches this control's text \u2014 the same icon convention the\n               dropdown's actions use. -->\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"iconSize\"></svg>\n          }\n        </span>\n      }\n      @if (item.label; as label) {\n        <span class=\"truncate\">{{ label | mnTranslate }}</span>\n      }\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSegmented, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-segmented', standalone: true, imports: [MnTranslatePipe, NgTemplateOutlet, LucideDynamicIcon], template: "<!-- One control, one answer: `role=\"group\"` with `aria-pressed` per segment, so\n     the picked choice is announced as pressed rather than as a plain button\n     nobody can tell the state of. Not a radiogroup \u2014 these are buttons that act\n     immediately, not a value being edited inside a form. -->\n<div [attr.aria-label]=\"groupLabel\" [class]=\"styles.root()\" role=\"group\">\n  @for (item of dataSource.items; track item.value) {\n    <button\n      (click)=\"select(item)\"\n      [attr.aria-label]=\"segmentLabel(item)\"\n      [attr.aria-pressed]=\"isActive(item)\"\n      [class]=\"segmentClass(item)\"\n      [disabled]=\"item.disabled ?? false\"\n      type=\"button\"\n    >\n      @if (item.icon; as icon) {\n        <span class=\"inline-flex shrink-0 items-center\">\n          <!-- A caller's template, else lucide data rendered at the size that\n               matches this control's text \u2014 the same icon convention the\n               dropdown's actions use. -->\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"iconSize\"></svg>\n          }\n        </span>\n      }\n      @if (item.label; as label) {\n        <span class=\"truncate\">{{ label | mnTranslate }}</span>\n      }\n    </button>\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-segmented', standalone: true, imports: [MnButton, MnTranslatePipe, NgTemplateOutlet, LucideDynamicIcon], template: "<!-- One control, one answer: `role=\"group\"` with `aria-pressed` per segment, so\n     the picked choice is announced as pressed rather than as a plain button\n     nobody can tell the state of. Not a radiogroup \u2014 these are buttons that act\n     immediately, not a value being edited inside a form. -->\n<div [attr.aria-label]=\"groupLabel\" [class]=\"styles.root()\" role=\"group\">\n  @for (item of dataSource.items; track item.value) {\n    <!-- Each segment is an mn-button: the active one a filled primary button, the\n         rest ghost buttons, so the control shares the button's sizes, colours and\n         disabled look instead of re-deriving them. -->\n    <button\n      mnButton\n      (click)=\"select(item)\"\n      [attr.aria-label]=\"segmentLabel(item)\"\n      [attr.aria-pressed]=\"isActive(item)\"\n      [class]=\"segmentClass(item)\"\n      [data]=\"segmentButton(item)\"\n      type=\"button\"\n    >\n      @if (item.icon; as icon) {\n        <span class=\"inline-flex shrink-0 items-center\">\n          <!-- A caller's template, else lucide data rendered at the size that\n               matches this control's text \u2014 the same icon convention the\n               dropdown's actions use. -->\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"iconSize\"></svg>\n          }\n        </span>\n      }\n      @if (item.label; as label) {\n        <span class=\"truncate\">{{ label | mnTranslate }}</span>\n      }\n    </button>\n  }\n</div>\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input,
                 args: [{ required: true }]