mn-angular-lib 1.0.121 → 1.0.122

package/fesm2022/mn-angular-lib.mjs

@@ -9482,13 +9482,22 @@ const DEFAULT_SKELETON_TAB_COUNT = 3;
  * Supports translation keys for labels via MnTranslatePipe.
  */
 class MnTabComponent {
+    /** The horizontally-scrolling wrapper the edge fade is painted onto. */
+    scrollContainer;
+    /** How far the fade reaches in from each overflowing edge. */
+    static FADE = '2rem';
     /** Data source containing tab items and default active index. */
     dataSource;
     /**
      * Whether to enable horizontal scrolling when items overflow.
-     * If true, tabs will scroll horizontally instead of shrinking too much.
+     * When true, tabs scroll horizontally instead of overflowing their container.
+     *
+     * Defaults to `true`: the tab bar never wraps (`flex-nowrap`), so without
+     * scrolling an overflowing bar would clip its last tabs or push the page width
+     * on narrow screens. When the tabs already fit, `overflow-x-auto` is a no-op,
+     * so this default only ever changes behaviour for the overflow case it fixes.
      */
-    scrollable = false;
+    scrollable = true;
     /**
      * Whether tabs should stretch to fill the available width.
      * Defaults to false, so tabs only take as much space as their content.
@@ -9498,6 +9507,8 @@ class MnTabComponent {
     activeChange = new EventEmitter();
     /** The currently active tab item. */
     currentActive;
+    /** Watches the wrapper and the tab row so the fade re-evaluates on width or content changes. */
+    resizeObserver;
     /**
      * Whether the tab bar is loading and should render skeleton tabs, from
      * {@link MnTabDataSource.state}.
@@ -9526,6 +9537,51 @@ class MnTabComponent {
     ngDoCheck() {
         this.syncActiveTab();
     }
+    /**
+     * Starts watching the scroll wrapper so the edge fade stays honest. A scroll
+     * moves the fade to whichever side now hides tabs; a resize (viewport change)
+     * or a change to the tab row's width (tabs added, relabelled, skeleton →
+     * loaded) re-checks whether either edge overflows at all.
+     */
+    ngAfterViewInit() {
+        const el = this.scrollContainer?.nativeElement;
+        if (!el)
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.updateEdgeFades());
+        this.resizeObserver.observe(el);
+        if (el.firstElementChild)
+            this.resizeObserver.observe(el.firstElementChild);
+        this.updateEdgeFades();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Paints a fade over whichever edge has tabs scrolled out of view — a soft
+     * dissolve that reads as "more this way", the affordance a hidden scrollbar
+     * otherwise costs us. Uses a mask (content → transparent) rather than a
+     * background-coloured overlay, so it needs no knowledge of the theme.
+     */
+    updateEdgeFades() {
+        const el = this.scrollContainer?.nativeElement;
+        if (!el)
+            return;
+        const fadeStart = el.scrollLeft > 1;
+        const fadeEnd = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        const f = MnTabComponent.FADE;
+        let mask = '';
+        if (this.scrollable && fadeStart && fadeEnd) {
+            mask = `linear-gradient(to right, transparent 0, #000 ${f}, #000 calc(100% - ${f}), transparent 100%)`;
+        }
+        else if (this.scrollable && fadeStart) {
+            mask = `linear-gradient(to right, transparent 0, #000 ${f}, #000 100%)`;
+        }
+        else if (this.scrollable && fadeEnd) {
+            mask = `linear-gradient(to right, #000 0, #000 calc(100% - ${f}), transparent 100%)`;
+        }
+        el.style.maskImage = mask;
+        el.style.setProperty('-webkit-mask-image', mask);
+    }
     /**
      * Sets the given tab item as active, invoking deactivate/activate callbacks.
      * @param item - The tab item to activate.
@@ -9567,12 +9623,15 @@ class MnTabComponent {
         this.currentActive = items[index];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { dataSource: [{
+            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer']
+            }], dataSource: [{
                 type: Input
             }], scrollable: [{
                 type: Input