npm - @actabldesign/bellhop-core - Versions diffs - 0.0.3 → 0.0.6 - Mend

@actabldesign/bellhop-core 0.0.3 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1505) hide show

package/dist/esm/bh-notification.entry.js ADDED Viewed

@@ -0,0 +1,126 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.js';
+const bhNotificationCss = ":host{display:block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.notification{display:flex;align-items:flex-start;gap:16px;padding:16px;background:var(--color-white, #ffffff);border:1px solid var(--color-neutral-200, #eaecf0);border-radius:12px;box-shadow:0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);position:relative}.notification-content{display:flex;gap:12px;flex:1;min-width:0}.notification-icon-wrapper{flex-shrink:0}.notification-text{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}.notification-text-wrapper{display:flex;flex-direction:column;gap:4px}.notification-title{font-size:var(--text-sm-size, 14px);font-weight:600;color:var(--color-neutral-900, #101828);margin:0;line-height:1.43}.notification-description{font-size:var(--text-sm-size, 14px);font-weight:400;color:var(--color-neutral-600, #475467);margin:0;line-height:1.43}.notification-actions{display:flex;gap:12px}.notification-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:4px;transition:background 0.2s ease-in-out}.notification-close:hover{background:var(--color-neutral-100, #f2f4f7)}.close-icon{font-size:16px;color:var(--color-neutral-400, #98a2b3)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
+const BhNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhAction = createEvent(this, "bhAction");
+        this.bhDismiss = createEvent(this, "bhDismiss");
+        this.bhClose = createEvent(this, "bhClose");
+    }
+    /**
+     * Type of notification (determines color and icon)
+     */
+    type = 'default';
+    /**
+     * Notification title
+     */
+    notificationTitle = '';
+    /**
+     * Notification description
+     */
+    description = '';
+    /**
+     * Text for the action button
+     */
+    actionText = '';
+    /**
+     * Text for the dismiss button
+     */
+    dismissText = '';
+    /**
+     * Whether to show the close button
+     */
+    dismissible = true;
+    /**
+     * Custom icon name (overrides type-based icon)
+     */
+    icon = '';
+    /**
+     * Emitted when action button is clicked
+     */
+    bhAction;
+    /**
+     * Emitted when dismiss button is clicked
+     */
+    bhDismiss;
+    /**
+     * Emitted when close button is clicked
+     */
+    bhClose;
+    getIconName() {
+        if (this.icon)
+            return this.icon;
+        switch (this.type) {
+            case 'primary':
+                return 'new_releases';
+            case 'success':
+                return 'check_circle';
+            case 'error':
+                return 'error';
+            case 'warning':
+                return 'warning';
+            case 'feature':
+                return 'rocket_launch';
+            case 'default':
+                return 'info';
+            default:
+                return 'info';
+        }
+    }
+    getIconColor() {
+        switch (this.type) {
+            case 'primary':
+                return 'brand';
+            case 'success':
+                return 'success';
+            case 'error':
+                return 'error';
+            case 'warning':
+                return 'warning';
+            case 'feature':
+                return 'highlight';
+            case 'default':
+            default:
+                return 'gray';
+        }
+    }
+    getIconStyle() {
+        switch (this.type) {
+            case 'primary':
+                return 'outlined';
+            case 'success':
+                return 'filled';
+            case 'error':
+                return 'filled';
+            case 'warning':
+                return 'filled';
+            case 'feature':
+                return 'outlined';
+            case 'default':
+            default:
+                return 'outlined';
+        }
+    }
+    handleAction = () => {
+        this.bhAction.emit();
+    };
+    handleDismiss = () => {
+        this.bhDismiss.emit();
+    };
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    render() {
+        const notificationClasses = {
+            notification: true,
+            [`notification-${this.type}`]: true,
+        };
+        return (h("div", { key: 'fcb47a9bab423243efac149251f6afbc313568c3', class: notificationClasses, role: "alert", part: "container" }, h("div", { key: 'f6119ec2b3ab549dde69e1817c39bb521c638c5e', class: "notification-content" }, h("div", { key: '9bcf5d938af89f34497e1a7d4bf80430dd79f5f3', class: "notification-icon-wrapper" }, h("bh-featured-icon", { key: 'ddfd7940aa41cce00a2e3cfc6aec3b85ca8628da', icon: this.getIconName(), color: this.getIconColor(), size: "sm", iconStyle: this.getIconStyle() })), h("div", { key: '4d77b106b4aeb8f550400baeed83efdf24c363e5', class: "notification-text" }, h("div", { key: '1933de95730dbb964e2bf17d065eb1848f3edb74', class: "notification-text-wrapper" }, this.notificationTitle && (h("h3", { key: '6925b30a9fb845344bd8fcb517d2f31b2b5c755e', class: "notification-title" }, this.notificationTitle)), this.description && (h("p", { key: '2d38a7733397cd7e596b7794e0c387ff97002ae2', class: "notification-description" }, this.description))), (this.actionText || this.dismissText) && (h("div", { key: 'da9933044826eb1e46fbe308ef6bb3feff7d3f40', class: "notification-actions" }, this.dismissText && (h("bh-button", { key: '12c2caeb3cba2d40fbd1c095dcc652b3c7bf94cf', hierarchy: "quaternary", size: "sm", label: this.dismissText, icon: "none", onBhClick: this.handleDismiss })), this.actionText && (h("bh-button", { key: 'eb72fa328044931470e557f027812ec283b8db24', hierarchy: "quaternary", size: "sm", label: this.actionText, icon: "none", onBhClick: this.handleAction })))))), this.dismissible && (h("button", { key: '7bd46d3fec9ea41a24cd2fc975b3b526c38a3934', class: "notification-close", onClick: this.handleClose, "aria-label": "Close notification" }, h("span", { key: '6c680f4500026ac18dc3cf7587042ba9edf72ec2', class: "material-symbols-outlined close-icon" }, "close")))));
+    }
+};
+BhNotification.style = bhNotificationCss;
+export { BhNotification as bh_notification };
+//# sourceMappingURL=bh-notification.entry.js.map

package/dist/esm/bh-page-navigation-child.entry.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.js';
+const bhPageNavigationChildCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-child-label{font-family:var(--font-inter);font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-child-badge{margin-left:auto;font-family:var(--font-inter);font-size:12px;font-weight:500;color:var(--color-neutral-500)}";
+const BhPageNavigationChild = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Optional badge text/number to display
+     */
+    badge;
+    /**
+     * Whether to show the badge (when badge prop is provided)
+     */
+    showBadge = true;
+    /**
+     * Whether the item is currently active/selected
+     */
+    isActive = false;
+    /**
+     * Event emitted when the navigation item is clicked
+     */
+    bhItemClick;
+    handleClick = () => {
+        this.bhItemClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-child': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (h(Host, { key: '801f6ce9fa33bff82ae0572ca4233d62101bff5a' }, h("div", { key: 'b485e3a258658dadebda21a9f329bb676a737e6d', class: this.getItemClasses(), onClick: this.handleClick }, h("div", { key: '3cebeec1f7255591c5a2405198d65f7cc637fe02', class: "page-navigation-child-content" }, h("span", { key: '982dbda8defddf8a04cbd4831d68090816bb8228', class: "page-navigation-child-label" }, this.label), this.badge !== undefined && this.showBadge && (h("span", { key: '623a58963bbbbd94d5a2934165a4f5e821ef3a56', class: "page-navigation-child-badge" }, this.badge))))));
+    }
+};
+BhPageNavigationChild.style = bhPageNavigationChildCss;
+export { BhPageNavigationChild as bh_page_navigation_child };
+//# sourceMappingURL=bh-page-navigation-child.entry.js.map

package/dist/esm/bh-page-navigation-multi-level_2.entry.js ADDED Viewed

@@ -0,0 +1,143 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.js';
+const bhPageNavigationMultiLevelCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;transition:max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-children.animate-slide-down-enter{animation:slideDownEnter 0.15s ease-out forwards}.page-navigation-children.animate-slide-down-exit{animation:slideDownExit 0.15s ease-out forwards}@keyframes slideDownEnter{from{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:1000px;transform:translateY(0)}}@keyframes slideDownExit{from{opacity:1;max-height:1000px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-10px)}}.page-navigation-item-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal, 0.2s) var(--animation-ease-enter, ease)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label{font-family:var(--font-inter);font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}";
+const BhPageNavigationMultiLevel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhToggle = createEvent(this, "bhToggle");
+        this.bhChildClick = createEvent(this, "bhChildClick");
+        this.bhAddClick = createEvent(this, "bhAddClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Optional badge text/number to display
+     */
+    badge;
+    /**
+     * Child navigation items
+     */
+    childItems = [];
+    /**
+     * Whether the item is expanded to show children
+     */
+    isExpanded = false;
+    /**
+     * Internal state for hover
+     */
+    isHovered = false;
+    /**
+     * Internal state for animation
+     */
+    isAnimating = false;
+    /**
+     * Animation class
+     */
+    animationClass = '';
+    /**
+     * Event emitted when the parent item is clicked (to toggle expansion)
+     */
+    bhToggle;
+    /**
+     * Event emitted when a child item is clicked
+     */
+    bhChildClick;
+    /**
+     * Event emitted when add button is clicked
+     */
+    bhAddClick;
+    handleExpandedChange(newValue) {
+        if (newValue) {
+            this.isAnimating = true;
+            this.animationClass = 'animate-slide-down-enter';
+        }
+        else if (this.isAnimating) {
+            this.animationClass = 'animate-slide-down-exit';
+            setTimeout(() => {
+                this.isAnimating = false;
+                this.animationClass = '';
+            }, 150);
+        }
+    }
+    get hasActiveChild() {
+        return this.childItems.some(child => child.isActive);
+    }
+    handleParentClick = () => {
+        this.bhToggle.emit();
+    };
+    handleChildClick = (index) => {
+        this.bhChildClick.emit(index);
+    };
+    handleAddClick = (e) => {
+        e.stopPropagation();
+        this.bhAddClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-multi-level': true,
+            'page-navigation-animate-smooth': true,
+            'has-active-child': this.hasActiveChild,
+            'expanded': this.isExpanded,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'db478fe5c9492c19a41acf68577cb78a00ebdc4f' }, h("div", { key: 'a968be18bbdac5bc39d45cf59b544e5384f7cdfc', class: this.getItemClasses() }, h("div", { key: 'da3f4a3b6246f50b27d2657080488135b85719be', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("div", { key: '64933e8c68ae1238581e4c81f3cae937e3199b1f', class: "page-navigation-item-content" }, !this.isHovered && (h("span", { key: 'd8369d06118533f5cdb2e228bc72cc0aafc71b79', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (h("span", { key: '852f49d37fa5d47d656aad732c46f23a4438be95', class: {
+                'page-navigation-chevron-icon': true,
+                'material-symbols-outlined': true,
+                'expanded': this.isExpanded,
+            } }, "expand_more")), h("span", { key: '5737917e070122fe1b74ff693ed7afceb262ca1d', class: "page-navigation-item-label" }, this.label), h("bh-button", { key: 'b3e29f3b6e7b64daa42a6a9a541cf0278b7dc6b5', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (h("div", { key: 'e9f386ef6ca8757d6aad84d4e90c776e9ee82be8', class: `page-navigation-children ${this.animationClass}` }, this.childItems.map((child, index) => (h("bh-page-navigation-child", { key: index, label: child.label, badge: child.badge, showBadge: child.showBadge, isActive: child.isActive, onBhItemClick: () => this.handleChildClick(index) }))))))));
+    }
+    static get watchers() { return {
+        "isExpanded": ["handleExpandedChange"]
+    }; }
+};
+BhPageNavigationMultiLevel.style = bhPageNavigationMultiLevelCss;
+const bhPageNavigationSingleLevelCss = ".page-navigation{width:320px;min-width:280px;background-color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);font-family:var(--font-inter);height:100vh;overflow-y:auto;border-right:1px solid var(--color-neutral-200);box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page-navigation-header{margin-bottom:var(--spacing-3xl)}.page-navigation-title{font-size:var(--text-xl-size);font-weight:var(--weight-semibold);line-height:var(--text-xl-line);color:var(--color-neutral-900);padding:var(--spacing-none) var(--spacing-xl);margin:0}.page-navigation-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.page-navigation-single-level{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:6px;margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent}.page-navigation-single-level.active{background-color:transparent;border:1px solid transparent}.page-navigation-single-level:hover{background-color:var(--color-neutral-50) !important}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;transition:max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child:hover:not(.active)::after{content:'';position:absolute;left:-20px;top:0;bottom:0;width:20px;background-color:var(--color-neutral-100);z-index:1;border-radius:var(--radius-sm)}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-item-content,.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal) var(--animation-ease-enter)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-single-level.active .page-navigation-item-icon,.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label,.page-navigation-child-label{font-family:'Inter', sans-serif;font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-single-level.active .page-navigation-item-label,.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-item-badge,.page-navigation-child-badge{margin-left:auto}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+const BhPageNavigationSingleLevel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Whether the item is currently active/selected
+     */
+    isActive = false;
+    /**
+     * Event emitted when the navigation item is clicked
+     */
+    bhItemClick;
+    handleClick = () => {
+        this.bhItemClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-single-level': true,
+            'page-navigation-animate-smooth': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (h(Host, { key: '1f58160e16d18bfe049035d33b48f14b11b676ae' }, h("div", { key: 'c5c44e67354359238f67df33c67e81ec2bbaf478', class: this.getItemClasses(), onClick: () => this.handleClick() }, h("div", { key: 'c3c3b27eaeb65d8325e5e92c428831af58a48448', class: "page-navigation-item-content" }, h("span", { key: 'e0e5315088e7f1c820fad38d2ae095494dc581bb', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), h("span", { key: '37d30adc75791076a84c58f92fd93ad7c16267f0', class: "page-navigation-item-label" }, this.label)))));
+    }
+};
+BhPageNavigationSingleLevel.style = bhPageNavigationSingleLevelCss;
+export { BhPageNavigationMultiLevel as bh_page_navigation_multi_level, BhPageNavigationSingleLevel as bh_page_navigation_single_level };
+//# sourceMappingURL=bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.js.map

package/dist/esm/bh-page-navigation.entry.js ADDED Viewed

@@ -0,0 +1,70 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.js';
+const bhPageNavigationCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation{width:320px;min-width:280px;background-color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);font-family:var(--font-inter);height:100vh;overflow-y:auto;border-right:1px solid var(--color-neutral-200);box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page-navigation-header{margin-bottom:var(--spacing-3xl)}.page-navigation-title{font-size:var(--text-xl-size);font-weight:var(--weight-semibold);line-height:var(--text-xl-line);color:var(--color-neutral-900);padding:var(--spacing-none) var(--spacing-xl);margin:0}.page-navigation-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+const BhPageNavigation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    /**
+     * Title displayed at the top of the navigation
+     */
+    navTitle = 'Navigation';
+    /**
+     * Array of navigation items
+     */
+    navigationItems = [];
+    /**
+     * Internal state to track navigation items
+     */
+    items = [];
+    /**
+     * Event emitted when a navigation item is clicked
+     */
+    bhItemClick;
+    handleNavigationItemsChange(newValue) {
+        this.items = [...newValue];
+    }
+    componentWillLoad() {
+        this.items = [...this.navigationItems];
+    }
+    clearAllSelections() {
+        this.items = this.items.map(item => ({
+            ...item,
+            isActive: false,
+            children: item.children?.map(child => ({ ...child, isActive: false })),
+        }));
+    }
+    handleSingleLevelClick = (itemId) => {
+        this.clearAllSelections();
+        this.items = this.items.map(item => item.id === itemId ? { ...item, isActive: true } : item);
+        this.bhItemClick.emit({ itemId });
+    };
+    handleMultiLevelToggle = (itemId) => {
+        this.items = this.items.map(item => item.id === itemId ? { ...item, isExpanded: !item.isExpanded } : item);
+    };
+    handleMultiLevelChildClick = (itemId, childIndex) => {
+        this.clearAllSelections();
+        this.items = this.items.map(item => item.id === itemId && item.children
+            ? {
+                ...item,
+                children: item.children.map((child, index) => ({
+                    ...child,
+                    isActive: index === childIndex,
+                })),
+            }
+            : item);
+        this.bhItemClick.emit({ itemId, childIndex });
+    };
+    render() {
+        return (h(Host, { key: 'e45e8ce3b4f0357f3e9a388083483a710b1480da' }, h("div", { key: 'fd2b83db1152ee0da4a3700c54bc19eb442e9b7b', class: "page-navigation" }, h("div", { key: 'f0ad1b96f3f1e04e38d4d9d440d3e5efe0d172a4', class: "page-navigation-header" }, h("h2", { key: 'd015280380f4caad460fbb919e82c774d812db98', class: "page-navigation-title" }, this.navTitle)), h("nav", { key: 'ac52f5b69c75376db23ce23de1ee76656cc392f3', class: "page-navigation-list" }, this.items.map(item => item.type === 'single' ? (h("bh-page-navigation-single-level", { key: item.id, label: item.label, icon: item.icon, isActive: item.isActive || false, onBhItemClick: () => this.handleSingleLevelClick(item.id) })) : (h("bh-page-navigation-multi-level", { key: item.id, label: item.label, icon: item.icon, childItems: item.children || [], isExpanded: item.isExpanded || false, onBhToggle: () => this.handleMultiLevelToggle(item.id), onBhChildClick: (e) => this.handleMultiLevelChildClick(item.id, e.detail) })))))));
+    }
+    static get watchers() { return {
+        "navigationItems": ["handleNavigationItemsChange"]
+    }; }
+};
+BhPageNavigation.style = bhPageNavigationCss;
+export { BhPageNavigation as bh_page_navigation };
+//# sourceMappingURL=bh-page-navigation.entry.js.map

package/dist/esm/bh-pagination-BtbbslVs.js ADDED Viewed

@@ -0,0 +1,150 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.js';
+const bhPaginationCss = ":host{display:block;font-family:var(--font-family-body, 'Inter', sans-serif)}.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4, 1rem);padding:var(--sp-3, 0.75rem) var(--sp-4, 1rem);background-color:var(--color-white, #fff);border-top:1px solid var(--color-neutral-200, #e2e4eb)}.pagination-sm{padding:var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);gap:var(--sp-3, 0.75rem)}.pagination-sm .pagination-info-text,.pagination-sm .pagination-page-size-label{font-size:0.75rem}.pagination-sm .pagination-btn{width:28px;height:28px}.pagination-sm .pagination-btn .material-symbols-outlined{font-size:18px}.pagination-sm .pagination-select{height:28px;font-size:0.75rem;padding:0 var(--sp-5, 1.25rem) 0 var(--sp-2, 0.5rem)}.pagination-md{}.pagination-lg{padding:var(--sp-4, 1rem) var(--sp-5, 1.25rem);gap:var(--sp-5, 1.25rem)}.pagination-lg .pagination-info-text,.pagination-lg .pagination-page-size-label{font-size:0.9375rem}.pagination-lg .pagination-btn{width:40px;height:40px}.pagination-lg .pagination-btn .material-symbols-outlined{font-size:24px}.pagination-lg .pagination-select{height:40px;font-size:0.9375rem}.pagination-disabled{opacity:0.5;pointer-events:none}.pagination-info{display:flex;align-items:center}.pagination-info-text{font-size:0.875rem;color:var(--color-neutral-600, #5c627a);white-space:nowrap}.pagination-controls{display:flex;align-items:center;gap:var(--sp-4, 1rem)}.pagination-page-size{display:flex;align-items:center;gap:var(--sp-2, 0.5rem)}.pagination-page-size-label{font-size:0.875rem;color:var(--color-neutral-600, #5c627a);white-space:nowrap}.pagination-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--color-white, #fff);border:1px solid var(--color-neutral-300, #c0c4d4);border-radius:var(--radius-md, 6px);padding:0 var(--sp-6, 1.5rem) 0 var(--sp-3, 0.75rem);height:32px;font-size:0.875rem;color:var(--color-neutral-900, #141624);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235c627a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;background-size:16px}.pagination-select:hover:not(:disabled){border-color:var(--color-neutral-400, #939ab4)}.pagination-select:focus{outline:none;border-color:var(--color-brand-500, #6366f1);box-shadow:0 0 0 3px var(--color-brand-100, #e0e1fc)}.pagination-select:disabled{background-color:var(--color-neutral-100, #f0f1f5);cursor:not-allowed}.pagination-nav{display:flex;align-items:center;gap:var(--sp-1, 0.25rem)}.pagination-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-md, 6px);background-color:transparent;color:var(--color-neutral-600, #5c627a);cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease}.pagination-btn .material-symbols-outlined{font-size:20px;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.pagination-btn:hover:not(:disabled){background-color:var(--color-neutral-100, #f0f1f5);color:var(--color-neutral-900, #141624)}.pagination-btn:focus{outline:none;box-shadow:0 0 0 2px var(--color-brand-100, #e0e1fc)}.pagination-btn:active:not(:disabled){background-color:var(--color-neutral-200, #e2e4eb)}.pagination-btn:disabled{opacity:0.4;cursor:not-allowed}@media (max-width: 640px){.pagination{flex-direction:column;align-items:stretch;gap:var(--sp-3, 0.75rem)}.pagination-info{justify-content:center}.pagination-controls{justify-content:center;flex-wrap:wrap}.pagination-page-size{width:100%;justify-content:center}.pagination-nav{justify-content:center}}";
+const BhPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhPageChange = createEvent(this, "bhPageChange");
+        this.bhPageSizeChange = createEvent(this, "bhPageSizeChange");
+    }
+    /**
+     * Current page (1-indexed)
+     */
+    page = 1;
+    /**
+     * Total number of items
+     */
+    totalItems = 0;
+    /**
+     * Number of items per page
+     */
+    pageSize = 10;
+    /**
+     * Available page size options
+     */
+    pageSizeOptions = [10, 25, 50, 100];
+    /**
+     * Show page size selector
+     */
+    showPageSizeSelector = true;
+    /**
+     * Show item count info (e.g., "Showing 1 to 10 of 100 results")
+     */
+    showItemCount = true;
+    /**
+     * Show first/last page buttons
+     */
+    showFirstLastButtons = true;
+    /**
+     * Size variant of the pagination
+     */
+    size = 'md';
+    /**
+     * Whether the pagination is disabled
+     */
+    disabled = false;
+    /**
+     * Label for "Rows per page" text (for i18n)
+     */
+    rowsPerPageLabel = 'Rows per page:';
+    /**
+     * Label template for showing results (use {start}, {end}, {total} placeholders)
+     */
+    showingResultsLabel = 'Showing {start} to {end} of {total} results';
+    /**
+     * Label template for page info when total items unknown (use {page}, {totalPages} placeholders)
+     */
+    pageInfoLabel = 'Page {page} of {totalPages}';
+    internalPage = 1;
+    internalPageSize = 10;
+    /**
+     * Emitted when the page changes
+     */
+    bhPageChange;
+    /**
+     * Emitted when page size changes
+     */
+    bhPageSizeChange;
+    componentWillLoad() {
+        this.internalPage = this.page;
+        this.internalPageSize = this.pageSize;
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.totalItems / this.internalPageSize));
+    }
+    get startItem() {
+        if (this.totalItems === 0)
+            return 0;
+        return (this.internalPage - 1) * this.internalPageSize + 1;
+    }
+    get endItem() {
+        return Math.min(this.internalPage * this.internalPageSize, this.totalItems);
+    }
+    get canGoPrevious() {
+        return this.internalPage > 1 && !this.disabled;
+    }
+    get canGoNext() {
+        return this.internalPage < this.totalPages && !this.disabled;
+    }
+    goToPage(newPage) {
+        if (this.disabled)
+            return;
+        const page = Math.max(1, Math.min(newPage, this.totalPages));
+        if (page !== this.internalPage) {
+            this.internalPage = page;
+            this.page = page;
+            this.bhPageChange.emit({ page, pageSize: this.internalPageSize });
+        }
+    }
+    handlePageSizeChange(event) {
+        if (this.disabled)
+            return;
+        const select = event.target;
+        const newPageSize = parseInt(select.value, 10);
+        if (newPageSize !== this.internalPageSize) {
+            this.internalPageSize = newPageSize;
+            this.pageSize = newPageSize;
+            // Reset to page 1 when page size changes, or adjust if current page is now out of bounds
+            const newTotalPages = Math.max(1, Math.ceil(this.totalItems / newPageSize));
+            const newPage = Math.min(this.internalPage, newTotalPages);
+            if (newPage !== this.internalPage) {
+                this.internalPage = newPage;
+                this.page = newPage;
+            }
+            this.bhPageSizeChange.emit({ page: this.internalPage, pageSize: newPageSize });
+        }
+    }
+    goToFirst = () => this.goToPage(1);
+    goToPrevious = () => this.goToPage(this.internalPage - 1);
+    goToNext = () => this.goToPage(this.internalPage + 1);
+    goToLast = () => this.goToPage(this.totalPages);
+    getInfoText() {
+        if (this.totalItems === 0) {
+            return 'No results';
+        }
+        if (this.showItemCount && this.totalItems > 0) {
+            return this.showingResultsLabel
+                .replace('{start}', String(this.startItem))
+                .replace('{end}', String(this.endItem))
+                .replace('{total}', String(this.totalItems));
+        }
+        return this.pageInfoLabel
+            .replace('{page}', String(this.internalPage))
+            .replace('{totalPages}', String(this.totalPages));
+    }
+    render() {
+        const paginationClasses = {
+            'pagination': true,
+            [`pagination-${this.size}`]: true,
+            'pagination-disabled': this.disabled,
+        };
+        return (h("div", { key: '9e9cbcde6a010fdbbbd809a3f576b40fe7f905cc', class: paginationClasses, role: "navigation", "aria-label": "Pagination" }, h("div", { key: '212d0b1627b0897ceecd0298e8928a4ec11441d7', class: "pagination-info" }, h("span", { key: 'ab37b52387fd66f583b67fd96ce396b6649d31d0', class: "pagination-info-text" }, this.getInfoText())), h("div", { key: '46793889c3efa38e28171759ea3fb2b22ddcb03c', class: "pagination-controls" }, this.showPageSizeSelector && (h("div", { key: '87eccc7848ef35ad61605d2b9539cf40add8a79c', class: "pagination-page-size" }, h("span", { key: 'b3ff61dceff7cc57240c724150fee5b199a17ed8', class: "pagination-page-size-label" }, this.rowsPerPageLabel), h("select", { key: 'ab2ddd0f5f2b3501ff06d5717f2ed543a3446651', class: "pagination-select", onChange: (e) => this.handlePageSizeChange(e), disabled: this.disabled, "aria-label": "Select page size" }, this.pageSizeOptions.map((size) => (h("option", { key: size, value: String(size), selected: size === this.internalPageSize }, size)))))), h("div", { key: 'fddb9153daa2703afbd384f972332040c76efa25', class: "pagination-nav" }, this.showFirstLastButtons && (h("button", { key: '5637468db69936eb008bf96d8e77ca8c860fa9e2', type: "button", class: "pagination-btn", onClick: this.goToFirst, disabled: !this.canGoPrevious, "aria-label": "Go to first page" }, h("span", { key: '37699a8026bdecf7858d3c5a0aa313f99acd6d28', class: "material-symbols-outlined" }, "first_page"))), h("button", { key: '590190edfc67218a19f647eb562b233d598cbbea', type: "button", class: "pagination-btn", onClick: this.goToPrevious, disabled: !this.canGoPrevious, "aria-label": "Go to previous page" }, h("span", { key: '45881aefbbc5e51adaa451ba3454a73a684613cb', class: "material-symbols-outlined" }, "chevron_left")), h("button", { key: '5d0592a32bba88bbe60f41318d3cd1d03a103f5d', type: "button", class: "pagination-btn", onClick: this.goToNext, disabled: !this.canGoNext, "aria-label": "Go to next page" }, h("span", { key: 'ae875c91c0d56757df0a78dcd645958e08e3ebde', class: "material-symbols-outlined" }, "chevron_right")), this.showFirstLastButtons && (h("button", { key: 'd97749c9c057100f145546b8a163681eb29b7358', type: "button", class: "pagination-btn", onClick: this.goToLast, disabled: !this.canGoNext, "aria-label": "Go to last page" }, h("span", { key: '58adc8bcac84c4af6bc67650e2fef83dfbeaa1e7', class: "material-symbols-outlined" }, "last_page")))))));
+    }
+};
+BhPagination.style = bhPaginationCss;
+export { BhPagination as B };
+//# sourceMappingURL=bh-pagination-BtbbslVs.js.map
+//# sourceMappingURL=bh-pagination-BtbbslVs.js.map

package/dist/esm/bh-pagination-BtbbslVs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bh-pagination-BtbbslVs.js","sources":["src/components/bh-pagination/bh-pagination.css?tag=bh-pagination&encapsulation=shadow","src/components/bh-pagination/bh-pagination.tsx"],"sourcesContent":["/* =============================================================================\n bh-pagination Component Styles\n ============================================================================= */\n\n:host {\n display: block;\n font-family: var(--font-family-body, 'Inter', sans-serif);\n}\n\n/* -----------------------------------------------------------------------------\n Base Pagination Container\n ----------------------------------------------------------------------------- */\n\n.pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--sp-4, 1rem);\n padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);\n background-color: var(--color-white, #fff);\n border-top: 1px solid var(--color-neutral-200, #e2e4eb);\n}\n\n/* -----------------------------------------------------------------------------\n Size Variants\n ----------------------------------------------------------------------------- */\n\n.pagination-sm {\n padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);\n gap: var(--sp-3, 0.75rem);\n}\n\n.pagination-sm .pagination-info-text,\n.pagination-sm .pagination-page-size-label {\n font-size: 0.75rem;\n}\n\n.pagination-sm .pagination-btn {\n width: 28px;\n height: 28px;\n}\n\n.pagination-sm .pagination-btn .material-symbols-outlined {\n font-size: 18px;\n}\n\n.pagination-sm .pagination-select {\n height: 28px;\n font-size: 0.75rem;\n padding: 0 var(--sp-5, 1.25rem) 0 var(--sp-2, 0.5rem);\n}\n\n.pagination-md {\n /* Default - no changes needed */\n}\n\n.pagination-lg {\n padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);\n gap: var(--sp-5, 1.25rem);\n}\n\n.pagination-lg .pagination-info-text,\n.pagination-lg .pagination-page-size-label {\n font-size: 0.9375rem;\n}\n\n.pagination-lg .pagination-btn {\n width: 40px;\n height: 40px;\n}\n\n.pagination-lg .pagination-btn .material-symbols-outlined {\n font-size: 24px;\n}\n\n.pagination-lg .pagination-select {\n height: 40px;\n font-size: 0.9375rem;\n}\n\n/* -----------------------------------------------------------------------------\n Disabled State\n ----------------------------------------------------------------------------- */\n\n.pagination-disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* -----------------------------------------------------------------------------\n Info Section\n ----------------------------------------------------------------------------- */\n\n.pagination-info {\n display: flex;\n align-items: center;\n}\n\n.pagination-info-text {\n font-size: 0.875rem;\n color: var(--color-neutral-600, #5c627a);\n white-space: nowrap;\n}\n\n/* -----------------------------------------------------------------------------\n Controls Section\n ----------------------------------------------------------------------------- */\n\n.pagination-controls {\n display: flex;\n align-items: center;\n gap: var(--sp-4, 1rem);\n}\n\n/* -----------------------------------------------------------------------------\n Page Size Selector\n ----------------------------------------------------------------------------- */\n\n.pagination-page-size {\n display: flex;\n align-items: center;\n gap: var(--sp-2, 0.5rem);\n}\n\n.pagination-page-size-label {\n font-size: 0.875rem;\n color: var(--color-neutral-600, #5c627a);\n white-space: nowrap;\n}\n\n.pagination-select {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-color: var(--color-white, #fff);\n border: 1px solid var(--color-neutral-300, #c0c4d4);\n border-radius: var(--radius-md, 6px);\n padding: 0 var(--sp-6, 1.5rem) 0 var(--sp-3, 0.75rem);\n height: 32px;\n font-size: 0.875rem;\n color: var(--color-neutral-900, #141624);\n cursor: pointer;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n\n /* Custom dropdown arrow */\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235c627a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 4px center;\n background-size: 16px;\n}\n\n.pagination-select:hover:not(:disabled) {\n border-color: var(--color-neutral-400, #939ab4);\n}\n\n.pagination-select:focus {\n outline: none;\n border-color: var(--color-brand-500, #6366f1);\n box-shadow: 0 0 0 3px var(--color-brand-100, #e0e1fc);\n}\n\n.pagination-select:disabled {\n background-color: var(--color-neutral-100, #f0f1f5);\n cursor: not-allowed;\n}\n\n/* -----------------------------------------------------------------------------\n Navigation Buttons\n ----------------------------------------------------------------------------- */\n\n.pagination-nav {\n display: flex;\n align-items: center;\n gap: var(--sp-1, 0.25rem);\n}\n\n.pagination-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--radius-md, 6px);\n background-color: transparent;\n color: var(--color-neutral-600, #5c627a);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.pagination-btn .material-symbols-outlined {\n font-size: 20px;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.pagination-btn:hover:not(:disabled) {\n background-color: var(--color-neutral-100, #f0f1f5);\n color: var(--color-neutral-900, #141624);\n}\n\n.pagination-btn:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-brand-100, #e0e1fc);\n}\n\n.pagination-btn:active:not(:disabled) {\n background-color: var(--color-neutral-200, #e2e4eb);\n}\n\n.pagination-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n/* -----------------------------------------------------------------------------\n Responsive Adjustments\n ----------------------------------------------------------------------------- */\n\n@media (max-width: 640px) {\n .pagination {\n flex-direction: column;\n align-items: stretch;\n gap: var(--sp-3, 0.75rem);\n }\n\n .pagination-info {\n justify-content: center;\n }\n\n .pagination-controls {\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .pagination-page-size {\n width: 100%;\n justify-content: center;\n }\n\n .pagination-nav {\n justify-content: center;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\n\nexport type PaginationSize = 'sm' | 'md' | 'lg';\n\nexport interface PaginationChangeEvent {\n page: number;\n pageSize: number;\n}\n\n@Component({\n tag: 'bh-pagination',\n styleUrl: 'bh-pagination.css',\n shadow: true,\n})\nexport class BhPagination {\n /**\n * Current page (1-indexed)\n */\n @Prop({ mutable: true }) page: number = 1;\n\n /**\n * Total number of items\n */\n @Prop() totalItems: number = 0;\n\n /**\n * Number of items per page\n */\n @Prop({ mutable: true }) pageSize: number = 10;\n\n /**\n * Available page size options\n */\n @Prop() pageSizeOptions: number[] = [10, 25, 50, 100];\n\n /**\n * Show page size selector\n */\n @Prop() showPageSizeSelector: boolean = true;\n\n /**\n * Show item count info (e.g., \"Showing 1 to 10 of 100 results\")\n */\n @Prop() showItemCount: boolean = true;\n\n /**\n * Show first/last page buttons\n */\n @Prop() showFirstLastButtons: boolean = true;\n\n /**\n * Size variant of the pagination\n */\n @Prop() size: PaginationSize = 'md';\n\n /**\n * Whether the pagination is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Label for \"Rows per page\" text (for i18n)\n */\n @Prop() rowsPerPageLabel: string = 'Rows per page:';\n\n /**\n * Label template for showing results (use {start}, {end}, {total} placeholders)\n */\n @Prop() showingResultsLabel: string = 'Showing {start} to {end} of {total} results';\n\n /**\n * Label template for page info when total items unknown (use {page}, {totalPages} placeholders)\n */\n @Prop() pageInfoLabel: string = 'Page {page} of {totalPages}';\n\n @State() internalPage: number = 1;\n @State() internalPageSize: number = 10;\n\n /**\n * Emitted when the page changes\n */\n @Event() bhPageChange!: EventEmitter<PaginationChangeEvent>;\n\n /**\n * Emitted when page size changes\n */\n @Event() bhPageSizeChange!: EventEmitter<PaginationChangeEvent>;\n\n componentWillLoad() {\n this.internalPage = this.page;\n this.internalPageSize = this.pageSize;\n }\n\n private get totalPages(): number {\n return Math.max(1, Math.ceil(this.totalItems / this.internalPageSize));\n }\n\n private get startItem(): number {\n if (this.totalItems === 0) return 0;\n return (this.internalPage - 1) * this.internalPageSize + 1;\n }\n\n private get endItem(): number {\n return Math.min(this.internalPage * this.internalPageSize, this.totalItems);\n }\n\n private get canGoPrevious(): boolean {\n return this.internalPage > 1 && !this.disabled;\n }\n\n private get canGoNext(): boolean {\n return this.internalPage < this.totalPages && !this.disabled;\n }\n\n private goToPage(newPage: number) {\n if (this.disabled) return;\n\n const page = Math.max(1, Math.min(newPage, this.totalPages));\n if (page !== this.internalPage) {\n this.internalPage = page;\n this.page = page;\n this.bhPageChange.emit({ page, pageSize: this.internalPageSize });\n }\n }\n\n private handlePageSizeChange(event: Event) {\n if (this.disabled) return;\n\n const select = event.target as HTMLSelectElement;\n const newPageSize = parseInt(select.value, 10);\n\n if (newPageSize !== this.internalPageSize) {\n this.internalPageSize = newPageSize;\n this.pageSize = newPageSize;\n\n // Reset to page 1 when page size changes, or adjust if current page is now out of bounds\n const newTotalPages = Math.max(1, Math.ceil(this.totalItems / newPageSize));\n const newPage = Math.min(this.internalPage, newTotalPages);\n\n if (newPage !== this.internalPage) {\n this.internalPage = newPage;\n this.page = newPage;\n }\n\n this.bhPageSizeChange.emit({ page: this.internalPage, pageSize: newPageSize });\n }\n }\n\n private goToFirst = () => this.goToPage(1);\n private goToPrevious = () => this.goToPage(this.internalPage - 1);\n private goToNext = () => this.goToPage(this.internalPage + 1);\n private goToLast = () => this.goToPage(this.totalPages);\n\n private getInfoText(): string {\n if (this.totalItems === 0) {\n return 'No results';\n }\n\n if (this.showItemCount && this.totalItems > 0) {\n return this.showingResultsLabel\n .replace('{start}', String(this.startItem))\n .replace('{end}', String(this.endItem))\n .replace('{total}', String(this.totalItems));\n }\n\n return this.pageInfoLabel\n .replace('{page}', String(this.internalPage))\n .replace('{totalPages}', String(this.totalPages));\n }\n\n render() {\n const paginationClasses = {\n 'pagination': true,\n [`pagination-${this.size}`]: true,\n 'pagination-disabled': this.disabled,\n };\n\n return (\n <div class={paginationClasses} role=\"navigation\" aria-label=\"Pagination\">\n {/* Info section */}\n <div class=\"pagination-info\">\n <span class=\"pagination-info-text\">{this.getInfoText()}</span>\n </div>\n\n {/* Controls section */}\n <div class=\"pagination-controls\">\n {/* Page size selector */}\n {this.showPageSizeSelector && (\n <div class=\"pagination-page-size\">\n <span class=\"pagination-page-size-label\">{this.rowsPerPageLabel}</span>\n <select\n class=\"pagination-select\"\n onChange={(e) => this.handlePageSizeChange(e)}\n disabled={this.disabled}\n aria-label=\"Select page size\"\n >\n {this.pageSizeOptions.map((size) => (\n <option key={size} value={String(size)} selected={size === this.internalPageSize}>\n {size}\n </option>\n ))}\n </select>\n </div>\n )}\n\n {/* Navigation buttons */}\n <div class=\"pagination-nav\">\n {this.showFirstLastButtons && (\n <button\n type=\"button\"\n class=\"pagination-btn\"\n onClick={this.goToFirst}\n disabled={!this.canGoPrevious}\n aria-label=\"Go to first page\"\n >\n <span class=\"material-symbols-outlined\">first_page</span>\n </button>\n )}\n\n <button\n type=\"button\"\n class=\"pagination-btn\"\n onClick={this.goToPrevious}\n disabled={!this.canGoPrevious}\n aria-label=\"Go to previous page\"\n >\n <span class=\"material-symbols-outlined\">chevron_left</span>\n </button>\n\n <button\n type=\"button\"\n class=\"pagination-btn\"\n onClick={this.goToNext}\n disabled={!this.canGoNext}\n aria-label=\"Go to next page\"\n >\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </button>\n\n {this.showFirstLastButtons && (\n <button\n type=\"button\"\n class=\"pagination-btn\"\n onClick={this.goToLast}\n disabled={!this.canGoNext}\n aria-label=\"Go to last page\"\n >\n <span class=\"material-symbols-outlined\">last_page</span>\n </button>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}