mn-angular-lib 1.0.163 → 1.0.165

package/fesm2022/mn-angular-lib.mjs

@@ -13825,6 +13825,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Styling for {@link MnSegmented}, expressed as tailwind-variants slots so the
+ * template pulls one class string per role.
+ *
+ * The control is a track with the active choice raised out of it, rather than a
+ * 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.
+ */
+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',
+    },
+    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.
+         */
+        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' },
+        },
+        /**
+         * Stretch the track and share its width evenly between the segments.
+         *
+         * The segments grow from a zero basis but keep their automatic minimum, so a
+         * justified control inside an auto-width parent still asks for the room its
+         * labels need. Letting them shrink below their content (`min-w-0`) made the
+         * parent resolve to a narrower box and truncated the labels instead.
+         */
+        justified: {
+            true: { root: 'flex w-full', segment: 'flex-1' },
+            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.
+         */
+        active: {
+            true: { segment: 'bg-primary text-primary-content' },
+            false: { segment: 'bg-transparent text-base-content hover:bg-base-content/10' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'lg',
+        justified: false,
+        active: false,
+    },
+});
+
+/** Icon edge length per size, so a segment's glyph matches its own text. */
+const ICON_SIZE = { sm: 16, md: 18 };
+/**
+ * A segmented control: two or three mutually exclusive choices sharing one
+ * track, of which exactly one is active — a view switch (list ⇄ calendar), a
+ * scope switch (mine ⇄ everyone), a range switch (week ⇄ month).
+ *
+ * The selection is **controlled**: the component renders whatever
+ * {@link value} says and emits {@link valueChange} on a click, so the consumer's
+ * own state stays the single source of truth for what is on screen. It keeps no
+ * copy of the selection, and — unlike `mn-tab` — it does not mirror one into the
+ * URL, so it can sit on a page that already has a tab bar without the two
+ * fighting over the query string.
+ *
+ * For switching between panes of a page, reach for `mn-tab`; this is for
+ * switching how one pane is rendered.
+ */
+class MnSegmented {
+    /** The choices and how the group is labelled and scaled. */
+    dataSource;
+    /**
+     * Value of the active segment. No value (or one naming no segment) leaves the
+     * control with nothing active, which is what an unresolved selection should
+     * look like — the component never picks one on the consumer's behalf.
+     */
+    value;
+    /**
+     * Whether the segments stretch to fill the available width. Defaults to false,
+     * so the control hugs its content and can be parked at the end of a row; turn
+     * it on where it should span its container, typically on a narrow screen.
+     */
+    justified = false;
+    /** Emits the picked segment's value. The consumer decides what to do with it. */
+    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. */
+    get styles() {
+        return mnSegmentedVariants({
+            size: this.dataSource.size,
+            borderRadius: this.dataSource.borderRadius,
+            justified: this.justified,
+        });
+    }
+    /** Icon edge length matching the control's text size. */
+    get iconSize() {
+        return ICON_SIZE[this.dataSource.size ?? 'md'];
+    }
+    /** Accessible name of the group, or null when the consumer named nothing. */
+    get groupLabel() {
+        const key = this.dataSource.ariaLabel;
+        return key ? this.lang.translate(key) : null;
+    }
+    /**
+     * Whether `item` is the active choice.
+     * @param item - The segment to test.
+     */
+    isActive(item) {
+        return item.value === this.value;
+    }
+    /**
+     * Classes for one segment, which differ only in whether it is the active one.
+     * @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();
+    }
+    /**
+     * 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.
+     * @param item - The segment to name.
+     */
+    segmentLabel(item) {
+        if (item.label || !item.ariaLabel)
+            return null;
+        return this.lang.translate(item.ariaLabel);
+    }
+    /**
+     * Whether an icon was supplied as a `TemplateRef` rather than lucide icon data.
+     * @param value - The icon to test.
+     */
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    /**
+     * Announces a click. Re-picking the active segment is silent: it is not a
+     * change, and a consumer that reloads on every emission would refetch for
+     * nothing.
+     * @param item - The segment that was clicked.
+     */
+    select(item) {
+        if (item.disabled || this.isActive(item))
+            return;
+        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" }] });
+}
+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" }]
+        }], propDecorators: { dataSource: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
+                type: Input
+            }], justified: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /**
  * Injection token for the base URL used by all CRUD service requests.
  *
@@ -14326,5 +14513,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_DROPDOWN_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnBottomSheet, MnBreadcrumbs, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDropdown, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnKeyboard, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnBreadcrumbsVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnDropdownTriggerVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_DROPDOWN_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnBottomSheet, MnBreadcrumbs, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDropdown, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnKeyboard, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, MnSectionDirective, MnSegmented, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnBreadcrumbsVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnDropdownTriggerVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSegmentedVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
 //# sourceMappingURL=mn-angular-lib.mjs.map