@mhmo91/schmancy 0.5.20 → 0.5.21

package/dist/navigation-rail-C8OOb0V3.js

@@ -0,0 +1,564 @@
+import { BehaviorSubject as y, merge as m, fromEvent as v, takeUntil as g } from "rxjs";
+import "lit/directives/class-map.js";
+import "lit/directives/style-map.js";
+import { property as s, state as f, customElement as x, queryAssignedElements as $ } from "lit/decorators.js";
+import "./tailwind.mixin-9XFzAXGw.js";
+import { $ as w } from "./litElement.mixin-Bv6DGuhe.js";
+import { css as k, html as c } from "lit";
+import { when as u } from "lit/directives/when.js";
+import { tap as d, delay as I, distinctUntilChanged as A } from "rxjs/operators";
+var V = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, e, i, a) => {
+  for (var p, o = a > 1 ? void 0 : a ? S(e, i) : e, b = t.length - 1; b >= 0; b--) (p = t[b]) && (o = (a ? p(e, i, o) : p(o)) || o);
+  return a && o && V(e, i, o), o;
+};
+let n = class extends w(k`
+	:host {
+		display: block;
+		position: relative;
+		outline: none;
+		--rail-item-height: 56px;
+		--rail-item-icon-size: 24px;
+		--rail-item-show-label: block;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: var(--rail-item-height);
+		width: 100%;
+		border-radius: 16px;
+		cursor: pointer;
+		position: relative;
+		box-sizing: border-box;
+		color: var(--schmancy-sys-color-surface-onVariant);
+		user-select: none;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		padding: 12px 0;
+		gap: 4px;
+	}
+
+	/* Hover state */
+	.container:hover {
+		background-color: var(--schmancy-sys-color-surface-highest);
+	}
+
+	/* Focus state */
+	:host(:focus-visible) .container {
+		outline: 2px solid var(--schmancy-sys-color-primary-default);
+		outline-offset: 2px;
+	}
+
+	/* Active indicator - positioned behind icon only */
+	.icon-container {
+		position: relative;
+	}
+
+	.indicator {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%) scale(0);
+		width: 56px;
+		height: 32px;
+		border-radius: 16px;
+		background-color: var(--schmancy-sys-color-secondary-container);
+		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		z-index: 0;
+	}
+
+	:host([active]) .indicator,
+	:host([selected]) .indicator {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	:host([active]) .container,
+	:host([selected]) .container {
+		color: var(--schmancy-sys-color-secondary-onContainer);
+	}
+
+
+	/* Icon styles */
+	.icon-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: auto;
+		min-width: 56px;
+		height: 32px;
+		flex-shrink: 0;
+		position: relative;
+		z-index: 1;
+	}
+
+	.icon {
+		font-family: 'Material Symbols Outlined';
+		font-size: var(--rail-item-icon-size);
+		line-height: 1;
+		position: relative;
+		z-index: 1;
+		font-variation-settings:
+			'FILL' 0,
+			'wght' 400,
+			'GRAD' 0,
+			'opsz' 24;
+	}
+
+	:host([active]) .icon,
+	:host([selected]) .icon {
+		font-variation-settings:
+			'FILL' 1,
+			'wght' 400,
+			'GRAD' 0,
+			'opsz' 24;
+	}
+
+	/* Label styles */
+	.label {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 16px;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		z-index: 1;
+		display: var(--rail-item-show-label, block);
+		max-width: 56px;
+		padding: 0 4px;
+	}
+
+
+	/* Badge styles */
+	.badge {
+		position: absolute;
+		top: 8px;
+		right: 12px;
+		min-width: 16px;
+		height: 16px;
+		border-radius: 8px;
+		background-color: var(--schmancy-sys-color-error-default);
+		color: var(--schmancy-sys-color-error-on);
+		font-size: 11px;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 4px;
+		box-sizing: border-box;
+		z-index: 2;
+		animation: badge-pulse 2s infinite;
+	}
+
+	@keyframes badge-pulse {
+		0%, 100% { transform: scale(1); }
+		50% { transform: scale(1.1); }
+	}
+
+	/* Nested items (for sub-navigation) */
+	:host([nested]) {
+		--rail-item-height: 48px;
+		--rail-item-icon-size: 20px;
+	}
+
+	:host([nested]) .container {
+		padding-left: 32px;
+	}
+
+	/* Disabled state */
+	:host([disabled]) {
+		pointer-events: none;
+		opacity: 0.38;
+	}
+
+	/* Ripple effect */
+	.ripple {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: inherit;
+		overflow: hidden;
+		z-index: 0;
+	}
+
+	.ripple::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 0;
+		height: 0;
+		border-radius: 50%;
+		background: currentColor;
+		opacity: 0;
+		transform: translate(-50%, -50%);
+		transition: width 0.6s, height 0.6s, opacity 0.6s;
+	}
+
+	:host(:active) .ripple::before {
+		width: 200%;
+		height: 200%;
+		opacity: 0.12;
+	}
+
+	/* Tooltip styles (shown via title attribute) */
+	:host([title]:hover)::after {
+		content: attr(title);
+		position: absolute;
+		left: calc(100% + 8px);
+		top: 50%;
+		transform: translateY(-50%);
+		background: var(--schmancy-sys-color-inverseSurface);
+		color: var(--schmancy-sys-color-inverseOnSurface);
+		padding: 4px 8px;
+		border-radius: 4px;
+		font-size: 12px;
+		white-space: nowrap;
+		z-index: 1000;
+		pointer-events: none;
+		animation: tooltip-fade-in 0.2s ease;
+	}
+
+	@keyframes tooltip-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(-50%) translateX(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(-50%) translateX(0);
+		}
+	}
+
+	/* Group item styles */
+	:host([group]) {
+		margin-bottom: 8px;
+	}
+
+	:host([group])::after {
+		content: '';
+		position: absolute;
+		bottom: -4px;
+		left: 12px;
+		right: 12px;
+		height: 1px;
+		background: var(--schmancy-sys-color-outlineVariant);
+		opacity: 0.12;
+	}
+`) {
+  constructor() {
+    super(...arguments), this.hovering$ = new y(!1), this.pressing$ = new y(!1), this.active$ = new y(!1), this.icon = "", this.label = "", this.value = "", this.badge = "", this.badgeVariant = "error", this.showLabel = !1, this.disabled = !1, this.nested = !1, this.group = !1, this.showRipple = !1;
+  }
+  get active() {
+    return this.active$.value;
+  }
+  set active(t) {
+    this.active$.next(t);
+  }
+  get selected() {
+    return this.active;
+  }
+  set selected(t) {
+    this.active = t;
+  }
+  connectedCallback() {
+    super.connectedCallback(), m(v(this, "mouseenter").pipe(d(() => this.hovering$.next(!0))), v(this, "mouseleave").pipe(d(() => this.hovering$.next(!1)))).pipe(g(this.disconnecting)).subscribe(), m(v(this, "mousedown").pipe(d(() => this.pressing$.next(!0))), v(this, "mouseup").pipe(d(() => this.pressing$.next(!1))), v(this, "mouseleave").pipe(d(() => this.pressing$.next(!1)))).pipe(g(this.disconnecting)).subscribe(), this.pressing$.pipe(d((t) => {
+      t && !this.disabled && (this.showRipple = !0);
+    }), I(600), d(() => this.showRipple = !1), g(this.disconnecting)).subscribe(), this.active$.pipe(A(), d((t) => {
+      this.requestUpdate(), this.setAttribute("aria-selected", String(t)), this.setAttribute("tabindex", t ? "0" : "-1");
+    }), g(this.disconnecting)).subscribe(), this.setAttribute("role", "listitem"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", this.active ? "0" : "-1");
+  }
+  updated(t) {
+    super.updated(t), t.has("disabled") && this.setAttribute("aria-disabled", String(this.disabled)), t.has("label") && this.setAttribute("aria-label", this.label);
+  }
+  handleClick(t) {
+    if (this.disabled) return t.preventDefault(), void t.stopPropagation();
+    this.dispatchEvent(new CustomEvent("navigate", { detail: this.value || this.label, bubbles: !0, composed: !0 }));
+  }
+  handleKeyDown(t) {
+    this.disabled || t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this.click());
+  }
+  render() {
+    const t = this.querySelector('[slot="icon"]'), e = this.querySelector(":not([slot])"), i = this.querySelector('[slot="badge"]'), a = { container: !0, rippling: this.showRipple }, p = { "background-color": `var(--schmancy-sys-color-${this.badgeVariant}-default)`, color: `var(--schmancy-sys-color-${this.badgeVariant}-on)` };
+    return c`
+			<div
+				class=${this.classMap(a)}
+				part="container"
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+			>
+				<span class="ripple" aria-hidden="true"></span>
+
+				${u(e, () => c`<slot></slot>`, () => c`
+						<div class="icon-container" part="icon">
+							<span class="indicator" part="indicator" aria-hidden="true"></span>
+							${u(t, () => c`<slot name="icon"></slot>`, () => u(this.icon, () => c`<span class="icon">${this.icon}</span>`))}
+						</div>
+
+						${u(this.label, () => c`<span class="label" part="label">${this.label}</span>`)}
+					`)}
+
+				${u(this.badge, () => c`
+						${u(i, () => c`<slot name="badge"></slot>`, () => c`
+								<span
+									class="badge"
+									part="badge"
+									style=${this.styleMap(p)}
+									aria-label="${this.badge} notifications"
+								>
+									${this.badge}
+								</span>
+							`)}
+					`)}
+			</div>
+		`;
+  }
+};
+r([s({ type: String })], n.prototype, "icon", 2), r([s({ type: String })], n.prototype, "label", 2), r([s({ type: String })], n.prototype, "value", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "active", 1), r([s({ type: Boolean, reflect: !0 })], n.prototype, "selected", 1), r([s({ type: String })], n.prototype, "badge", 2), r([s({ type: String })], n.prototype, "badgeVariant", 2), r([s({ type: Boolean, attribute: "show-label" })], n.prototype, "showLabel", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "disabled", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "nested", 2), r([s({ type: Boolean, reflect: !0 })], n.prototype, "group", 2), r([f()], n.prototype, "showRipple", 2), n = r([x("schmancy-navigation-rail-item")], n);
+var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, h = (t, e, i, a) => {
+  for (var p, o = a > 1 ? void 0 : a ? C(e, i) : e, b = t.length - 1; b >= 0; b--) (p = t[b]) && (o = (a ? p(e, i, o) : p(o)) || o);
+  return a && o && z(e, i, o), o;
+};
+let l = class extends w(k`
+	:host {
+		display: flex;
+		flex-direction: column;
+		width: 80px;
+		height: 100%;
+		background-color: var(--schmancy-sys-color-surface-container);
+		color: var(--schmancy-sys-color-surface-on);
+		box-sizing: border-box;
+		position: relative;
+		overflow: visible;
+	}
+
+	/* Rail container */
+	.rail {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		padding: 8px 12px;
+		gap: 4px;
+		box-sizing: border-box;
+	}
+
+	/* Header section */
+	.header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4px;
+		margin-bottom: 8px;
+	}
+
+	/* Navigation container */
+	.nav {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		overflow-y: auto;
+		overflow-x: hidden;
+		scrollbar-width: thin;
+		scrollbar-color: var(--schmancy-sys-color-surface-onVariant) transparent;
+	}
+
+	.nav::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	.nav::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.nav::-webkit-scrollbar-thumb {
+		background-color: var(--schmancy-sys-color-surface-onVariant);
+		border-radius: 2px;
+		opacity: 0.5;
+	}
+
+	/* Footer section */
+	.footer {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4px;
+		margin-top: auto;
+		padding-top: 8px;
+	}
+
+	/* FAB styles */
+	::slotted([slot="fab"]) {
+		margin-bottom: 8px;
+	}
+
+	/* Menu button styles */
+	::slotted([slot="menu"]) {
+		margin-bottom: 12px;
+	}
+
+	/* Alignment variants */
+	:host([alignment="top"]) .nav {
+		justify-content: flex-start;
+	}
+
+	:host([alignment="center"]) .nav {
+		justify-content: center;
+	}
+
+	:host([alignment="bottom"]) .nav {
+		justify-content: flex-end;
+	}
+
+	/* Label visibility states */
+	:host([label-visibility="none"]) ::slotted(schmancy-navigation-rail-item) {
+		--rail-item-show-label: none;
+	}
+
+	:host([label-visibility="selected"]) ::slotted(schmancy-navigation-rail-item:not([active])) {
+		--rail-item-show-label: none;
+	}
+
+
+	/* Group header styles */
+	::slotted(.group-header) {
+		padding: 8px 12px;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--schmancy-sys-color-surface-onVariant);
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* Divider styles */
+	::slotted(schmancy-divider) {
+		margin: 8px 0;
+	}
+
+	/* Responsive behavior */
+	@media (max-width: 768px) {
+		:host {
+			width: 56px;
+		}
+
+		.rail {
+			padding: 8px;
+		}
+	}
+`) {
+  constructor() {
+    super(...arguments), this.activeIndex$ = new y(-1), this._activeValue = "", this.labelVisibility = "all", this.alignment = "top", this.showTooltips = !0, this.keyboardNavigation = !0, this.focusedIndex = -1;
+  }
+  get activeIndex() {
+    return this.activeIndex$.value;
+  }
+  set activeIndex(t) {
+    this.activeIndex$.next(t);
+  }
+  get activeValue() {
+    return this._activeValue;
+  }
+  set activeValue(t) {
+    this._activeValue = t, this.updateActiveByValue(t);
+  }
+  get navigationItems() {
+    return this.allElements.filter((t) => t.tagName === "SCHMANCY-NAVIGATION-RAIL-ITEM");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.keyboardNavigation && this.addEventListener("keydown", this.handleKeyDown), this.activeIndex$.pipe(A(), d((t) => this.updateActiveStates(t)), g(this.disconnecting)).subscribe(), this.setupNavigateListener(), this.updateLabelVisibility(), this.setAttribute("role", "navigation"), this.setAttribute("aria-label", "Main navigation");
+  }
+  updated(t) {
+    super.updated(t), t.has("labelVisibility") && this.updateLabelVisibility(), t.has("activeValue") && this.updateActiveByValue(this.activeValue);
+  }
+  updateActiveStates(t) {
+    this.navigationItems.forEach((e, i) => {
+      const a = i === t;
+      e.active = a, e.setAttribute("aria-selected", String(a)), e.setAttribute("tabindex", a ? "0" : "-1"), a && (this._activeValue = e.value || e.label || "");
+    });
+  }
+  updateActiveByValue(t) {
+    const e = this.navigationItems.findIndex((i) => i.getAttribute("value") === t || i.label === t);
+    e >= 0 && (this.activeIndex = e);
+  }
+  updateLabelVisibility() {
+    this.navigationItems.forEach((t, e) => {
+      const i = this.labelVisibility === "all" || this.labelVisibility === "selected" && e === this.activeIndex;
+      t.showLabel = i, this.showTooltips && !i && t.label ? t.setAttribute("title", t.label) : t.removeAttribute("title");
+    });
+  }
+  handleKeyDown(t) {
+    const e = this.navigationItems;
+    if (e.length === 0) return;
+    let i = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex;
+    switch (t.key) {
+      case "ArrowDown":
+        t.preventDefault(), i = (i + 1) % e.length;
+        break;
+      case "ArrowUp":
+        t.preventDefault(), i = i <= 0 ? e.length - 1 : i - 1;
+        break;
+      case "Home":
+        t.preventDefault(), i = 0;
+        break;
+      case "End":
+        t.preventDefault(), i = e.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        return t.preventDefault(), void (i >= 0 && e[i].click());
+      default:
+        return;
+    }
+    this.focusedIndex = i, e[i].focus();
+  }
+  handleFabClick(t) {
+    t.stopPropagation(), this.dispatchEvent(new CustomEvent("fab-click", { bubbles: !0, composed: !0 }));
+  }
+  handleMenuClick(t) {
+    t.stopPropagation(), this.dispatchEvent(new CustomEvent("menu-click", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return c`
+			<div class="rail" part="rail">
+				<div class="header" part="header">
+					<slot name="fab" @click=${this.handleFabClick}></slot>
+					<slot name="menu" @click=${this.handleMenuClick}></slot>
+					<slot name="header"></slot>
+				</div>
+
+				<nav class="nav" part="nav" role="list">
+					<slot @slotchange=${this.handleSlotChange}></slot>
+				</nav>
+
+				<div class="footer" part="footer">
+					<slot name="footer"></slot>
+				</div>
+			</div>
+		`;
+  }
+  setupNavigateListener() {
+    this.addEventListener("navigate", (t) => {
+      if (t instanceof CustomEvent) {
+        const e = t.detail, i = this.navigationItems.findIndex((a) => a.value === e || a.label === e);
+        i >= 0 && (this.activeIndex = i, this._activeValue = e);
+      }
+    });
+  }
+  handleSlotChange() {
+    this.updateLabelVisibility(), this.updateActiveStates(this.activeIndex), this.navigationItems.forEach((t, e) => {
+      t.setAttribute("role", "listitem"), t.hasAttribute("tabindex") || t.setAttribute("tabindex", e === this.activeIndex ? "0" : "-1");
+    });
+  }
+};
+h([s({ type: Number })], l.prototype, "activeIndex", 1), h([s({ type: String })], l.prototype, "activeValue", 1), h([s({ type: String, attribute: "label-visibility", reflect: !0 })], l.prototype, "labelVisibility", 2), h([s({ type: String, reflect: !0 })], l.prototype, "alignment", 2), h([s({ type: Boolean })], l.prototype, "showTooltips", 2), h([s({ type: Boolean })], l.prototype, "keyboardNavigation", 2), h([f()], l.prototype, "focusedIndex", 2), h([$({ flatten: !0 })], l.prototype, "allElements", 2), l = h([x("schmancy-navigation-rail")], l);
+export {
+  n as S,
+  l as a
+};
+//# sourceMappingURL=navigation-rail-C8OOb0V3.js.map

package/dist/navigation-rail-C8OOb0V3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-C8OOb0V3.js","sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, state } from 'lit/decorators.js'\r\nimport { when } from 'lit/directives/when.js'\r\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\r\nimport { tap, delay, distinctUntilChanged } from 'rxjs/operators'\r\n\r\nexport type NavigationRailItemClickEvent = CustomEvent<{\r\n\ticon: string\r\n\tlabel: string\r\n\tvalue: string\r\n\tactive: boolean\r\n}>\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Item Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail-item>` component\r\n *\r\n * Individual navigation item for use within a navigation rail.\r\n * Represents a single destination or action with an icon and optional label.\r\n *\r\n * @element schmancy-navigation-rail-item\r\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\r\n * @slot - Default slot for custom content\r\n * @slot badge - Custom badge content\r\n *\r\n * @fires navigate - When the item is clicked\r\n *\r\n * @csspart container - The main item container\r\n * @csspart indicator - The active indicator\r\n * @csspart icon - The icon container\r\n * @csspart label - The label text\r\n * @csspart badge - The badge element\r\n *\r\n * @example\r\n * <schmancy-navigation-rail-item\r\n *   icon=\"home\"\r\n *   label=\"Home\"\r\n *   value=\"/home\"\r\n *   badge=\"3\"\r\n *   active>\r\n * </schmancy-navigation-rail-item>\r\n *\r\n * @example\r\n * <!-- Using 'selected' alias -->\r\n * <schmancy-navigation-rail-item\r\n *   icon=\"settings\"\r\n *   label=\"Settings\"\r\n *   value=\"/settings\"\r\n *   selected>\r\n * </schmancy-navigation-rail-item>\r\n *\r\n * @example\r\n * <!-- With custom icon -->\r\n * <schmancy-navigation-rail-item label=\"Dashboard\">\r\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\r\n * </schmancy-navigation-rail-item>\r\n */\r\n@customElement('schmancy-navigation-rail-item')\r\nexport class SchmancyNavigationRailItem extends $LitElement(css`\r\n\t:host {\r\n\t\tdisplay: block;\r\n\t\tposition: relative;\r\n\t\toutline: none;\r\n\t\t--rail-item-height: 56px;\r\n\t\t--rail-item-icon-size: 24px;\r\n\t\t--rail-item-show-label: block;\r\n\t}\r\n\r\n\t.container {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tmin-height: var(--rail-item-height);\r\n\t\twidth: 100%;\r\n\t\tborder-radius: 16px;\r\n\t\tcursor: pointer;\r\n\t\tposition: relative;\r\n\t\tbox-sizing: border-box;\r\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\r\n\t\tuser-select: none;\r\n\t\ttransition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\t\tpadding: 12px 0;\r\n\t\tgap: 4px;\r\n\t}\r\n\r\n\t/* Hover state */\r\n\t.container:hover {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\r\n\t}\r\n\r\n\t/* Focus state */\r\n\t:host(:focus-visible) .container {\r\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\r\n\t\toutline-offset: 2px;\r\n\t}\r\n\r\n\t/* Active indicator - positioned behind icon only */\r\n\t.icon-container {\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\t.indicator {\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, -50%) scale(0);\r\n\t\twidth: 56px;\r\n\t\theight: 32px;\r\n\t\tborder-radius: 16px;\r\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\r\n\t\ttransition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t:host([active]) .indicator,\r\n\t:host([selected]) .indicator {\r\n\t\ttransform: translate(-50%, -50%) scale(1);\r\n\t}\r\n\r\n\t:host([active]) .container,\r\n\t:host([selected]) .container {\r\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\r\n\t}\r\n\r\n\r\n\t/* Icon styles */\r\n\t.icon-container {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\twidth: auto;\r\n\t\tmin-width: 56px;\r\n\t\theight: 32px;\r\n\t\tflex-shrink: 0;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t}\r\n\r\n\t.icon {\r\n\t\tfont-family: 'Material Symbols Outlined';\r\n\t\tfont-size: var(--rail-item-icon-size);\r\n\t\tline-height: 1;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 0,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t:host([active]) .icon,\r\n\t:host([selected]) .icon {\r\n\t\tfont-variation-settings:\r\n\t\t\t'FILL' 1,\r\n\t\t\t'wght' 400,\r\n\t\t\t'GRAD' 0,\r\n\t\t\t'opsz' 24;\r\n\t}\r\n\r\n\t/* Label styles */\r\n\t.label {\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tline-height: 16px;\r\n\t\ttext-align: center;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1;\r\n\t\tdisplay: var(--rail-item-show-label, block);\r\n\t\tmax-width: 56px;\r\n\t\tpadding: 0 4px;\r\n\t}\r\n\r\n\r\n\t/* Badge styles */\r\n\t.badge {\r\n\t\tposition: absolute;\r\n\t\ttop: 8px;\r\n\t\tright: 12px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px;\r\n\t\tborder-radius: 8px;\r\n\t\tbackground-color: var(--schmancy-sys-color-error-default);\r\n\t\tcolor: var(--schmancy-sys-color-error-on);\r\n\t\tfont-size: 11px;\r\n\t\tfont-weight: 600;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 0 4px;\r\n\t\tbox-sizing: border-box;\r\n\t\tz-index: 2;\r\n\t\tanimation: badge-pulse 2s infinite;\r\n\t}\r\n\r\n\t@keyframes badge-pulse {\r\n\t\t0%, 100% { transform: scale(1); }\r\n\t\t50% { transform: scale(1.1); }\r\n\t}\r\n\r\n\t/* Nested items (for sub-navigation) */\r\n\t:host([nested]) {\r\n\t\t--rail-item-height: 48px;\r\n\t\t--rail-item-icon-size: 20px;\r\n\t}\r\n\r\n\t:host([nested]) .container {\r\n\t\tpadding-left: 32px;\r\n\t}\r\n\r\n\t/* Disabled state */\r\n\t:host([disabled]) {\r\n\t\tpointer-events: none;\r\n\t\topacity: 0.38;\r\n\t}\r\n\r\n\t/* Ripple effect */\r\n\t.ripple {\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tright: 0;\r\n\t\tbottom: 0;\r\n\t\tborder-radius: inherit;\r\n\t\toverflow: hidden;\r\n\t\tz-index: 0;\r\n\t}\r\n\r\n\t.ripple::before {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\twidth: 0;\r\n\t\theight: 0;\r\n\t\tborder-radius: 50%;\r\n\t\tbackground: currentColor;\r\n\t\topacity: 0;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\ttransition: width 0.6s, height 0.6s, opacity 0.6s;\r\n\t}\r\n\r\n\t:host(:active) .ripple::before {\r\n\t\twidth: 200%;\r\n\t\theight: 200%;\r\n\t\topacity: 0.12;\r\n\t}\r\n\r\n\t/* Tooltip styles (shown via title attribute) */\r\n\t:host([title]:hover)::after {\r\n\t\tcontent: attr(title);\r\n\t\tposition: absolute;\r\n\t\tleft: calc(100% + 8px);\r\n\t\ttop: 50%;\r\n\t\ttransform: translateY(-50%);\r\n\t\tbackground: var(--schmancy-sys-color-inverseSurface);\r\n\t\tcolor: var(--schmancy-sys-color-inverseOnSurface);\r\n\t\tpadding: 4px 8px;\r\n\t\tborder-radius: 4px;\r\n\t\tfont-size: 12px;\r\n\t\twhite-space: nowrap;\r\n\t\tz-index: 1000;\r\n\t\tpointer-events: none;\r\n\t\tanimation: tooltip-fade-in 0.2s ease;\r\n\t}\r\n\r\n\t@keyframes tooltip-fade-in {\r\n\t\tfrom {\r\n\t\t\topacity: 0;\r\n\t\t\ttransform: translateY(-50%) translateX(-4px);\r\n\t\t}\r\n\t\tto {\r\n\t\t\topacity: 1;\r\n\t\t\ttransform: translateY(-50%) translateX(0);\r\n\t\t}\r\n\t}\r\n\r\n\t/* Group item styles */\r\n\t:host([group]) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t:host([group])::after {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\tbottom: -4px;\r\n\t\tleft: 12px;\r\n\t\tright: 12px;\r\n\t\theight: 1px;\r\n\t\tbackground: var(--schmancy-sys-color-outlineVariant);\r\n\t\topacity: 0.12;\r\n\t}\r\n`) {\r\n\t// Observable state\r\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\r\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\r\n\tprivate active$ = new BehaviorSubject<boolean>(false)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * Icon name (Material Symbols icon)\r\n\t */\r\n\t@property({ type: String })\r\n\ticon = ''\r\n\r\n\t/**\r\n\t * Label text for the navigation item\r\n\t */\r\n\t@property({ type: String })\r\n\tlabel = ''\r\n\r\n\t/**\r\n\t * Value associated with this item (useful for routing)\r\n\t */\r\n\t@property({ type: String })\r\n\tvalue = ''\r\n\r\n\t/**\r\n\t * Whether this item is currently active/selected\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget active() { return this.active$.value }\r\n\tset active(value: boolean) {\r\n\t\tthis.active$.next(value)\r\n\t}\r\n\r\n\t/**\r\n\t * Whether this item is currently selected (alias for active)\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tget selected() { return this.active }\r\n\tset selected(value: boolean) { this.active = value }\r\n\r\n\t/**\r\n\t * Badge text or number to display\r\n\t */\r\n\t@property({ type: String })\r\n\tbadge = ''\r\n\r\n\t/**\r\n\t * Badge variant\r\n\t */\r\n\t@property({ type: String })\r\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\r\n\r\n\t/**\r\n\t * Whether to show the label (controlled by parent rail)\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, attribute: 'show-label' })\r\n\tshowLabel = false\r\n\r\n\t/**\r\n\t * Whether this item is disabled\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tdisabled = false\r\n\r\n\t/**\r\n\t * Whether this is a nested item (sub-navigation)\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tnested = false\r\n\r\n\t/**\r\n\t * Whether this item represents a group separator\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\tgroup = false\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate showRipple = false\r\n\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up hover tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\t\t// Set up press tracking\r\n\t\tmerge(\r\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\r\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\r\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false)))\r\n\t\t).pipe(takeUntil(this.disconnecting)).subscribe()\r\n\r\n\r\n\t\t// Ripple effect\r\n\t\tthis.pressing$.pipe(\r\n\t\t\ttap(pressing => {\r\n\t\t\t\tif (pressing && !this.disabled) {\r\n\t\t\t\t\tthis.showRipple = true\r\n\t\t\t\t}\r\n\t\t\t}),\r\n\t\t\tdelay(600),\r\n\t\t\ttap(() => this.showRipple = false),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Subscribe to active state changes for reactive updates\r\n\t\tthis.active$.pipe(\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t\ttap((isActive) => {\r\n\t\t\t\tthis.requestUpdate()\r\n\t\t\t\t// Update ARIA attributes reactively\r\n\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\r\n\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\t\t\t}),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Set ARIA attributes\r\n\t\tthis.setAttribute('role', 'listitem')\r\n\t\tif (!this.hasAttribute('tabindex')) {\r\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\r\n\t\t}\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\t// Active state is now handled by the BehaviorSubject subscription\r\n\t\t// So we don't need to duplicate it here\r\n\r\n\t\tif (changedProperties.has('disabled')) {\r\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('label')) {\r\n\t\t\tthis.setAttribute('aria-label', this.label)\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Handle click events\r\n\t */\r\n\tprivate handleClick(event: Event) {\r\n\t\tif (this.disabled) {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tevent.stopPropagation()\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\t// Emit navigate event with the value\r\n\t\tthis.dispatchEvent(new CustomEvent('navigate', {\r\n\t\t\tdetail: this.value || this.label,\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\r\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\r\n\t\t// The parent rail will confirm and update via activeIndex\r\n\t}\r\n\r\n\t/**\r\n\t * Handle keyboard events\r\n\t */\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tif (this.disabled) return\r\n\r\n\t\tif (event.key === 'Enter' || event.key === ' ') {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tthis.click()\r\n\t\t}\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\tconst hasCustomIcon = this.querySelector('[slot=\"icon\"]')\r\n\t\tconst hasCustomContent = this.querySelector(':not([slot])')\r\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\r\n\r\n\t\tconst containerClasses = {\r\n\t\t\tcontainer: true,\r\n\t\t\trippling: this.showRipple\r\n\t\t}\r\n\r\n\t\tconst badgeStyles = {\r\n\t\t\t'background-color': `var(--schmancy-sys-color-${this.badgeVariant}-default)`,\r\n\t\t\t'color': `var(--schmancy-sys-color-${this.badgeVariant}-on)`\r\n\t\t}\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${this.classMap(containerClasses)}\r\n\t\t\t\tpart=\"container\"\r\n\t\t\t\t@click=${this.handleClick}\r\n\t\t\t\t@keydown=${this.handleKeyDown}\r\n\t\t\t>\r\n\t\t\t\t<span class=\"ripple\" aria-hidden=\"true\"></span>\r\n\r\n\t\t\t\t${when(hasCustomContent,\r\n\t\t\t\t\t() => html`<slot></slot>`,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t<div class=\"icon-container\" part=\"icon\">\r\n\t\t\t\t\t\t\t<span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\"></span>\r\n\t\t\t\t\t\t\t${when(hasCustomIcon,\r\n\t\t\t\t\t\t\t\t() => html`<slot name=\"icon\"></slot>`,\r\n\t\t\t\t\t\t\t\t() => when(this.icon,\r\n\t\t\t\t\t\t\t\t\t() => html`<span class=\"icon\">${this.icon}</span>`\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t${when(this.label,\r\n\t\t\t\t\t\t\t() => html`<span class=\"label\" part=\"label\">${this.label}</span>`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t${when(this.badge,\r\n\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t${when(hasCustomBadge,\r\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\r\n\t\t\t\t\t\t\t() => html`\r\n\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\tclass=\"badge\"\r\n\t\t\t\t\t\t\t\t\tpart=\"badge\"\r\n\t\t\t\t\t\t\t\t\tstyle=${this.styleMap(badgeStyles)}\r\n\t\t\t\t\t\t\t\t\taria-label=\"${this.badge} notifications\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t${this.badge}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t`\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t`\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\r\n\t}\r\n}","import { $LitElement } from '@mixins/index'\r\nimport { css, html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, takeUntil } from 'rxjs'\r\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\r\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\r\n\r\nexport type NavigateEvent = CustomEvent<string>\r\n\r\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\r\n\r\nexport type NavigationRailFabClickEvent = CustomEvent<void>\r\n\r\nexport type LabelVisibility = 'all' | 'selected' | 'none'\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\r\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\r\n *\r\n * @element schmancy-navigation-rail\r\n * @slot fab - Slot for a floating action button at the top\r\n * @slot menu - Slot for a menu icon or button below the FAB\r\n * @slot header - Custom header content slot\r\n * @slot footer - Custom footer content slot\r\n * @slot - Default slot for navigation rail items\r\n *\r\n * @fires navigate - When a navigation item is selected\r\n * @fires menu-click - When the menu button is clicked\r\n * @fires fab-click - When the FAB is clicked\r\n *\r\n * @csspart rail - The main rail container\r\n * @csspart header - The header section\r\n * @csspart nav - The navigation items container\r\n * @csspart footer - The footer section\r\n *\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\r\n *     <schmancy-icon>menu</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends $LitElement(css`\r\n\t:host {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\twidth: 80px;\r\n\t\theight: 100%;\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\r\n\t\tcolor: var(--schmancy-sys-color-surface-on);\r\n\t\tbox-sizing: border-box;\r\n\t\tposition: relative;\r\n\t\toverflow: visible;\r\n\t}\r\n\r\n\t/* Rail container */\r\n\t.rail {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\theight: 100%;\r\n\t\tpadding: 8px 12px;\r\n\t\tgap: 4px;\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\r\n\t/* Header section */\r\n\t.header {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/* Navigation container */\r\n\t.nav {\r\n\t\tflex: 1;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tgap: 4px;\r\n\t\toverflow-y: auto;\r\n\t\toverflow-x: hidden;\r\n\t\tscrollbar-width: thin;\r\n\t\tscrollbar-color: var(--schmancy-sys-color-surface-onVariant) transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar {\r\n\t\twidth: 4px;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-track {\r\n\t\tbackground: transparent;\r\n\t}\r\n\r\n\t.nav::-webkit-scrollbar-thumb {\r\n\t\tbackground-color: var(--schmancy-sys-color-surface-onVariant);\r\n\t\tborder-radius: 2px;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\t/* Footer section */\r\n\t.footer {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tmargin-top: auto;\r\n\t\tpadding-top: 8px;\r\n\t}\r\n\r\n\t/* FAB styles */\r\n\t::slotted([slot=\"fab\"]) {\r\n\t\tmargin-bottom: 8px;\r\n\t}\r\n\r\n\t/* Menu button styles */\r\n\t::slotted([slot=\"menu\"]) {\r\n\t\tmargin-bottom: 12px;\r\n\t}\r\n\r\n\t/* Alignment variants */\r\n\t:host([alignment=\"top\"]) .nav {\r\n\t\tjustify-content: flex-start;\r\n\t}\r\n\r\n\t:host([alignment=\"center\"]) .nav {\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t:host([alignment=\"bottom\"]) .nav {\r\n\t\tjustify-content: flex-end;\r\n\t}\r\n\r\n\t/* Label visibility states */\r\n\t:host([label-visibility=\"none\"]) ::slotted(schmancy-navigation-rail-item) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\t:host([label-visibility=\"selected\"]) ::slotted(schmancy-navigation-rail-item:not([active])) {\r\n\t\t--rail-item-show-label: none;\r\n\t}\r\n\r\n\r\n\t/* Group header styles */\r\n\t::slotted(.group-header) {\r\n\t\tpadding: 8px 12px;\r\n\t\tfont-size: 12px;\r\n\t\tfont-weight: 500;\r\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\r\n\t\ttext-transform: uppercase;\r\n\t\tletter-spacing: 0.1em;\r\n\t\twhite-space: nowrap;\r\n\t\toverflow: hidden;\r\n\t\ttext-overflow: ellipsis;\r\n\t}\r\n\r\n\t/* Divider styles */\r\n\t::slotted(schmancy-divider) {\r\n\t\tmargin: 8px 0;\r\n\t}\r\n\r\n\t/* Responsive behavior */\r\n\t@media (max-width: 768px) {\r\n\t\t:host {\r\n\t\t\twidth: 56px;\r\n\t\t}\r\n\r\n\t\t.rail {\r\n\t\t\tpadding: 8px;\r\n\t\t}\r\n\t}\r\n`) {\r\n\t// Observable state\r\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * The currently active item index\r\n\t * @default -1\r\n\t */\r\n\t@property({ type: Number })\r\n\tget activeIndex() { return this.activeIndex$.value }\r\n\tset activeIndex(value: number) { this.activeIndex$.next(value) }\r\n\r\n\t/**\r\n\t * The currently active item value (for programmatic selection)\r\n\t */\r\n\t@property({ type: String })\r\n\tget activeValue() { return this._activeValue }\r\n\tset activeValue(value: string) {\r\n\t\tthis._activeValue = value\r\n\t\tthis.updateActiveByValue(value)\r\n\t}\r\n\tprivate _activeValue = ''\r\n\r\n\t/**\r\n\t * When to show labels for navigation items\r\n\t * 'all' - Always show labels for all items\r\n\t * 'selected' - Only show label for selected item\r\n\t * 'none' - Never show labels\r\n\t * @default 'all'\r\n\t */\r\n\t@property({ type: String, attribute: 'label-visibility', reflect: true })\r\n\tlabelVisibility: LabelVisibility = 'all'\r\n\r\n\t/**\r\n\t * Alignment of navigation items\r\n\t * @default 'top'\r\n\t */\r\n\t@property({ type: String, reflect: true })\r\n\talignment: 'top' | 'center' | 'bottom' = 'top'\r\n\r\n\t/**\r\n\t * Show tooltips when labels are hidden\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tshowTooltips = true\r\n\r\n\t/**\r\n\t * Enable keyboard navigation\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tkeyboardNavigation = true\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\r\n\r\n\t// Queries\r\n\r\n\t@queryAssignedElements({ flatten: true })\r\n\tprivate allElements!: Element[]\r\n\r\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\r\n\t\treturn this.allElements.filter(\r\n\t\t\tel => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM'\r\n\t\t) as SchmancyNavigationRailItem[]\r\n\t}\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up keyboard navigation if enabled\r\n\t\tif (this.keyboardNavigation) {\r\n\t\t\tthis.addEventListener('keydown', this.handleKeyDown)\r\n\t\t}\r\n\r\n\t\t// Subscribe to active index changes with distinct values only\r\n\t\tthis.activeIndex$.pipe(\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t\ttap(index => this.updateActiveStates(index)),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.setupNavigateListener()\r\n\r\n\t\t// Set up label visibility\r\n\t\tthis.updateLabelVisibility()\r\n\r\n\t\t// Update ARIA attributes\r\n\t\tthis.setAttribute('role', 'navigation')\r\n\t\tthis.setAttribute('aria-label', 'Main navigation')\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\tif (changedProperties.has('labelVisibility')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('activeValue')) {\r\n\t\t\tthis.updateActiveByValue(this.activeValue)\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateActiveStates(index: number) {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst isActive = i === index\r\n\t\t\titem.active = isActive\r\n\t\t\titem.setAttribute('aria-selected', String(isActive))\r\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\r\n\t\t\t// Update activeValue when index changes\r\n\t\t\tif (isActive) {\r\n\t\t\t\tthis._activeValue = item.value || item.label || ''\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate updateActiveByValue(value: string) {\r\n\t\tconst index = this.navigationItems.findIndex(\r\n\t\t\titem => item.getAttribute('value') === value || item.label === value\r\n\t\t)\r\n\t\tif (index >= 0) {\r\n\t\t\tthis.activeIndex = index\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tprivate updateLabelVisibility() {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst shouldShowLabel =\r\n\t\t\t\tthis.labelVisibility === 'all' ||\r\n\t\t\t\t(this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && item.label) {\r\n\t\t\t\titem.setAttribute('title', item.label)\r\n\t\t\t} else {\r\n\t\t\t\titem.removeAttribute('title')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tconst items = this.navigationItems\r\n\t\tif (items.length === 0) return\r\n\r\n\t\tlet newIndex = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex\r\n\r\n\t\tswitch (event.key) {\r\n\t\t\tcase 'ArrowDown':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = (newIndex + 1) % items.length\r\n\t\t\t\tbreak\r\n\t\t\tcase 'ArrowUp':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = newIndex <= 0 ? items.length - 1 : newIndex - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Home':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = 0\r\n\t\t\t\tbreak\r\n\t\t\tcase 'End':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = items.length - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Enter':\r\n\t\t\tcase ' ':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tif (newIndex >= 0) {\r\n\t\t\t\t\titems[newIndex].click()\r\n\t\t\t\t}\r\n\t\t\t\treturn\r\n\t\t\tdefault:\r\n\t\t\t\treturn\r\n\t\t}\r\n\r\n\t\tthis.focusedIndex = newIndex\r\n\t\titems[newIndex].focus()\r\n\t}\r\n\r\n\tprivate handleFabClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(new CustomEvent('fab-click', {\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\t}\r\n\r\n\tprivate handleMenuClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(new CustomEvent('menu-click', {\r\n\t\t\tbubbles: true,\r\n\t\t\tcomposed: true\r\n\t\t}))\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\treturn html`\r\n\t\t\t<div class=\"rail\" part=\"rail\">\r\n\t\t\t\t<div class=\"header\" part=\"header\">\r\n\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick}></slot>\r\n\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick}></slot>\r\n\t\t\t\t\t<slot name=\"header\"></slot>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<nav class=\"nav\" part=\"nav\" role=\"list\">\r\n\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t</nav>\r\n\r\n\t\t\t\t<div class=\"footer\" part=\"footer\">\r\n\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\r\n\r\n\tprivate setupNavigateListener() {\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.addEventListener('navigate', (e: Event) => {\r\n\t\t\tif (e instanceof CustomEvent) {\r\n\t\t\t\tconst value = e.detail\r\n\t\t\t\t// Find the item that dispatched the event and update active state\r\n\t\t\t\tconst itemIndex = this.navigationItems.findIndex(\r\n\t\t\t\t\titem => item.value === value || item.label === value\r\n\t\t\t\t)\r\n\t\t\t\tif (itemIndex >= 0) {\r\n\t\t\t\t\tthis.activeIndex = itemIndex\r\n\t\t\t\t\tthis._activeValue = value\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate handleSlotChange() {\r\n\t\t// Update items when slot content changes\r\n\t\tthis.updateLabelVisibility()\r\n\t\tthis.updateActiveStates(this.activeIndex)\r\n\r\n\t\t// Set ARIA attributes on items\r\n\t\tthis.navigationItems.forEach((item, index) => {\r\n\t\t\titem.setAttribute('role', 'listitem')\r\n\t\t\tif (!item.hasAttribute('tabindex')) {\r\n\t\t\t\titem.setAttribute('tabindex', index === this.activeIndex ? '0' : '-1')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'schmancy-navigation-rail': SchmancyNavigationRail\r\n\t}\r\n}"],"names":["SchmancyNavigationRailItem","$LitElement","css","constructor","super","arguments","this","hovering$","BehaviorSubject","pressing$","active$","icon","label","value","badge","badgeVariant","showLabel","disabled","nested","group","showRipple","active","next","selected","connectedCallback","merge","fromEvent","pipe","tap","takeUntil","disconnecting","subscribe","pressing","delay","distinctUntilChanged","isActive","requestUpdate","setAttribute","String","hasAttribute","changedProperties","updated","has","event","preventDefault","stopPropagation","dispatchEvent","CustomEvent","detail","bubbles","composed","key","click","render","hasCustomIcon","querySelector","hasCustomContent","hasCustomBadge","containerClasses","container","rippling","badgeStyles","color","html","classMap","handleClick","handleKeyDown","when","styleMap","__decorateClass","property","type","prototype","Boolean","reflect","attribute","state","customElement","SchmancyNavigationRail","activeIndex$","_activeValue","labelVisibility","alignment","showTooltips","keyboardNavigation","focusedIndex","activeIndex","activeValue","updateActiveByValue","navigationItems","allElements","filter","el","tagName","addEventListener","index","updateActiveStates","setupNavigateListener","updateLabelVisibility","forEach","item","i","findIndex","getAttribute","shouldShowLabel","removeAttribute","items","length","newIndex","focus","handleFabClick","handleMenuClick","handleSlotChange","e","itemIndex","Number","queryAssignedElements","flatten"],"mappings":";;;;;;;;;;;;;AA6DO,IAAMA,IAAN,cAAyCC,EAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAArD,EAAA;AAAA,EAAA,cAAAC;AAAAC,UAAAA,GAAAC,SAAAA,GA+ONC,KAAQC,YAAY,IAAIC,EAAAA,EAAyB,GACjDF,KAAQG,YAAY,IAAID,EAAAA,EAAyB,GACjDF,KAAQI,UAAU,IAAIF,EAAAA,EAAyB,GAO/CF,KAAAK,OAAO,IAMPL,KAAAM,QAAQ,IAMRN,KAAAO,QAAQ,IAwBRP,KAAAQ,QAAQ,IAMRR,KAAAS,eAAkD,SAOlDT,KAAAU,YAAAA,IAOAV,KAAAW,WAAAA,IAOAX,KAAAY,SAAAA,IAOAZ,KAAAa,QAAAA,IAIAb,KAAQc,aAAAA;AAAAA,EAAa;AAAA,EAvDrB,IAAA,SAAIC;AAAW,WAAOf,KAAKI,QAAQG;AAAAA,EAAM;AAAA,EACzC,IAAA,OAAWA,GAAAA;AACVP,SAAKI,QAAQY,KAAKT,CAAAA;AAAAA,EACnB;AAAA,EAOA,IAAA,WAAIU;AAAa,WAAOjB,KAAKe;AAAAA,EAAO;AAAA,EACpC,IAAA,SAAaR,GAAAA;AAAkBP,SAAKe,SAASR;AAAAA,EAAM;AAAA,EA+CnD,oBAAAW;AACCpB,UAAMoB,qBAGNC,EACCC,EAAUpB,MAAM,YAAA,EAAcqB,KAAKC,EAAI,MAAMtB,KAAKC,UAAUe,OAAK,CAAA,CAAA,GACjEI,EAAUpB,MAAM,YAAA,EAAcqB,KAAKC,EAAI,MAAMtB,KAAKC,UAAUe,KAAAA,EAAK,CAAA,CAAA,CAAA,EAChEK,KAAKE,EAAUvB,KAAKwB,aAAAA,CAAAA,EAAgBC,UAAAA,GAGtCN,EACCC,EAAUpB,MAAM,WAAA,EAAaqB,KAAKC,EAAI,MAAMtB,KAAKG,UAAUa,KAAAA,EAAK,CAAA,CAAA,GAChEI,EAAUpB,MAAM,SAAA,EAAWqB,KAAKC,EAAI,MAAMtB,KAAKG,UAAUa,KAAAA,EAAK,CAAA,CAAA,GAC9DI,EAAUpB,MAAM,YAAA,EAAcqB,KAAKC,EAAI,MAAMtB,KAAKG,UAAUa,KAAAA,EAAK,CAAA,CAAA,CAAA,EAChEK,KAAKE,EAAUvB,KAAKwB,aAAAA,CAAAA,EAAgBC,UAAAA,GAItCzB,KAAKG,UAAUkB,KACdC,EAAII,OAAAA;AACCA,YAAa1B,KAAKW,aACrBX,KAAKc,aAAAA;AAAAA,IAAa,CAAA,GAGpBa,EAAM,GAAA,GACNL,EAAI,MAAMtB,KAAKc,aAAAA,EAAa,GAC5BS,EAAUvB,KAAKwB,aAAAA,CAAAA,EACdC,UAAAA,GAGFzB,KAAKI,QAAQiB,KACZO,EAAAA,GACAN,EAAKO,OAAAA;AACJ7B,WAAK8B,cAAAA,GAEL9B,KAAK+B,aAAa,iBAAiBC,OAAOH,CAAAA,CAAAA,GAC1C7B,KAAK+B,aAAa,YAAYF,IAAW,MAAM,IAAA;AAAA,IAAA,CAAA,GAEhDN,EAAUvB,KAAKwB,gBACdC,UAAAA,GAGFzB,KAAK+B,aAAa,QAAQ,UAAA,GACrB/B,KAAKiC,aAAa,UAAA,KACtBjC,KAAK+B,aAAa,YAAY/B,KAAKe,SAAS,MAAM,IAAA;AAAA,EAEpD;AAAA,EAEA,QAAQmB;AACPpC,UAAMqC,QAAQD,CAAAA,GAKVA,EAAkBE,IAAI,UAAA,KACzBpC,KAAK+B,aAAa,iBAAiBC,OAAOhC,KAAKW,QAAAA,CAAAA,GAG5CuB,EAAkBE,IAAI,YACzBpC,KAAK+B,aAAa,cAAc/B,KAAKM;EAEvC;AAAA,EAKQ,YAAY+B,GAAAA;AACnB,QAAIrC,KAAKW,SAGR,QAFA0B,EAAMC,eAAAA,GAAAA,KACND,EAAME,gBAAAA;AAKPvC,SAAKwC,cAAc,IAAIC,YAAY,YAAY,EAC9CC,QAAQ1C,KAAKO,SAASP,KAAKM,OAC3BqC,SAAAA,IACAC,UAAAA,GAAU,CAAA,CAAA;AAAA,EAKZ;AAAA,EAKQ,cAAcP,GAAAA;AACjBrC,SAAKW,YAEL0B,EAAMQ,QAAQ,WAAWR,EAAMQ,QAAQ,QAC1CR,EAAMC,eAAAA,GACNtC,KAAK8C,MAAAA;AAAAA,EAEP;AAAA,EAEU,SAAAC;AACT,UAAMC,IAAgBhD,KAAKiD,cAAc,eAAA,GACnCC,IAAmBlD,KAAKiD,cAAc,cAAA,GACtCE,IAAiBnD,KAAKiD,cAAc,gBAAA,GAEpCG,IAAmB,EACxBC,eACAC,UAAUtD,KAAKc,WAAAA,GAGVyC,IAAc,EACnB,oBAAoB,4BAA4BvD,KAAKS,yBACrD+C,OAAS,4BAA4BxD,KAAKS,YAAAA,OAAAA;AAG3C,WAAOgD;AAAAA;AAAAA,YAEGzD,KAAK0D,SAASN,CAAAA,CAAAA;AAAAA;AAAAA,aAEbpD,KAAK2D,WAAAA;AAAAA,eACH3D,KAAK4D,aAAAA;AAAAA;AAAAA;AAAAA;AAAAA,MAIdC,EAAKX,GACN,MAAMO,kBACN,MAAMA;AAAAA;AAAAA;AAAAA,SAGFI,EAAKb,GACN,MAAMS,8BACN,MAAMI,EAAK7D,KAAKK,MACf,MAAMoD,uBAA0BzD,KAAKK,IAAAA,SAAAA,CAAAA,CAAAA;AAAAA;AAAAA;AAAAA,QAKtCwD,EAAK7D,KAAKM,OACX,MAAMmD,qCAAwCzD,KAAKM,KAAAA,SAAAA,CAAAA;AAAAA;;MAKpDuD,EAAK7D,KAAKQ,OACX,MAAMiD;AAAAA,QACHI,EAAKV,GACN,MAAMM,+BACN,MAAMA;AAAAA;AAAAA;AAAAA;AAAAA,iBAIIzD,KAAK8D,SAASP,CAAAA,CAAAA;AAAAA,uBACRvD,KAAKQ,KAAAA;AAAAA;AAAAA,WAEjBR,KAAKQ,KAAAA;AAAAA;AAAAA;;;;EAQf;AAAA;AA3OAuD,EAAA,CADCC,EAAS,EAAEC,MAAMjC,OAAAA,CAAAA,CAAAA,GAvPNtC,EAwPZwE,WAAA,QAAA,CAAA,GAMAH,EAAA,CADCC,EAAS,EAAEC,MAAMjC,OAAAA,CAAAA,CAAAA,GA7PNtC,EA8PZwE,WAAA,SAAA,IAMAH,EAAA,CADCC,EAAS,EAAEC,MAAMjC,YAnQNtC,EAoQZwE,WAAA,SAAA,CAAA,GAOIH,EAAA,CADHC,EAAS,EAAEC,MAAME,SAASC,SAAAA,QA1Qf1E,EA2QRwE,WAAA,UAAA,CAAA,GAUAH,EAAA,CADHC,EAAS,EAAEC,MAAME,SAASC,SAAAA,QApRf1E,EAqRRwE,WAAA,YAAA,CAAA,GAOJH,EAAA,CADCC,EAAS,EAAEC,MAAMjC,OAAAA,CAAAA,CAAAA,GA3RNtC,EA4RZwE,WAAA,SAAA,CAAA,GAMAH,EAAA,CADCC,EAAS,EAAEC,MAAMjC,OAAAA,CAAAA,CAAAA,GAjSNtC,EAkSZwE,WAAA,gBAAA,IAOAH,EAAA,CADCC,EAAS,EAAEC,MAAME,SAASE,WAAW,aAAA,CAAA,CAAA,GAxS1B3E,EAySZwE,WAAA,aAAA,IAOAH,EAAA,CADCC,EAAS,EAAEC,MAAME,SAASC,SAAAA,GAAS,CAAA,CAAA,GA/SxB1E,EAgTZwE,WAAA,YAAA,CAAA,GAOAH,EAAA,CADCC,EAAS,EAAEC,MAAME,SAASC,YAAS,CAAA,CAAA,GAtTxB1E,EAuTZwE,WAAA,UAAA,CAAA,GAOAH,EAAA,CADCC,EAAS,EAAEC,MAAME,SAASC,YAAS,CAAA,CAAA,GA7TxB1E,EA8TZwE,WAAA,SAAA,CAAA,GAIQH,EAAA,CADPO,EAAAA,CAAAA,GAjUW5E,EAkUJwE,WAAA,cAAA,IAlUIxE,IAANqE,EAAA,CADNQ,EAAc,+BAAA,CAAA,GACF7E;;;;;ACNN,IAAM8E,IAAN,cAAqC7E,EAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAAjD,EAAA;AAAA,EAAA;AAAAE,UAAAA,GAAAC,SAAAA,GAmINC,KAAQyE,eAAe,IAAIvE,EAAAA,KAoB3BF,KAAQ0E,eAAe,IAUvB1E,KAAA2E,kBAAmC,OAOnC3E,KAAA4E,YAAyC,OAOzC5E,KAAA6E,eAAAA,IAOA7E,KAAA8E,yBAIA9E,KAAQ+E,eAAAA;AAAAA,EAAe;AAAA,EA/CvB,IAAA,cAAIC;AAAgB,WAAOhF,KAAKyE,aAAalE;AAAAA,EAAM;AAAA,EACnD,gBAAgBA,GAAAA;AAAiBP,SAAKyE,aAAazD,KAAKT,CAAAA;AAAAA,EAAO;AAAA,EAM/D,kBAAI0E;AAAgB,WAAOjF,KAAK0E;AAAAA,EAAa;AAAA,EAC7C,IAAA,YAAgBnE,GAAAA;AACfP,SAAK0E,eAAenE,GACpBP,KAAKkF,oBAAoB3E,CAAAA;AAAAA,EAC1B;AAAA,EA2CA,sBAAY4E;AACX,WAAOnF,KAAKoF,YAAYC,OACvBC,OAAMA,EAAGC,YAAY,+BAAZA;AAAAA,EAEX;AAAA,EAEA,oBAAArE;AACCpB,UAAMoB,kBAAAA,GAGFlB,KAAK8E,sBACR9E,KAAKwF,iBAAiB,WAAWxF,KAAK4D,aAAAA,GAIvC5D,KAAKyE,aAAapD,KACjBO,EAAAA,GACAN,EAAImE,OAASzF,KAAK0F,mBAAmBD,CAAAA,CAAAA,GACrClE,EAAUvB,KAAKwB,aAAAA,CAAAA,EACdC,UAAAA,GAGFzB,KAAK2F,sBAAAA,GAGL3F,KAAK4F,sBAAAA,GAGL5F,KAAK+B,aAAa,QAAQ,YAAA,GAC1B/B,KAAK+B,aAAa,cAAc,iBAAA;AAAA,EACjC;AAAA,EAEA,QAAQG,GAAAA;AACPpC,UAAMqC,QAAQD,CAAAA,GAEVA,EAAkBE,IAAI,iBAAA,KACzBpC,KAAK4F,sBAAAA,GAGF1D,EAAkBE,IAAI,aAAA,KACzBpC,KAAKkF,oBAAoBlF,KAAKiF;EAEhC;AAAA,EAEQ,mBAAmBQ,GAAAA;AAC1BzF,SAAKmF,gBAAgBU,QAAQ,CAACC,GAAMC;AACnC,YAAMlE,IAAWkE,MAAMN;AACvBK,QAAK/E,SAASc,GACdiE,EAAK/D,aAAa,iBAAiBC,OAAOH,CAAAA,CAAAA,GAC1CiE,EAAK/D,aAAa,YAAYF,IAAW,MAAM,IAAA,GAG3CA,MACH7B,KAAK0E,eAAeoB,EAAKvF,SAASuF,EAAKxF,SAAS;AAAA,IAAA,CAAA;AAAA,EAGnD;AAAA,EAEQ,oBAAoBC;AAC3B,UAAMkF,IAAQzF,KAAKmF,gBAAgBa,iBAC1BF,EAAKG,aAAa,OAAA,MAAa1F,KAASuF,EAAKxF,UAAUC;AAE5DkF,SAAS,MACZzF,KAAKgF,cAAcS;AAAAA,EAErB;AAAA,EAGQ;AACPzF,SAAKmF,gBAAgBU,QAAQ,CAACC,GAAMC,MAAAA;AACnC,YAAMG,IACLlG,KAAK2E,oBAAoB,SACxB3E,KAAK2E,oBAAoB,cAAcoB,MAAM/F,KAAKgF;AAEpDc,QAAKpF,YAAYwF,GAGblG,KAAK6E,gBAAAA,CAAiBqB,KAAmBJ,EAAKxF,QACjDwF,EAAK/D,aAAa,SAAS+D,EAAKxF,KAAAA,IAEhCwF,EAAKK,gBAAgB,OAAA;AAAA,IAAA,CAAA;AAAA,EAGxB;AAAA,EAGQ,cAAc9D,GAAAA;AACrB,UAAM+D,IAAQpG,KAAKmF;AACnB,QAAIiB,EAAMC,WAAW,EAAG;AAExB,QAAIC,IAAWtG,KAAK+E,gBAAgB,IAAI/E,KAAK+E,eAAe/E,KAAKgF;AAEjE,YAAQ3C,EAAMQ,KAAAA;AAAAA,MACb,KAAK;AACJR,UAAMC,eAAAA,GACNgE,KAAYA,IAAW,KAAKF,EAAMC;AAClC;AAAA,MACD,KAAK;AACJhE,UAAMC,kBACNgE,IAAWA,KAAY,IAAIF,EAAMC,SAAS,IAAIC,IAAW;AACzD;AAAA,MACD,KAAK;AACJjE,UAAMC,kBACNgE,IAAW;AACX;AAAA,MACD,KAAK;AACJjE,UAAMC,eAAAA,GACNgE,IAAWF,EAAMC,SAAS;AAC1B;AAAA,MACD,KAAK;AAAA,MACL,KAAK;AAKJ,eAJAhE,EAAMC,wBACFgE,KAAY,KACfF,EAAME,CAAAA,EAAUxD,MAAAA;AAAAA,MAGlB;AACC;AAAA,IAAA;AAGF9C,SAAK+E,eAAeuB,GACpBF,EAAME,CAAAA,EAAUC,MAAAA;AAAAA,EACjB;AAAA,EAEQ,eAAelE,GAAAA;AACtBA,MAAME,gBAAAA,GACNvC,KAAKwC,cAAc,IAAIC,YAAY,aAAa,EAC/CE,SAAAA,IACAC,UAAAA,GAAU,CAAA,CAAA;AAAA,EAEZ;AAAA,EAEQ,gBAAgBP,GAAAA;AACvBA,MAAME,mBACNvC,KAAKwC,cAAc,IAAIC,YAAY,cAAc,EAChDE,SAAAA,IACAC,UAAAA,GAAU,CAAA,CAAA;AAAA,EAEZ;AAAA,EAEU,SAAAG;AACT,WAAOU;AAAAA;AAAAA;AAAAA,+BAGsBzD,KAAKwG,cAAAA;AAAAA,gCACJxG,KAAKyG,eAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,yBAKZzG,KAAK0G,gBAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAQ7B;AAAA,EAGQ,wBAAAf;AAEP3F,SAAKwF,iBAAiB,YAAamB,OAAAA;AAClC,UAAIA,aAAalE,aAAa;AAC7B,cAAMlC,IAAQoG,EAAEjE,QAEVkE,IAAY5G,KAAKmF,gBAAgBa,UACtCF,CAAAA,MAAQA,EAAKvF,UAAUA,KAASuF,EAAKxF,UAAUC;AAE5CqG,aAAa,MAChB5G,KAAKgF,cAAc4B,GACnB5G,KAAK0E,eAAenE;AAAAA,MAEtB;AAAA,IAAA,CAAA;AAAA,EAEF;AAAA,EAEQ,mBAAAmG;AAEP1G,SAAK4F,sBAAAA,GACL5F,KAAK0F,mBAAmB1F,KAAKgF,WAAAA,GAG7BhF,KAAKmF,gBAAgBU,QAAQ,CAACC,GAAML,MAAAA;AACnCK,QAAK/D,aAAa,QAAQ,UAAA,GACrB+D,EAAK7D,aAAa,UAAA,KACtB6D,EAAK/D,aAAa,YAAY0D,MAAUzF,KAAKgF,cAAc,MAAM,IAAA;AAAA,IAAA,CAAA;AAAA,EAGpE;;AApPIjB,EAAA,CADHC,EAAS,EAAEC,MAAM4C,OAAAA,CAAAA,CAAAA,GA1INrC,EA2IRN,WAAA,eAAA,IAOAH,EAAA,CADHC,EAAS,EAAEC,MAAMjC,OAAAA,CAAAA,CAAAA,GAjJNwC,EAkJRN,WAAA,eAAA,CAAA,GAeJH,EAAA,CADCC,EAAS,EAAEC,MAAMjC,QAAQqC,WAAW,oBAAoBD,YAAS,CAAA,CAAA,GAhKtDI,EAiKZN,WAAA,mBAAA,IAOAH,EAAA,CADCC,EAAS,EAAEC,MAAMjC,QAAQoC,SAAAA,GAAS,CAAA,CAAA,GAvKvBI,EAwKZN,WAAA,aAAA,CAAA,GAOAH,EAAA,CADCC,EAAS,EAAEC,MAAME,QAAAA,CAAAA,CAAAA,GA9KNK,EA+KZN,WAAA,gBAAA,CAAA,GAOAH,EAAA,CADCC,EAAS,EAAEC,MAAME,QAAAA,CAAAA,CAAAA,GArLNK,EAsLZN,WAAA,sBAAA,CAAA,GAIQH,EAAA,CADPO,MAzLWE,EA0LJN,WAAA,gBAAA,CAAA,GAKAH,EAAA,CADP+C,EAAsB,EAAEC,SAAAA,QA9LbvC,EA+LJN,WAAA,eAAA,CAAA,GA/LIM,IAANT,EAAA,CADNQ,EAAc,0BAAA,CAAA,GACFC;"}