mn-angular-lib 1.0.141 → 1.0.143

package/fesm2022/mn-angular-lib.mjs

@@ -11568,6 +11568,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
+/**
+ * Styling for {@link MnBreadcrumbs}, expressed as tailwind-variants slots so the
+ * template can pull one class string per role. Theme tokens only, so the trail
+ * reads correctly in both light and dark. Links and the Back control are native
+ * `<button>`/`<a>` elements reset to look like plain text with a hover accent.
+ */
+const mnBreadcrumbsVariants = tv({
+    slots: {
+        root: 'flex items-center',
+        list: 'flex flex-wrap items-center',
+        link: 'inline-flex items-center bg-transparent border-0 p-0 rounded-md cursor-pointer ' +
+            'text-base-content/60 hover:text-primary transition-colors ' +
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+        current: 'inline-flex items-center font-semibold text-base-content',
+        separator: 'inline-flex shrink-0 text-base-content/40',
+        back: 'inline-flex items-center gap-1 bg-transparent border-0 p-0 rounded-md cursor-pointer ' +
+            'text-base-content/70 hover:text-primary transition-colors ' +
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+    },
+    variants: {
+        size: {
+            // Text size lives on the root so every crumb, separator and the Back
+            // control inherit it; only the inter-crumb gap changes per slot.
+            sm: { root: 'text-xs', list: 'gap-1' },
+            md: { root: 'text-sm', list: 'gap-1.5' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+/**
+ * A flexible breadcrumb trail.
+ *
+ * Given crumbs it renders a linkable trail (`root › … › current`) where the last
+ * crumb is the current page and is never a link. Given no crumbs it degrades to
+ * a single "Back" control — the two are mutually exclusive. "Flexible" here is
+ * input-driven, not viewport-driven: there is deliberately no responsive
+ * collapse, no scroll machinery — it is a list of links plus a fallback.
+ *
+ * Navigation stays router- and history-agnostic where possible: a crumb (or the
+ * Back control) with an `href` renders a plain `<a>` and navigates natively;
+ * otherwise clicks emit outputs for the app to handle. Only the Back fallback
+ * with no `href` reaches for `history.back()`.
+ */
+class MnBreadcrumbs {
+    /** Trail crumbs and Back-fallback configuration. */
+    data = { items: [] };
+    /** Emits the crumb that was clicked (non-current crumbs only). */
+    crumbClick = new EventEmitter();
+    /** Emits when the fallback "Back" control is activated. */
+    back = new EventEmitter();
+    /** Default translation key / literal for the Back control's label. */
+    static DEFAULT_BACK_LABEL = 'back';
+    /** Resolved tailwind-variants slot functions for the current size. */
+    get styles() {
+        return mnBreadcrumbsVariants({ size: this.data.size });
+    }
+    /** Whether a linkable trail should render (vs the Back fallback). */
+    get hasTrail() {
+        return (this.data.items?.length ?? 0) > 0;
+    }
+    /** Label for the Back control — the configured key/literal, or the default. */
+    get backLabel() {
+        return this.data.backLabel ?? MnBreadcrumbs.DEFAULT_BACK_LABEL;
+    }
+    /** The last crumb is the current page and is rendered as plain text. */
+    isCurrent(index) {
+        return index === this.data.items.length - 1;
+    }
+    /** Runs a crumb's own callback and notifies listeners of the click. */
+    onCrumb(item) {
+        item.onClick?.();
+        this.crumbClick.emit(item);
+    }
+    /**
+     * Fallback Back action. Always emits `back` for listeners; when no `backHref`
+     * anchor is carrying the navigation, steps back through browser history.
+     */
+    onBack() {
+        this.back.emit();
+        if (!this.data.backHref) {
+            window.history.back();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnBreadcrumbs, isStandalone: true, selector: "mn-breadcrumbs", inputs: { data: "data" }, outputs: { crumbClick: "crumbClick", back: "back" }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\" [class]=\"styles.root()\">\n  @if (hasTrail) {\n    <ol [class]=\"styles.list()\">\n      @for (item of data.items; track $index; let first = $first) {\n        @if (!first) {\n          <li aria-hidden=\"true\" [class]=\"styles.separator()\">\n            <svg [size]=\"14\" lucideChevronRight></svg>\n          </li>\n        }\n        <li class=\"inline-flex items-center\">\n          @if (isCurrent($index)) {\n            <span aria-current=\"page\" [class]=\"styles.current()\">{{ item.label | mnTranslate }}</span>\n          } @else if (item.href) {\n            <a [attr.href]=\"item.href\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</a>\n          } @else {\n            <button type=\"button\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</button>\n          }\n        </li>\n      }\n    </ol>\n  } @else if (data.backHref) {\n    <a [attr.href]=\"data.backHref\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </a>\n  } @else {\n    <button type=\"button\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </button>\n  }\n</nav>\n", dependencies: [{ kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBreadcrumbs, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-breadcrumbs', standalone: true, imports: [MnTranslatePipe, LucideChevronLeft, LucideChevronRight], template: "<nav aria-label=\"Breadcrumb\" [class]=\"styles.root()\">\n  @if (hasTrail) {\n    <ol [class]=\"styles.list()\">\n      @for (item of data.items; track $index; let first = $first) {\n        @if (!first) {\n          <li aria-hidden=\"true\" [class]=\"styles.separator()\">\n            <svg [size]=\"14\" lucideChevronRight></svg>\n          </li>\n        }\n        <li class=\"inline-flex items-center\">\n          @if (isCurrent($index)) {\n            <span aria-current=\"page\" [class]=\"styles.current()\">{{ item.label | mnTranslate }}</span>\n          } @else if (item.href) {\n            <a [attr.href]=\"item.href\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</a>\n          } @else {\n            <button type=\"button\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</button>\n          }\n        </li>\n      }\n    </ol>\n  } @else if (data.backHref) {\n    <a [attr.href]=\"data.backHref\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </a>\n  } @else {\n    <button type=\"button\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </button>\n  }\n</nav>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], crumbClick: [{
+                type: Output
+            }], back: [{
+                type: Output
+            }] } });
+
 /**
  * Injection token for the base URL used by all CRUD service requests.
  *
@@ -12069,5 +12169,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_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, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, 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, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, 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_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, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, 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, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
 //# sourceMappingURL=mn-angular-lib.mjs.map