npm - @awc-ui/core - Versions diffs - 1.0.0-beta.3 → 1.0.0-beta.4 - Mend

@awc-ui/core 1.0.0-beta.3 → 1.0.0-beta.4

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 (498) hide show

package/dist/components/md-stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["mdStepperCss","MdStepper","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","indicator","variant","mode","active","autoComplete","nav","nextDisabled","loading","lazy","label","stepWord","ofWord","completedWord","currentWord","errorWord","optionalWord","nextLabel","backLabel","finishLabel","density","stepCount","liveMessage","errorMessage","steps","lastActive","handleSlotChange","collectSteps","clamped","clampToValidStep","syncSteps","handleFooterBack","async","prev","focusActiveStep","componentWillLoad","componentDidLoad","observeStepState","disconnectedCallback","stepObserver","disconnect","undefined","onActiveChange","newVal","previous","mutatingSelf","forEach","s","i","disabled","completed","error","target","editable","mdStepChange","emit","index","announceStep","onConfigChange","ownsStepEvent","e","t","parentElement","el","tagName","toLowerCase","onStepClick","stopPropagation","detail","canNavigateTo","commitChange","onStepNext","before","next","onStepBack","onInternalMdClick","length","current","mdComplete","goTo","reset","ev","mdBeforeChange","defaultPrevented","MutationObserver","records","entered","r","attributeName","announceError","attachObserver","observe","subtree","attributes","attributeFilter","fn","step","msg","optional","indexOf","errorText","slice","every","Math","max","min","Array","from","children","filter","c","shadowRoot","querySelector","focus","hasOwnContent","childNodes","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","total","panelMode","getAttribute","setAttribute","style","setProperty","String","set","k","v","shouldBeActive","forceUpdate","render","mobile","h","Host","key","class","role","part","onSlotchange","name","size","onClick","map"],"sources":["src/components/md-stepper/md-stepper.css?tag=md-stepper&encapsulation=shadow","src/components/md-stepper/md-stepper.tsx"],"sourcesContent":["/* ==========================================================\n md-stepper — Material Design 3 stepper container\n\n PUBLIC CSS CUSTOM PROPERTIES:\n --md-stepper-gap Spacing between steps (vertical orientation only).\n Defaults to 0 — any other value opens gaps in the\n connector rail, which relies on adjacent step boxes\n touching. Prefer padding inside step content.\n\n PARTS:\n list The <ol> wrapping the steps.\n content Wrapper around the `content` slot (horizontal content area).\n nav The horizontal Back / Continue button bar.\n mobile-nav The compact variant=\"mobile\" bar.\n mobile-progress The centered progress (dots / caption) in the mobile bar.\n\n SLOTS:\n (default) md-step children\n content Active-step panel for horizontal / mobile steppers — rendered\n between the step row and the nav bar (swap it on mdStepChange).\n ========================================================== /\n\n:host {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/ Visually-hidden live regions — announce step changes / errors to AT without\n affecting layout (the standard sr-only recipe). /\n.md-stepper__live {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n.md-stepper__list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n}\n\n/ Horizontal: steps share the row equally; connectors live on a fixed baseline\n inside each step (see md-step), so the row stays clean at any label height. /\n\n/ ── Horizontal panel mode (opt-in) ──────────────────────────────────────────\n A slot cannot reach a grandchild, so `md-stepper` can never project a step's\n children into its own `content` region — only `md-step` can render them, in\n place. To let a step's panel span the full width UNDER the row anyway, the\n row becomes a grid and each step goes `display: contents`, promoting its\n header and its panel to grid items: headers share row 1 (one column each),\n panels span every column in row 2.\n\n Gated on [data-panel-mode=\"step\"], which the stepper only sets when a step\n actually has content — a horizontal stepper without per-step panels keeps\n the original flex row byte-for-byte. /\n:host(.md-stepper--horizontal[data-panel-mode='step']) .md-stepper__list {\n display: grid;\n grid-template-columns: repeat(var(--md-stepper-step-count, 1), 1fr);\n align-items: start;\n}\n\n:host(.md-stepper--horizontal) .md-stepper__list {\n flex-direction: row;\n align-items: flex-start;\n}\n\n/ Vertical: stacked with NO inter-step gap so the connector rail is continuous\n (each step's down-connector meets the next step's up-connector at the box\n boundary). Breathing room comes from the bubble wrapper + content padding. /\n:host(.md-stepper--vertical) .md-stepper__list {\n flex-direction: column;\n gap: var(--md-stepper-gap, 0);\n}\n\n/ Horizontal content area — only takes space when something is slotted. /\n.md-stepper__content ::slotted() {\n display: block;\n /* Global density: on-grid 24px separation tracks --md-sys-spacing-inset-xl;\n byte-for-byte at density 0. /\n margin-block-start: var(--md-sys-spacing-inset-xl, 24px);\n}\n\n/ Horizontal nav bar — built-in Back / Continue below the steps (and below\n the content slot), end-aligned like M3 wizard actions. Vertical steppers\n carry their nav inside each step's content panel instead. /\n.md-stepper__nav {\n display: flex;\n gap: var(--md-sys-spacing-gap-sm, 8px);\n justify-content: flex-end;\n / Off-grid (20px) separation tightens with global density (2px/rung),\n floored at 4px; density 0 resolves to 20px. /\n margin-block-start: max(4px, calc(20px + var(--md-sys-density-scale, 0) 2px));\n}\n\n/* ── Mobile variant — compact Back · progress · Continue bar ──────────────\n The step-header row is hidden; the active step's panel lives in the content\n slot. Matches the MUI MobileStepper idiom for narrow checkout/onboarding. /\n:host(.md-stepper--mobile) .md-stepper__list { display: none; }\n\n.md-stepper__mobile {\n display: flex;\n align-items: center;\n gap: var(--md-sys-spacing-gap-sm, 8px);\n margin-block-start: var(--md-sys-spacing-gap-lg, 16px);\n}\n\n.md-stepper__mobile-progress {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--md-sys-spacing-gap-sm, 8px);\n min-inline-size: 0;\n}\n\n.md-stepper__mobile-text {\n font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n font-size: var(--md-sys-typescale-label-large-font-size, 14px);\n font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n line-height: var(--md-sys-typescale-label-large-line-height, 20px);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n.md-stepper__mobile-dot {\n inline-size: 8px;\n block-size: 8px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n / Pending dots use outline (not the 1.2:1 surface tint) for a visible 3:1. /\n background-color: var(--md-step-connector-color, var(--md-sys-color-outline, #79747E));\n transition:\n background-color var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00)),\n transform var(--md-sys-motion-spring-spatial-default-duration, 500ms) var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n}\n.md-stepper__mobile-dot.is-done { background-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4)); }\n.md-stepper__mobile-dot.is-active {\n background-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));\n transform: scale(1.5);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .md-stepper__mobile-dot { transition-duration: 0.01ms; }\n .md-stepper__mobile-dot.is-active { transform: none; }\n}\n\n@media (forced-colors: active) {\n .md-stepper__mobile-dot { background-color: GrayText; forced-color-adjust: none; }\n .md-stepper__mobile-dot.is-done,\n .md-stepper__mobile-dot.is-active { background-color: Highlight; }\n}\n\n/ ==========================================================\n DENSITY (local override)\n Maps the local `density` prop onto the same --md-sys-density-scale signal a\n global `data-density` ancestor sets. Declared on :host, so a local rung wins\n over the inherited global one. Every density-sensitive value in this file\n derives from that single signal by calc — never add a fixed per-rung ladder.\n ========================================================== /\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Method,\n forceUpdate,\n} from '@stencil/core';\n\n/\n `md-stepper` — Material Design 3 stepper. Orchestrates a set of slotted\n * `md-step` children: it owns the active index and navigation, and pushes\n * layout / i18n down to each step.\n \n Controlled, with optional auto-progress. The stepper owns `active`\n * (updated on click / `next` / `prev` / `goTo`, emitting `mdStepChange`). With\n * `auto-complete` (default), advancing marks the step you leave as `completed`,\n * so the progress line + checks \"just work\" — no manual wiring. Set\n * `auto-complete=\"false\"` to own `completed` yourself.\n \n ```html\n * <md-stepper active=\"0\">\n * <md-step label=\"Account\"><p>…</p></md-step>\n * <md-step label=\"Shipping\" optional><p>…</p></md-step>\n * <md-step label=\"Payment\" editable><p>…</p></md-step>\n * </md-stepper>\n * ```\n \n @slot - `md-step` children.\n * @slot content - Content area for horizontal steppers, rendered between\n * the step row and the built-in nav bar. Put the active step's\n * panel here and swap it on `mdStepChange` (vertical steppers\n * render content inside each step instead).\n * @part list - The ordered list wrapping the steps.\n * @part content - Wrapper around the `content` slot.\n * @part nav - The horizontal Back / Continue button bar.\n * @part mobile-nav - The compact `variant=\"mobile\"` bar.\n * @part mobile-progress - The centered progress (dots / caption) in the mobile bar.\n /\n@Component({\n tag: 'md-stepper',\n styleUrl: 'md-stepper.css',\n shadow: true,\n})\nexport class MdStepper {\n @Element() el!: HTMLElement;\n\n /* Layout orientation. /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /* Indicator style: `numbered` circles or minimal `dot`s. /\n @Prop({ reflect: true }) indicator: 'numbered' \| 'dot' = 'numbered';\n\n /\n Layout variant:\n * - `default` — the full step row (headers + connectors).\n * - `mobile` — a compact MUI-style bar for narrow screens: Back, a centered\n * progress (dots for `indicator=\"dot\"`, else a \"Step N of M\" caption), and\n * Continue / Finish. The step headers are hidden; put the active step's\n * panel in the `content` slot and swap it on `mdStepChange`.\n /\n @Prop({ reflect: true }) variant: 'default' \| 'mobile' = 'default';\n\n /\n - `linear` (default) — steps must be completed in order; future steps are\n * not reachable until the prior ones are done or optional (an `editable`\n * completed step can always be revisited).\n * - `non-linear` — any step can be selected.\n /\n @Prop({ reflect: true }) mode: 'linear' \| 'non-linear' = 'linear';\n\n /* Index of the active step. Two-way bindable. Out-of-range values clamp. /\n @Prop({ mutable: true, reflect: true }) active: number = 0;\n\n /\n When advancing (via `next()` or a step's built-in Continue button), mark the\n * step being left as `completed`. Default `true`. Turn off to fully control\n * completion yourself.\n /\n @Prop({ attribute: 'auto-complete' }) autoComplete: boolean = true;\n\n /\n Show the built-in Back / Continue navigation (default `true`) so users\n * always have a clear way to move through the flow:\n * - vertical → the buttons sit under each active step (Material wizard style),\n * - horizontal → a single button bar below the stepper.\n * Set `nav=\"false\"` to drive navigation entirely yourself (clicking steps,\n * `next()` / `prev()`, or your own controls).\n /\n @Prop() nav: boolean = true;\n\n /\n Disable the built-in Continue / Finish button without disabling Back or\n * the whole step. Bind this to your current step's form validity to gate\n * advancement declaratively (the most common wizard need). Step clicks and the\n * `next()`/`goTo()` methods are unaffected — use `mode=\"linear\"` and/or\n * `mdBeforeChange` for those.\n /\n @Prop({ attribute: 'next-disabled' }) nextDisabled: boolean = false;\n\n /\n Put the built-in Continue / Finish button into a loading state (spinner +\n * interactive-disabled) and disable Back, for async submit-on-Continue\n * (prevents double-submit). Toggle it around your `await` — typically inside an\n * `mdBeforeChange` handler that `preventDefault()`s, does async work, then\n * commits by setting `active`.\n /\n @Prop() loading: boolean = false;\n\n /\n Only mount the active vertical step's content panel; inactive panels are\n * removed from layout and the a11y tree (no collapse animation). Use for\n * wizards with heavy per-step content. Note: slotted custom elements stay\n * connected in the light DOM — for full teardown, conditionally render the\n * content in your framework.\n /\n @Prop() lazy: boolean = false;\n\n // ─── i18n ──────────────────────────────────────────────────\n /* Accessible name for the navigation landmark. /\n @Prop() label: string = 'Progress';\n /* Localized word for \"Step\" in each step's announced name (\"Step 2 of 4\"). /\n @Prop({ attribute: 'step-word' }) stepWord: string = 'Step';\n /* Localized word for \"of\" in each step's announced name (\"Step 2 of 4\"). /\n @Prop({ attribute: 'of-word' }) ofWord: string = 'of';\n /* Localized word announced for a completed step (\"…, completed\"). /\n @Prop({ attribute: 'completed-word' }) completedWord: string = 'completed';\n /* Localized word announced for the current step (\"…, current\"). /\n @Prop({ attribute: 'current-word' }) currentWord: string = 'current';\n /* Localized word announced for a step in error (\"…, error: message\"). /\n @Prop({ attribute: 'error-word' }) errorWord: string = 'error';\n /* Caption + announced word for optional steps. /\n @Prop({ attribute: 'optional-word' }) optionalWord: string = 'Optional';\n /* Label for the built-in Continue button. /\n @Prop({ attribute: 'next-label' }) nextLabel: string = 'Continue';\n /* Label for the built-in Back button. /\n @Prop({ attribute: 'back-label' }) backLabel: string = 'Back';\n /* Label for the built-in Continue button on the last step. /\n @Prop({ attribute: 'finish-label' }) finishLabel: string = 'Finish';\n\n /\n Local density rung. Drives the same `--md-sys-density-scale` signal that a\n * global `data-density` ancestor sets, so a local value simply overrides the\n * inherited one. 0 = default, -4 = ultra-compact.\n /\n @Prop({ reflect: true }) density: 0 \| -1 \| -2 \| -3 \| -4 = 0;\n\n /\n Fires BEFORE a user-driven step change commits (step click, built-in nav, or\n * `next()`/`prev()`/`goTo()`). Cancelable: call `event.preventDefault()` to\n * veto the transition (e.g. block Continue until the current step validates).\n * `detail.index` is the requested step, `detail.previous` the current one.\n * Does not fire for a direct `active` property assignment — set `active`\n * yourself to commit authoritatively (e.g. after async validation).\n /\n @Event({ cancelable: true }) mdBeforeChange: EventEmitter<{ index: number; previous: number }>;\n\n /* Active step changed (after it commits). /\n @Event() mdStepChange: EventEmitter<{ index: number; previous: number }>;\n\n /* Continue pressed on the last step (the flow is finished). /\n @Event() mdComplete: EventEmitter<void>;\n\n /* Step count — drives the horizontal nav bar's Continue↔Finish label. /\n @State() private stepCount = 0;\n\n /* Visually-hidden polite announcement of the active step (a11y). /\n @State() private liveMessage = '';\n\n /* Visually-hidden assertive announcement when a step enters error (a11y). /\n @State() private errorMessage = '';\n\n private steps: HTMLMdStepElement[] = [];\n\n /* Last known-valid active index — the true `previous` for mdStepChange even\n * when the watch re-enters through clamping (where Stencil's `oldVal` is the\n * bogus out-of-range value). /\n private lastActive = 0;\n\n componentWillLoad() {\n // Sync before first render: steps get correct data- immediately (no\n // \"every bubble is 1\" flash), stepCount is set outside didLoad (no Stencil\n // re-render warning), and an out-of-range initial `active` clamps.\n this.collectSteps();\n this.active = this.clampToValidStep(this.active);\n this.lastActive = this.active;\n this.syncSteps();\n }\n\n componentDidLoad() {\n this.syncSteps();\n this.observeStepState();\n }\n\n disconnectedCallback() {\n this.stepObserver?.disconnect();\n this.stepObserver = undefined;\n }\n\n @Watch('active')\n onActiveChange(newVal: number) {\n this.collectSteps();\n const clamped = this.clampToValidStep(newVal);\n if (clamped !== newVal) {\n this.active = clamped; // re-enters this watch with the clamped value\n return;\n }\n const previous = this.lastActive;\n if (clamped === previous) return; // clamp round-trip — nothing changed\n this.lastActive = clamped;\n // Auto-complete treats completion as strict progress. This lives in the WATCH\n // (not next()) so EVERY commit path is consistent — the built-in nav, the\n // methods, AND a direct `active = n` assignment (the async-veto bypass):\n // • FORWARD → mark every non-disabled step you passed over as completed;\n // • BACKWARD → un-complete the target step and everything after it, so a\n // later step can never stay checked while an earlier one isn't (e.g.\n // finishing then stepping back mustn't orphan the last step as completed).\n // Exception: revisiting an `editable` completed step is review-in-place,\n // so downstream completion survives.\n // (In controlled mode, `auto-complete=\"false\"`, completion is always yours.)\n if (this.autoComplete) {\n this.mutatingSelf(() => {\n if (clamped > previous) {\n this.steps.forEach((s, i) => {\n if (i >= previous && i < clamped && !s.disabled) {\n s.completed = true;\n s.error = false;\n }\n });\n } else {\n const target = this.steps[clamped];\n if (!(target?.editable && target?.completed)) {\n this.steps.forEach((s, i) => {\n if (i >= clamped) s.completed = false;\n });\n }\n }\n });\n }\n this.syncSteps();\n this.mdStepChange.emit({ index: clamped, previous });\n this.announceStep(clamped);\n }\n\n @Watch('orientation')\n @Watch('indicator')\n @Watch('mode')\n @Watch('nav')\n @Watch('variant')\n @Watch('lazy')\n @Watch('loading')\n @Watch('nextDisabled')\n @Watch('stepWord')\n @Watch('ofWord')\n @Watch('completedWord')\n @Watch('currentWord')\n @Watch('errorWord')\n @Watch('optionalWord')\n @Watch('nextLabel')\n @Watch('backLabel')\n @Watch('finishLabel')\n onConfigChange() {\n this.syncSteps();\n }\n\n // ─── Navigation from children ──────────────────────────────\n /** Step events are internal coordination between a step and ITS stepper —\n * only honor events from direct children (a nested stepper's steps must not\n * drive this one) and stop them there. /\n private ownsStepEvent(e: globalThis.Event): boolean {\n const t = e.target as HTMLElement \| null;\n return !!t && t.parentElement === this.el && t.tagName.toLowerCase() === 'md-step';\n }\n\n @Listen('mdStepClick')\n onStepClick(e: CustomEvent<{ index: number }>) {\n if (!this.ownsStepEvent(e)) return;\n e.stopPropagation();\n const target = e.detail.index;\n if (target === this.active) return;\n if (this.canNavigateTo(target)) this.commitChange(target);\n }\n\n @Listen('mdStepNext')\n async onStepNext(e: CustomEvent<{ index: number }>) {\n if (!this.ownsStepEvent(e)) return;\n e.stopPropagation();\n const before = this.active;\n await this.next();\n // The button that was pressed collapses with its panel — move focus to the\n // new active header so keyboard users aren't dropped to <body>.\n if (this.active !== before) this.focusActiveStep();\n }\n\n @Listen('mdStepBack')\n async onStepBack(e: CustomEvent<{ index: number }>) {\n if (!this.ownsStepEvent(e)) return;\n e.stopPropagation();\n const before = this.active;\n await this.prev();\n if (this.active !== before) this.focusActiveStep();\n }\n\n /* The footer bar's own md-buttons emit composed `mdClick` that retargets to\n * this host — internal chrome, don't leak it to app-level delegation. /\n @Listen('mdClick')\n onInternalMdClick(e: globalThis.Event) {\n if (e.target === this.el) e.stopPropagation();\n }\n\n // ─── Public methods ────────────────────────────────────────\n /* Advance to the next non-disabled step (emitting a cancelable\n * `mdBeforeChange`). When `auto-complete` is on, the step you leave is marked\n * completed; past the last reachable step it emits `mdComplete`. /\n @Method()\n async next(): Promise<void> {\n this.collectSteps();\n if (this.steps.length === 0) return;\n let target = this.active + 1;\n while (target < this.steps.length && this.steps[target].disabled) target++;\n if (target >= this.steps.length) {\n // Finishing on the last step: complete it (auto-complete) and emit\n // mdComplete. Async submit-on-finish is done by the consumer via `loading`\n // + the `mdComplete` handler.\n const current = this.steps[this.active];\n if (this.autoComplete && current && !current.disabled) {\n this.mutatingSelf(() => {\n current.completed = true;\n current.error = false;\n });\n }\n this.syncSteps();\n this.mdComplete.emit();\n return;\n }\n this.commitChange(target);\n }\n\n /* Step backward to the previous non-disabled step (emitting `mdBeforeChange`). /\n @Method()\n async prev(): Promise<void> {\n this.collectSteps();\n let target = this.active - 1;\n while (target >= 0 && this.steps[target]?.disabled) target--;\n if (target < 0) return;\n this.commitChange(target);\n }\n\n /* Jump to a step (out-of-range clamps; honors `linear` reachability; emits\n * `mdBeforeChange`). /\n @Method()\n async goTo(index: number): Promise<void> {\n this.collectSteps();\n const clamped = this.clampToValidStep(index);\n if (this.canNavigateTo(clamped)) this.commitChange(clamped);\n }\n\n /* Reset to the first step and clear completed / error state. /\n @Method()\n async reset(): Promise<void> {\n this.collectSteps();\n this.mutatingSelf(() => {\n this.steps.forEach((s) => {\n s.completed = false;\n s.error = false;\n });\n });\n this.active = 0;\n this.syncSteps();\n }\n\n // ─── Internals ─────────────────────────────────────────────\n /* Commit a user-driven step change, first giving the app a chance to veto via\n * the cancelable `mdBeforeChange` event. Returns whether the change committed. /\n private commitChange(target: number): boolean {\n if (target === this.active) return false;\n const ev = this.mdBeforeChange.emit({ index: target, previous: this.active });\n if (ev.defaultPrevented) return false;\n this.active = target;\n return true;\n }\n\n /* Watch the light-DOM children's reflected state attributes so the stepper\n * re-gates reachability when a controlled host mutates completed/optional/\n * disabled without a navigation, and announces a step that enters error. /\n private stepObserver?: MutationObserver;\n private observeStepState() {\n if (typeof MutationObserver === 'undefined') return;\n this.stepObserver = new MutationObserver((records) => {\n let entered: HTMLMdStepElement \| null = null;\n for (const r of records) {\n if (r.attributeName === 'error') {\n const el = r.target as HTMLMdStepElement;\n if (el.error && el.tagName.toLowerCase() === 'md-step') entered = el;\n }\n }\n // Re-gate the affordance against the new state (idempotent — settles).\n this.syncSteps();\n if (entered) this.announceError(entered);\n });\n this.attachObserver();\n }\n\n private attachObserver() {\n // `active` is stamped by the stepper itself; excluding it avoids a feedback\n // loop. The remaining attrs are watched only for APP-driven changes — the\n // stepper's own completion writes run inside `mutatingSelf` (observer off).\n this.stepObserver?.observe(this.el, {\n subtree: true,\n attributes: true,\n attributeFilter: ['completed', 'error', 'optional', 'disabled'],\n });\n }\n\n /* Run a block that mutates the steps' own completed/error state without the\n * observer reacting — those writes are already reconciled by syncSteps, so\n * self-triggering it again is redundant work (and perturbs fill animations).\n * External writes, made while the observer is attached, still re-gate. /\n private mutatingSelf(fn: () => void) {\n this.stepObserver?.disconnect();\n try {\n fn();\n } finally {\n this.attachObserver();\n }\n }\n\n private announceStep(index: number) {\n const step = this.steps[index];\n if (!step) return;\n let msg = `${this.stepWord} ${index + 1} ${this.ofWord} ${this.stepCount}`;\n if (step.label) msg += `: ${step.label}`;\n if (step.optional) msg += `, ${this.optionalWord}`;\n if (step.completed) msg += `, ${this.completedWord}`;\n msg += `, ${this.currentWord}`;\n this.liveMessage = msg;\n }\n\n private announceError(step: HTMLMdStepElement) {\n const index = this.steps.indexOf(step);\n let msg = `${this.stepWord} ${index + 1} ${this.ofWord} ${this.stepCount}`;\n if (step.label) msg += `: ${step.label}`;\n msg += `, ${this.errorWord}`;\n if (step.errorText) msg += `: ${step.errorText}`;\n this.errorMessage = msg;\n }\n\n private canNavigateTo(target: number): boolean {\n this.collectSteps();\n const step = this.steps[target];\n if (!step \|\| step.disabled) return false;\n if (this.mode !== 'linear') return true;\n if (target <= this.active) return true; // back is always allowed\n if (step.completed) return true; // revisit a completed (e.g. editable) step\n // forward only when every prior step is completed or skippable\n return this.steps.slice(0, target).every((s) => s.completed \|\| s.optional);\n }\n\n private clampToValidStep(index: number): number {\n if (this.steps.length === 0) return 0;\n return Math.max(0, Math.min(this.steps.length - 1, index \| 0));\n }\n\n private collectSteps() {\n this.steps = (Array.from(this.el.children) as HTMLElement[]).filter(\n (c) => c.tagName.toLowerCase() === 'md-step',\n ) as HTMLMdStepElement[];\n }\n\n private focusActiveStep() {\n const step = this.steps[this.active];\n (step?.shadowRoot?.querySelector('.md-step__inner') as HTMLElement \| null)?.focus();\n }\n\n /* Whitespace-only text (pretty-printed markup) is not content. Mirrors\n * md-step's own computeSlottedContent so the two agree on \"has a panel\". /\n private static hasOwnContent(step: Element): boolean {\n return Array.from(step.childNodes).some(\n (n) =>\n n.nodeType === Node.ELEMENT_NODE \|\|\n (n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim() !== ''),\n );\n }\n\n private syncSteps() {\n this.collectSteps();\n const total = this.steps.length;\n this.stepCount = total;\n // Per-step panels are opt-in and detected, not configured: if any step has\n // light-DOM content of its own, the horizontal row switches to the grid\n // layout. A stepper whose steps are all empty renders byte-identically to\n // before this existed.\n const panelMode =\n this.orientation === 'horizontal' && this.steps.some((s) => MdStepper.hasOwnContent(s))\n ? 'step'\n : 'shared';\n if (this.el.getAttribute('data-panel-mode') !== panelMode) {\n this.el.setAttribute('data-panel-mode', panelMode);\n }\n this.el.style.setProperty('--md-stepper-step-count', String(total));\n\n this.steps.forEach((step, index) => {\n const set = (k: string, v: string) => {\n if (step.getAttribute(k) !== v) step.setAttribute(k, v);\n };\n set('data-index', String(index));\n set('data-total', String(total));\n set('data-active', String(this.active));\n set('data-orientation', this.orientation);\n set('data-indicator', this.indicator);\n set('data-mode', this.mode);\n set('data-position', index === 0 ? 'first' : index === total - 1 ? 'last' : 'middle');\n set('data-step-word', this.stepWord);\n set('data-of-word', this.ofWord);\n set('data-completed-word', this.completedWord);\n set('data-current-word', this.currentWord);\n set('data-error-word', this.errorWord);\n set('data-optional-word', this.optionalWord);\n set('data-next-label', this.nextLabel);\n set('data-back-label', this.backLabel);\n set('data-finish-label', this.finishLabel);\n set('data-nav', String(this.nav));\n set('data-loading', String(this.loading));\n set('data-next-disabled', String(this.nextDisabled));\n set('data-lazy', String(this.lazy));\n // Horizontal panel placement. A horizontal stepper normally takes ONE\n // shared panel in its own `content` slot, because a slot cannot reach a\n // grandchild — `md-step`'s children can only ever be rendered by\n // `md-step` itself. When steps carry their own content we opt the row\n // into a grid instead, so each step's panel can span the full width\n // under the row (see md-step.css §\"horizontal panel\").\n set('data-panel-mode', panelMode);\n // Drives the staggered entrance animation delay in CSS.\n step.style.setProperty('--md-step-idx', String(index));\n const shouldBeActive = index === this.active;\n if (step.active !== shouldBeActive) step.active = shouldBeActive;\n // The connector fill is position-driven (index vs active), read from the\n // `data-active` attribute — which isn't a reactive prop. Steps whose own\n // `active` flag didn't change (e.g. those between the old and new active\n // on a multi-step jump) wouldn't otherwise re-render, leaving their\n // connectors stale. Force each step to re-render so the fill stays exact.\n forceUpdate(step);\n });\n }\n\n private handleSlotChange = () => {\n this.collectSteps();\n const clamped = this.clampToValidStep(this.active);\n if (clamped !== this.active) {\n // Steps were removed out from under the active index — re-clamp (the\n // watch syncs + emits with the true previous).\n this.active = clamped;\n } else {\n this.syncSteps();\n }\n };\n\n private handleFooterBack = async () => {\n await this.prev();\n // Back disables itself on the first step while focused — rescue focus.\n if (this.active === 0) this.focusActiveStep();\n };\n\n render() {\n const mobile = this.variant === 'mobile';\n return (\n <Host\n class={{\n 'md-stepper': true,\n [`md-stepper--${this.orientation}`]: true,\n [`md-stepper--indicator-${this.indicator}`]: true,\n [`md-stepper--mode-${this.mode}`]: true,\n 'md-stepper--mobile': mobile,\n }}\n role=\"navigation\"\n aria-label={this.label}\n >\n {/ Visually-hidden announcers: the horizontal footer nav keeps focus on\n its buttons (so Continue can be pressed repeatedly), so step changes\n and freshly-set errors are surfaced to assistive tech here instead. /}\n <div class=\"md-stepper__live\" aria-live=\"polite\" role=\"status\">{this.liveMessage}</div>\n <div class=\"md-stepper__live\" aria-live=\"assertive\" role=\"alert\">{this.errorMessage}</div>\n\n <ol class=\"md-stepper__list\" part=\"list\">\n <slot onSlotchange={this.handleSlotChange}></slot>\n </ol>\n\n {/ Horizontal content area — the app renders the active step's panel\n here (see the `content` slot docs). Sits between the step row and\n the nav bar, matching the M3 wizard order: steps → content → actions. /}\n <div class=\"md-stepper__content\" part=\"content\">\n <slot name=\"content\"></slot>\n </div>\n\n {/ Horizontal nav lives in a footer bar (vertical steps carry their own\n Back/Continue in each content panel). Back stays mounted (disabled\n on the first step) so the bar never reflows underfoot. /}\n {this.nav && !mobile && this.orientation === 'horizontal' && this.stepCount > 0 && (\n <div class=\"md-stepper__nav\" part=\"nav\">\n <md-button\n variant=\"text\"\n size=\"sm\"\n disabled={this.active <= 0 \|\| this.loading}\n onClick={this.handleFooterBack}\n >\n {this.backLabel}\n </md-button>\n <md-button\n variant=\"filled\"\n size=\"sm\"\n loading={this.loading}\n disabled={this.nextDisabled \|\| this.loading}\n onClick={() => this.next()}\n >\n {this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel}\n </md-button>\n </div>\n )}\n\n {/ Compact mobile bar: Back · centered progress (dots or \"N of M\") ·\n Continue/Finish. Replaces the step-header row + footer nav. */}\n {this.nav && mobile && this.stepCount > 0 && (\n <div class=\"md-stepper__mobile\" part=\"mobile-nav\">\n <md-button\n variant=\"text\"\n size=\"sm\"\n disabled={this.active <= 0 \|\| this.loading}\n onClick={this.handleFooterBack}\n >\n {this.backLabel}\n </md-button>\n <div\n class=\"md-stepper__mobile-progress\"\n part=\"mobile-progress\"\n aria-hidden={this.indicator === 'dot' ? 'true' : undefined}\n >\n {this.indicator === 'dot'\n ? this.steps.map((s, i) => (\n <span\n class={{\n 'md-stepper__mobile-dot': true,\n 'is-active': i === this.active,\n 'is-done': i < this.active \|\| !!s.completed,\n }}\n ></span>\n ))\n : <span class=\"md-stepper__mobile-text\">{`${this.stepWord} ${this.active + 1} ${this.ofWord} ${this.stepCount}`}</span>}\n </div>\n <md-button\n variant=\"filled\"\n size=\"sm\"\n loading={this.loading}\n disabled={this.nextDisabled \|\| this.loading}\n onClick={() => this.next()}\n >\n {this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel}\n </md-button>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["mdStepperCss","MdStepper","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","indicator","variant","mode","active","autoComplete","nav","nextDisabled","loading","lazy","label","stepWord","ofWord","completedWord","currentWord","errorWord","optionalWord","nextLabel","backLabel","finishLabel","density","stepCount","liveMessage","errorMessage","steps","lastActive","handleSlotChange","collectSteps","clamped","clampToValidStep","syncSteps","handleFooterBack","async","prev","focusActiveStep","componentWillLoad","componentDidLoad","observeStepState","disconnectedCallback","stepObserver","disconnect","undefined","onActiveChange","newVal","previous","mutatingSelf","forEach","s","i","disabled","completed","error","target","editable","mdStepChange","emit","index","announceStep","onConfigChange","ownsStepEvent","e","t","parentElement","el","tagName","toLowerCase","onStepClick","stopPropagation","detail","canNavigateTo","commitChange","onStepNext","before","next","onStepBack","onInternalMdClick","length","current","mdComplete","goTo","reset","ev","mdBeforeChange","defaultPrevented","MutationObserver","records","entered","r","attributeName","announceError","attachObserver","observe","subtree","attributes","attributeFilter","fn","step","msg","optional","indexOf","errorText","slice","every","Math","max","min","Array","from","children","filter","c","shadowRoot","querySelector","focus","hasOwnContent","childNodes","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","total","panelMode","getAttribute","setAttribute","style","setProperty","String","set","k","v","shouldBeActive","forceUpdate","render","mobile","h","Host","key","class","role","part","onSlotchange","name","size","onClick","map"],"sources":["src/components/md-stepper/md-stepper.css?tag=md-stepper&encapsulation=shadow","src/components/md-stepper/md-stepper.tsx"],"sourcesContent":["/* ==========================================================\n md-stepper — Material Design 3 stepper container\n\n PUBLIC CSS CUSTOM PROPERTIES:\n --md-stepper-gap Spacing between steps (vertical orientation only).\n Defaults to 0 — any other value opens gaps in the\n connector rail, which relies on adjacent step boxes\n touching. Prefer padding inside step content.\n\n PARTS:\n list The <ol> wrapping the steps.\n content Wrapper around the `content` slot (horizontal content area).\n nav The horizontal Back / Continue button bar.\n mobile-nav The compact variant=\"mobile\" bar.\n mobile-progress The centered progress (dots / caption) in the mobile bar.\n\n SLOTS:\n (default) md-step children\n content Active-step panel for horizontal / mobile steppers — rendered\n between the step row and the nav bar (swap it on mdStepChange).\n ========================================================== /\n\n:host {\n display: block;\n inline-size: 100%;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/ Visually-hidden live regions — announce step changes / errors to AT without\n affecting layout (the standard sr-only recipe). /\n.md-stepper__live {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n.md-stepper__list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n}\n\n/ Horizontal: steps share the row equally; connectors live on a fixed baseline\n inside each step (see md-step), so the row stays clean at any label height. /\n\n/ ── Horizontal panel mode (opt-in) ──────────────────────────────────────────\n A slot cannot reach a grandchild, so `md-stepper` can never project a step's\n children into its own `content` region — only `md-step` can render them, in\n place. To let a step's panel span the full width UNDER the row anyway, the\n row becomes a grid and each step goes `display: contents`, promoting its\n header and its panel to grid items: headers share row 1 (one column each),\n panels span every column in row 2.\n\n Gated on [data-panel-mode=\"step\"], which the stepper only sets when a step\n actually has content — a horizontal stepper without per-step panels keeps\n the original flex row byte-for-byte. /\n:host(.md-stepper--horizontal[data-panel-mode='step']) .md-stepper__list {\n display: grid;\n grid-template-columns: repeat(var(--md-stepper-step-count, 1), 1fr);\n align-items: start;\n}\n\n:host(.md-stepper--horizontal) .md-stepper__list {\n flex-direction: row;\n align-items: flex-start;\n}\n\n/ Vertical: stacked with NO inter-step gap so the connector rail is continuous\n (each step's down-connector meets the next step's up-connector at the box\n boundary). Breathing room comes from the bubble wrapper + content padding. /\n:host(.md-stepper--vertical) .md-stepper__list {\n flex-direction: column;\n gap: var(--md-stepper-gap, 0);\n}\n\n/ Horizontal content area — only takes space when something is slotted. /\n.md-stepper__content ::slotted() {\n display: block;\n /* Global density: on-grid 24px separation tracks --md-sys-spacing-inset-xl;\n byte-for-byte at density 0. /\n margin-block-start: var(--md-sys-spacing-inset-xl, 24px);\n}\n\n/ Horizontal nav bar — built-in Back / Continue below the steps (and below\n the content slot), end-aligned like M3 wizard actions. Vertical steppers\n carry their nav inside each step's content panel instead. /\n.md-stepper__nav {\n display: flex;\n gap: var(--md-sys-spacing-gap-sm, 8px);\n justify-content: flex-end;\n / Off-grid (20px) separation tightens with global density (2px/rung),\n floored at 4px; density 0 resolves to 20px. /\n margin-block-start: max(4px, calc(20px + var(--md-sys-density-scale, 0) 2px));\n}\n\n/* ── Mobile variant — compact Back · progress · Continue bar ──────────────\n The step-header row is hidden; the active step's panel lives in the content\n slot. Matches the MUI MobileStepper idiom for narrow checkout/onboarding. /\n:host(.md-stepper--mobile) .md-stepper__list { display: none; }\n\n.md-stepper__mobile {\n display: flex;\n align-items: center;\n gap: var(--md-sys-spacing-gap-sm, 8px);\n margin-block-start: var(--md-sys-spacing-gap-lg, 16px);\n}\n\n.md-stepper__mobile-progress {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--md-sys-spacing-gap-sm, 8px);\n min-inline-size: 0;\n}\n\n.md-stepper__mobile-text {\n font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n font-size: var(--md-sys-typescale-label-large-font-size, 14px);\n font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n line-height: var(--md-sys-typescale-label-large-line-height, 20px);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n.md-stepper__mobile-dot {\n inline-size: 8px;\n block-size: 8px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n / Pending dots use outline (not the 1.2:1 surface tint) for a visible 3:1. /\n background-color: var(--md-step-connector-color, var(--md-sys-color-outline, #79747E));\n transition:\n background-color var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00)),\n transform var(--md-sys-motion-spring-spatial-default-duration, 500ms) var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n}\n.md-stepper__mobile-dot.is-done { background-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4)); }\n.md-stepper__mobile-dot.is-active {\n background-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));\n transform: scale(1.5);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .md-stepper__mobile-dot { transition-duration: 0.01ms; }\n .md-stepper__mobile-dot.is-active { transform: none; }\n}\n\n@media (forced-colors: active) {\n .md-stepper__mobile-dot { background-color: GrayText; forced-color-adjust: none; }\n .md-stepper__mobile-dot.is-done,\n .md-stepper__mobile-dot.is-active { background-color: Highlight; }\n}\n\n/ ==========================================================\n DENSITY (local override)\n Maps the local `density` prop onto the same --md-sys-density-scale signal a\n global `data-density` ancestor sets. Declared on :host, so a local rung wins\n over the inherited global one. Every density-sensitive value in this file\n derives from that single signal by calc — never add a fixed per-rung ladder.\n ========================================================== /\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Method,\n forceUpdate,\n} from '@stencil/core';\n\n/\n `md-stepper` — Material Design 3 stepper. Orchestrates a set of slotted\n * `md-step` children: it owns the active index and navigation, and pushes\n * layout / i18n down to each step.\n \n Controlled, with optional auto-progress. The stepper owns `active`\n * (updated on click / `next` / `prev` / `goTo`, emitting `mdStepChange`). With\n * `auto-complete` (default), advancing marks the step you leave as `completed`,\n * so the progress line + checks \"just work\" — no manual wiring. Set\n * `auto-complete=\"false\"` to own `completed` yourself.\n \n ```html\n * <md-stepper active=\"0\">\n * <md-step label=\"Account\"><p>…</p></md-step>\n * <md-step label=\"Shipping\" optional><p>…</p></md-step>\n * <md-step label=\"Payment\" editable><p>…</p></md-step>\n * </md-stepper>\n * ```\n \n @slot - `md-step` children.\n * @slot content - Content area for horizontal steppers, rendered between\n * the step row and the built-in nav bar. Put the active step's\n * panel here and swap it on `mdStepChange` (vertical steppers\n * render content inside each step instead).\n * @part list - The ordered list wrapping the steps.\n * @part content - Wrapper around the `content` slot.\n * @part nav - The horizontal Back / Continue button bar.\n * @part mobile-nav - The compact `variant=\"mobile\"` bar.\n * @part mobile-progress - The centered progress (dots / caption) in the mobile bar.\n /\n@Component({\n tag: 'md-stepper',\n styleUrl: 'md-stepper.css',\n shadow: true,\n})\nexport class MdStepper {\n @Element() el!: HTMLElement;\n\n /* Layout orientation. /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /* Indicator style: `numbered` circles or minimal `dot`s. /\n @Prop({ reflect: true }) indicator: 'numbered' \| 'dot' = 'numbered';\n\n /\n Layout variant:\n * - `default` — the full step row (headers + connectors).\n * - `mobile` — a compact MUI-style bar for narrow screens: Back, a centered\n * progress (dots for `indicator=\"dot\"`, else a \"Step N of M\" caption), and\n * Continue / Finish. The step headers are hidden; put the active step's\n * panel in the `content` slot and swap it on `mdStepChange`.\n /\n @Prop({ reflect: true }) variant: 'default' \| 'mobile' = 'default';\n\n /\n - `linear` (default) — steps must be completed in order; future steps are\n * not reachable until the prior ones are done or optional (an `editable`\n * completed step can always be revisited).\n * - `non-linear` — any step can be selected.\n /\n @Prop({ reflect: true }) mode: 'linear' \| 'non-linear' = 'linear';\n\n /* Index of the active step. Two-way bindable. Out-of-range values clamp. /\n @Prop({ mutable: true, reflect: true }) active: number = 0;\n\n /\n When advancing (via `next()` or a step's built-in Continue button), mark the\n * step being left as `completed`. Default `true`. Turn off to fully control\n * completion yourself.\n /\n @Prop({ attribute: 'auto-complete' }) autoComplete: boolean = true;\n\n /\n Show the built-in Back / Continue navigation (default `true`) so users\n * always have a clear way to move through the flow:\n * - vertical → the buttons sit under each active step (Material wizard style),\n * - horizontal → a single button bar below the stepper.\n * Set `nav=\"false\"` to drive navigation entirely yourself (clicking steps,\n * `next()` / `prev()`, or your own controls).\n /\n @Prop() nav: boolean = true;\n\n /\n Disable the built-in Continue / Finish button without disabling Back or\n * the whole step. Bind this to your current step's form validity to gate\n * advancement declaratively (the most common wizard need). Step clicks and the\n * `next()`/`goTo()` methods are unaffected — use `mode=\"linear\"` and/or\n * `mdBeforeChange` for those.\n /\n @Prop({ attribute: 'next-disabled' }) nextDisabled: boolean = false;\n\n /\n Put the built-in Continue / Finish button into a loading state (spinner +\n * interactive-disabled) and disable Back, for async submit-on-Continue\n * (prevents double-submit). Toggle it around your `await` — typically inside an\n * `mdBeforeChange` handler that `preventDefault()`s, does async work, then\n * commits by setting `active`.\n /\n @Prop() loading: boolean = false;\n\n /\n Only mount the active vertical step's content panel; inactive panels are\n * removed from layout and the a11y tree (no collapse animation). Use for\n * wizards with heavy per-step content. Note: slotted custom elements stay\n * connected in the light DOM — for full teardown, conditionally render the\n * content in your framework.\n /\n @Prop() lazy: boolean = false;\n\n // ─── i18n ──────────────────────────────────────────────────\n /* Accessible name for the navigation landmark. /\n @Prop() label: string = 'Progress';\n /* Localized word for \"Step\" in each step's announced name (\"Step 2 of 4\"). /\n @Prop({ attribute: 'step-word' }) stepWord: string = 'Step';\n /* Localized word for \"of\" in each step's announced name (\"Step 2 of 4\"). /\n @Prop({ attribute: 'of-word' }) ofWord: string = 'of';\n /* Localized word announced for a completed step (\"…, completed\"). /\n @Prop({ attribute: 'completed-word' }) completedWord: string = 'completed';\n /* Localized word announced for the current step (\"…, current\"). /\n @Prop({ attribute: 'current-word' }) currentWord: string = 'current';\n /* Localized word announced for a step in error (\"…, error: message\"). /\n @Prop({ attribute: 'error-word' }) errorWord: string = 'error';\n /* Caption + announced word for optional steps. /\n @Prop({ attribute: 'optional-word' }) optionalWord: string = 'Optional';\n /* Label for the built-in Continue button. /\n @Prop({ attribute: 'next-label' }) nextLabel: string = 'Continue';\n /* Label for the built-in Back button. /\n @Prop({ attribute: 'back-label' }) backLabel: string = 'Back';\n /* Label for the built-in Continue button on the last step. /\n @Prop({ attribute: 'finish-label' }) finishLabel: string = 'Finish';\n\n /\n Local density rung. Drives the same `--md-sys-density-scale` signal that a\n * global `data-density` ancestor sets, so a local value simply overrides the\n * inherited one. 0 = default, -4 = ultra-compact.\n /\n @Prop({ reflect: true }) density: 0 \| -1 \| -2 \| -3 \| -4 = 0;\n\n /\n Fires BEFORE a user-driven step change commits (step click, built-in nav, or\n * `next()`/`prev()`/`goTo()`). Cancelable: call `event.preventDefault()` to\n * veto the transition (e.g. block Continue until the current step validates).\n * `detail.index` is the requested step, `detail.previous` the current one.\n * Does not fire for a direct `active` property assignment — set `active`\n * yourself to commit authoritatively (e.g. after async validation).\n /\n @Event({ cancelable: true }) mdBeforeChange: EventEmitter<{ index: number; previous: number }>;\n\n /* Active step changed (after it commits). /\n @Event() mdStepChange: EventEmitter<{ index: number; previous: number }>;\n\n /* Continue pressed on the last step (the flow is finished). /\n @Event() mdComplete: EventEmitter<void>;\n\n /* Step count — drives the horizontal nav bar's Continue↔Finish label. /\n @State() private stepCount = 0;\n\n /* Visually-hidden polite announcement of the active step (a11y). /\n @State() private liveMessage = '';\n\n /* Visually-hidden assertive announcement when a step enters error (a11y). /\n @State() private errorMessage = '';\n\n private steps: HTMLMdStepElement[] = [];\n\n /* Last known-valid active index — the true `previous` for mdStepChange even\n * when the watch re-enters through clamping (where Stencil's `oldVal` is the\n * bogus out-of-range value). /\n private lastActive = 0;\n\n componentWillLoad() {\n // Sync before first render: steps get correct data- immediately (no\n // \"every bubble is 1\" flash), stepCount is set outside didLoad (no Stencil\n // re-render warning), and an out-of-range initial `active` clamps.\n this.collectSteps();\n this.active = this.clampToValidStep(this.active);\n this.lastActive = this.active;\n this.syncSteps();\n }\n\n componentDidLoad() {\n this.syncSteps();\n this.observeStepState();\n }\n\n disconnectedCallback() {\n this.stepObserver?.disconnect();\n this.stepObserver = undefined;\n }\n\n @Watch('active')\n onActiveChange(newVal: number) {\n this.collectSteps();\n const clamped = this.clampToValidStep(newVal);\n if (clamped !== newVal) {\n this.active = clamped; // re-enters this watch with the clamped value\n return;\n }\n const previous = this.lastActive;\n if (clamped === previous) return; // clamp round-trip — nothing changed\n this.lastActive = clamped;\n // Auto-complete treats completion as strict progress. This lives in the WATCH\n // (not next()) so EVERY commit path is consistent — the built-in nav, the\n // methods, AND a direct `active = n` assignment (the async-veto bypass):\n // • FORWARD → mark every non-disabled step you passed over as completed;\n // • BACKWARD → un-complete the target step and everything after it, so a\n // later step can never stay checked while an earlier one isn't (e.g.\n // finishing then stepping back mustn't orphan the last step as completed).\n // Exception: revisiting an `editable` completed step is review-in-place,\n // so downstream completion survives.\n // (In controlled mode, `auto-complete=\"false\"`, completion is always yours.)\n if (this.autoComplete) {\n this.mutatingSelf(() => {\n if (clamped > previous) {\n this.steps.forEach((s, i) => {\n if (i >= previous && i < clamped && !s.disabled) {\n s.completed = true;\n s.error = false;\n }\n });\n } else {\n const target = this.steps[clamped];\n if (!(target?.editable && target?.completed)) {\n this.steps.forEach((s, i) => {\n if (i >= clamped) s.completed = false;\n });\n }\n }\n });\n }\n this.syncSteps();\n this.mdStepChange.emit({ index: clamped, previous });\n this.announceStep(clamped);\n }\n\n @Watch('orientation')\n @Watch('indicator')\n @Watch('mode')\n @Watch('nav')\n @Watch('variant')\n @Watch('lazy')\n @Watch('loading')\n @Watch('nextDisabled')\n @Watch('stepWord')\n @Watch('ofWord')\n @Watch('completedWord')\n @Watch('currentWord')\n @Watch('errorWord')\n @Watch('optionalWord')\n @Watch('nextLabel')\n @Watch('backLabel')\n @Watch('finishLabel')\n onConfigChange() {\n this.syncSteps();\n }\n\n // ─── Navigation from children ──────────────────────────────\n /** Step events are internal coordination between a step and ITS stepper —\n * only honor events from direct children (a nested stepper's steps must not\n * drive this one) and stop them there. /\n private ownsStepEvent(e: globalThis.Event): boolean {\n const t = e.target as HTMLElement \| null;\n return !!t && t.parentElement === this.el && t.tagName.toLowerCase() === 'md-step';\n }\n\n @Listen('mdStepClick')\n onStepClick(e: CustomEvent<{ index: number }>) {\n if (!this.ownsStepEvent(e)) return;\n e.stopPropagation();\n const target = e.detail.index;\n if (target === this.active) return;\n if (this.canNavigateTo(target)) this.commitChange(target);\n }\n\n @Listen('mdStepNext')\n async onStepNext(e: CustomEvent<{ index: number }>) {\n if (!this.ownsStepEvent(e)) return;\n e.stopPropagation();\n const before = this.active;\n await this.next();\n // The button that was pressed collapses with its panel — move focus to the\n // new active header so keyboard users aren't dropped to <body>.\n if (this.active !== before) this.focusActiveStep();\n }\n\n @Listen('mdStepBack')\n async onStepBack(e: CustomEvent<{ index: number }>) {\n if (!this.ownsStepEvent(e)) return;\n e.stopPropagation();\n const before = this.active;\n await this.prev();\n if (this.active !== before) this.focusActiveStep();\n }\n\n /* The footer bar's own md-buttons emit composed `mdClick` that retargets to\n * this host — internal chrome, don't leak it to app-level delegation. /\n @Listen('mdClick')\n onInternalMdClick(e: globalThis.Event) {\n if (e.target === this.el) e.stopPropagation();\n }\n\n // ─── Public methods ────────────────────────────────────────\n /* Advance to the next non-disabled step (emitting a cancelable\n * `mdBeforeChange`). When `auto-complete` is on, the step you leave is marked\n * completed; past the last reachable step it emits `mdComplete`. /\n @Method()\n async next(): Promise<void> {\n this.collectSteps();\n if (this.steps.length === 0) return;\n let target = this.active + 1;\n while (target < this.steps.length && this.steps[target].disabled) target++;\n if (target >= this.steps.length) {\n // Finishing on the last step: complete it (auto-complete) and emit\n // mdComplete. Async submit-on-finish is done by the consumer via `loading`\n // + the `mdComplete` handler.\n const current = this.steps[this.active];\n if (this.autoComplete && current && !current.disabled) {\n this.mutatingSelf(() => {\n current.completed = true;\n current.error = false;\n });\n }\n this.syncSteps();\n this.mdComplete.emit();\n return;\n }\n this.commitChange(target);\n }\n\n /* Step backward to the previous non-disabled step (emitting `mdBeforeChange`). /\n @Method()\n async prev(): Promise<void> {\n this.collectSteps();\n let target = this.active - 1;\n while (target >= 0 && this.steps[target]?.disabled) target--;\n if (target < 0) return;\n this.commitChange(target);\n }\n\n /* Jump to a step (out-of-range clamps; honors `linear` reachability; emits\n * `mdBeforeChange`). /\n @Method()\n async goTo(index: number): Promise<void> {\n this.collectSteps();\n const clamped = this.clampToValidStep(index);\n if (this.canNavigateTo(clamped)) this.commitChange(clamped);\n }\n\n /* Reset to the first step and clear completed / error state. /\n @Method()\n async reset(): Promise<void> {\n this.collectSteps();\n this.mutatingSelf(() => {\n this.steps.forEach((s) => {\n s.completed = false;\n s.error = false;\n });\n });\n this.active = 0;\n this.syncSteps();\n }\n\n // ─── Internals ─────────────────────────────────────────────\n /* Commit a user-driven step change, first giving the app a chance to veto via\n * the cancelable `mdBeforeChange` event. Returns whether the change committed. /\n private commitChange(target: number): boolean {\n if (target === this.active) return false;\n const ev = this.mdBeforeChange.emit({ index: target, previous: this.active });\n if (ev.defaultPrevented) return false;\n this.active = target;\n return true;\n }\n\n /* Watch the light-DOM children's reflected state attributes so the stepper\n * re-gates reachability when a controlled host mutates completed/optional/\n * disabled without a navigation, and announces a step that enters error. /\n private stepObserver?: MutationObserver;\n private observeStepState() {\n if (typeof MutationObserver === 'undefined') return;\n this.stepObserver = new MutationObserver((records) => {\n let entered: HTMLMdStepElement \| null = null;\n for (const r of records) {\n if (r.attributeName === 'error') {\n const el = r.target as HTMLMdStepElement;\n if (el.error && el.tagName.toLowerCase() === 'md-step') entered = el;\n }\n }\n // Re-gate the affordance against the new state (idempotent — settles).\n this.syncSteps();\n if (entered) this.announceError(entered);\n });\n this.attachObserver();\n }\n\n private attachObserver() {\n // `active` is stamped by the stepper itself; excluding it avoids a feedback\n // loop. The remaining attrs are watched only for APP-driven changes — the\n // stepper's own completion writes run inside `mutatingSelf` (observer off).\n this.stepObserver?.observe(this.el, {\n subtree: true,\n attributes: true,\n attributeFilter: ['completed', 'error', 'optional', 'disabled'],\n });\n }\n\n /* Run a block that mutates the steps' own completed/error state without the\n * observer reacting — those writes are already reconciled by syncSteps, so\n * self-triggering it again is redundant work (and perturbs fill animations).\n * External writes, made while the observer is attached, still re-gate. /\n private mutatingSelf(fn: () => void) {\n this.stepObserver?.disconnect();\n try {\n fn();\n } finally {\n this.attachObserver();\n }\n }\n\n private announceStep(index: number) {\n const step = this.steps[index];\n if (!step) return;\n let msg = `${this.stepWord} ${index + 1} ${this.ofWord} ${this.stepCount}`;\n if (step.label) msg += `: ${step.label}`;\n if (step.optional) msg += `, ${this.optionalWord}`;\n if (step.completed) msg += `, ${this.completedWord}`;\n msg += `, ${this.currentWord}`;\n this.liveMessage = msg;\n }\n\n private announceError(step: HTMLMdStepElement) {\n const index = this.steps.indexOf(step);\n let msg = `${this.stepWord} ${index + 1} ${this.ofWord} ${this.stepCount}`;\n if (step.label) msg += `: ${step.label}`;\n msg += `, ${this.errorWord}`;\n if (step.errorText) msg += `: ${step.errorText}`;\n this.errorMessage = msg;\n }\n\n private canNavigateTo(target: number): boolean {\n this.collectSteps();\n const step = this.steps[target];\n if (!step \|\| step.disabled) return false;\n if (this.mode !== 'linear') return true;\n if (target <= this.active) return true; // back is always allowed\n if (step.completed) return true; // revisit a completed (e.g. editable) step\n // forward only when every prior step is completed or skippable\n return this.steps.slice(0, target).every((s) => s.completed \|\| s.optional);\n }\n\n private clampToValidStep(index: number): number {\n if (this.steps.length === 0) return 0;\n return Math.max(0, Math.min(this.steps.length - 1, index \| 0));\n }\n\n private collectSteps() {\n this.steps = (Array.from(this.el.children) as HTMLElement[]).filter(\n (c) => c.tagName.toLowerCase() === 'md-step',\n ) as HTMLMdStepElement[];\n }\n\n private focusActiveStep() {\n const step = this.steps[this.active];\n (step?.shadowRoot?.querySelector('.md-step__inner') as HTMLElement \| null)?.focus();\n }\n\n /* Whitespace-only text (pretty-printed markup) is not content. Mirrors\n * md-step's own computeSlottedContent so the two agree on \"has a panel\". /\n private static hasOwnContent(step: Element): boolean {\n return Array.from(step.childNodes).some(\n (n) =>\n n.nodeType === Node.ELEMENT_NODE \|\|\n (n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim() !== ''),\n );\n }\n\n private syncSteps() {\n this.collectSteps();\n const total = this.steps.length;\n this.stepCount = total;\n // Per-step panels are opt-in and detected, not configured: if any step has\n // light-DOM content of its own, the horizontal row switches to the grid\n // layout. A stepper whose steps are all empty renders byte-identically to\n // before this existed.\n const panelMode =\n this.orientation === 'horizontal' && this.steps.some((s) => MdStepper.hasOwnContent(s))\n ? 'step'\n : 'shared';\n if (this.el.getAttribute('data-panel-mode') !== panelMode) {\n this.el.setAttribute('data-panel-mode', panelMode);\n }\n this.el.style.setProperty('--md-stepper-step-count', String(total));\n\n this.steps.forEach((step, index) => {\n const set = (k: string, v: string) => {\n if (step.getAttribute(k) !== v) step.setAttribute(k, v);\n };\n set('data-index', String(index));\n set('data-total', String(total));\n set('data-active', String(this.active));\n set('data-orientation', this.orientation);\n set('data-indicator', this.indicator);\n set('data-mode', this.mode);\n set('data-position', index === 0 ? 'first' : index === total - 1 ? 'last' : 'middle');\n set('data-step-word', this.stepWord);\n set('data-of-word', this.ofWord);\n set('data-completed-word', this.completedWord);\n set('data-current-word', this.currentWord);\n set('data-error-word', this.errorWord);\n set('data-optional-word', this.optionalWord);\n set('data-next-label', this.nextLabel);\n set('data-back-label', this.backLabel);\n set('data-finish-label', this.finishLabel);\n set('data-nav', String(this.nav));\n set('data-loading', String(this.loading));\n set('data-next-disabled', String(this.nextDisabled));\n set('data-lazy', String(this.lazy));\n // Horizontal panel placement. A horizontal stepper normally takes ONE\n // shared panel in its own `content` slot, because a slot cannot reach a\n // grandchild — `md-step`'s children can only ever be rendered by\n // `md-step` itself. When steps carry their own content we opt the row\n // into a grid instead, so each step's panel can span the full width\n // under the row (see md-step.css §\"horizontal panel\").\n set('data-panel-mode', panelMode);\n // Drives the staggered entrance animation delay in CSS.\n step.style.setProperty('--md-step-idx', String(index));\n const shouldBeActive = index === this.active;\n if (step.active !== shouldBeActive) step.active = shouldBeActive;\n // The connector fill is position-driven (index vs active), read from the\n // `data-active` attribute — which isn't a reactive prop. Steps whose own\n // `active` flag didn't change (e.g. those between the old and new active\n // on a multi-step jump) wouldn't otherwise re-render, leaving their\n // connectors stale. Force each step to re-render so the fill stays exact.\n forceUpdate(step);\n });\n }\n\n private handleSlotChange = () => {\n this.collectSteps();\n const clamped = this.clampToValidStep(this.active);\n if (clamped !== this.active) {\n // Steps were removed out from under the active index — re-clamp (the\n // watch syncs + emits with the true previous).\n this.active = clamped;\n } else {\n this.syncSteps();\n }\n };\n\n private handleFooterBack = async () => {\n await this.prev();\n // Back disables itself on the first step while focused — rescue focus.\n if (this.active === 0) this.focusActiveStep();\n };\n\n render() {\n const mobile = this.variant === 'mobile';\n return (\n <Host\n class={{\n 'md-stepper': true,\n [`md-stepper--${this.orientation}`]: true,\n [`md-stepper--indicator-${this.indicator}`]: true,\n [`md-stepper--mode-${this.mode}`]: true,\n 'md-stepper--mobile': mobile,\n }}\n role=\"navigation\"\n aria-label={this.label}\n >\n {/ Visually-hidden announcers: the horizontal footer nav keeps focus on\n its buttons (so Continue can be pressed repeatedly), so step changes\n and freshly-set errors are surfaced to assistive tech here instead. /}\n <div class=\"md-stepper__live\" aria-live=\"polite\" role=\"status\">{this.liveMessage}</div>\n <div class=\"md-stepper__live\" aria-live=\"assertive\" role=\"alert\">{this.errorMessage}</div>\n\n <ol class=\"md-stepper__list\" part=\"list\">\n <slot onSlotchange={this.handleSlotChange}></slot>\n </ol>\n\n {/ Horizontal content area — the app renders the active step's panel\n here (see the `content` slot docs). Sits between the step row and\n the nav bar, matching the M3 wizard order: steps → content → actions. /}\n <div class=\"md-stepper__content\" part=\"content\">\n <slot name=\"content\"></slot>\n </div>\n\n {/ Horizontal nav lives in a footer bar (vertical steps carry their own\n Back/Continue in each content panel). Back stays mounted (disabled\n on the first step) so the bar never reflows underfoot. /}\n {this.nav && !mobile && this.orientation === 'horizontal' && this.stepCount > 0 && (\n <div class=\"md-stepper__nav\" part=\"nav\">\n <md-button\n variant=\"text\"\n size=\"sm\"\n disabled={this.active <= 0 \|\| this.loading}\n onClick={this.handleFooterBack}\n >\n {this.backLabel}\n </md-button>\n <md-button\n variant=\"filled\"\n size=\"sm\"\n loading={this.loading}\n disabled={this.nextDisabled \|\| this.loading}\n onClick={() => this.next()}\n >\n {this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel}\n </md-button>\n </div>\n )}\n\n {/ Compact mobile bar: Back · centered progress (dots or \"N of M\") ·\n Continue/Finish. Replaces the step-header row + footer nav. */}\n {this.nav && mobile && this.stepCount > 0 && (\n <div class=\"md-stepper__mobile\" part=\"mobile-nav\">\n <md-button\n variant=\"text\"\n size=\"sm\"\n disabled={this.active <= 0 \|\| this.loading}\n onClick={this.handleFooterBack}\n >\n {this.backLabel}\n </md-button>\n <div\n class=\"md-stepper__mobile-progress\"\n part=\"mobile-progress\"\n aria-hidden={this.indicator === 'dot' ? 'true' : undefined}\n >\n {this.indicator === 'dot'\n ? this.steps.map((s, i) => (\n <span\n class={{\n 'md-stepper__mobile-dot': true,\n 'is-active': i === this.active,\n 'is-done': i < this.active \|\| !!s.completed,\n }}\n ></span>\n ))\n : <span class=\"md-stepper__mobile-text\">{`${this.stepWord} ${this.active + 1} ${this.ofWord} ${this.stepCount}`}</span>}\n </div>\n <md-button\n variant=\"filled\"\n size=\"sm\"\n loading={this.loading}\n disabled={this.nextDisabled \|\| this.loading}\n onClick={() => this.next()}\n >\n {this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel}\n </md-button>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/md-sub-menu-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as r,h as a,d as t,t as d}from"./p-BR6gfOQH.js";import{t as n}from"./p-DYBUr7K_.js";import{d as o}from"./p-CTC8XAB6.js";const i=()=>`:host{display:flex;align-items:center;position:relative;overflow:visible;cursor:pointer;user-select:none;min-height:calc(48px + var(--md-sys-density-scale, 0) * 4px);--_icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));padding:0 var(--md-sys-spacing-inset-md, 12px);gap:var(--md-sys-spacing-gap-sm, 8px);color:var(--md-sys-color-on-surface, #1C1B1F);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;transition:background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     border-radius var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1))}@media (prefers-reduced-motion: reduce){:host{transition:none}}.md-sub-menu-item__state-layer{position:absolute;inset:0;border-radius:inherit;background-color:var(--md-sys-color-on-surface, #1C1B1F);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(:hover) .md-sub-menu-item__state-layer{opacity:0.08}:host(:active) .md-sub-menu-item__state-layer{opacity:0.12}:host(:focus-visible) .md-sub-menu-item__state-layer,:host([data-md-focused]) .md-sub-menu-item__state-layer{opacity:0.12}:host(:focus-visible),:host([data-md-focused]){outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}:host(.md-sub-menu-item--open) .md-sub-menu-item__state-layer{opacity:0.08}:host(.md-sub-menu-item--disabled){cursor:default;opacity:0.38;pointer-events:none}.md-sub-menu-item__leading{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--_icon-size);height:var(--_icon-size);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-sub-menu-item__leading ::slotted(*:not(md-badge)){font-size:var(--_icon-size) !important;width:var(--_icon-size);height:var(--_icon-size);color:inherit}.md-sub-menu-item__content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.md-sub-menu-item__headline{font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-body-large-size, 16px);font-weight:var(--md-sys-typescale-body-large-weight, 400);line-height:var(--md-sys-typescale-body-large-line-height, 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-sub-menu-item__supporting{font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-body-medium-size, 14px);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);color:var(--md-sys-color-on-surface-variant, #49454F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-sub-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 8px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-sys-color-tertiary-container, #FFD8E4);color:var(--md-sys-color-on-tertiary-container, #31111D);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-size, 11px);font-weight:var(--md-sys-typescale-label-small-weight, 500);line-height:var(--md-sys-typescale-label-small-line-height, 16px);letter-spacing:var(--md-sys-typescale-label-small-tracking, 0.5px);white-space:nowrap}.md-sub-menu-item__arrow{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;flex-shrink:0;color:var(--md-sys-color-on-surface-variant, #49454F);transition:transform var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host([dir="rtl"]) .md-sub-menu-item__arrow,:host-context([dir="rtl"]) .md-sub-menu-item__arrow{--_arrow-flip:-1}.md-sub-menu-item__arrow{transform:scaleX(var(--_arrow-flip, 1))}:host(.md-sub-menu-item--open) .md-sub-menu-item__arrow{transform:scaleX(var(--_arrow-flip, 1)) rotate(90deg)}.md-sub-menu-item__submenu{position:absolute;inset-inline-start:100%;inset-inline-end:auto;top:0;z-index:1001;display:none}:host(.md-sub-menu-item--open) .md-sub-menu-item__submenu{display:block}:host(.md-sub-menu-item--divider){padding-bottom:8px;margin-bottom:8px}:host(.md-sub-menu-item--divider)::after{content:'';position:absolute;bottom:0;inset-inline:0;height:1px;background-color:var(--md-sys-color-outline-variant, #CAC4D0)}:host([data-variant="standard"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-surface, #1C1B1F);border-radius:var(--md-sys-shape-corner-small, 8px)}:host([data-variant="standard"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"]:active){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="standard"]:first-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"]:last-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="standard"][data-after-gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="standard"][data-after-gap][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-tertiary-container, #31111D);border-radius:var(--md-sys-shape-corner-small, 8px)}:host([data-variant="vibrant"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:active){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:first-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:last-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"][data-after-gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"][data-after-gap][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"]) .md-sub-menu-item__leading,:host([data-variant="vibrant"]) .md-sub-menu-item__supporting,:host([data-variant="vibrant"]) .md-sub-menu-item__arrow{color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([data-variant="vibrant"]) .md-sub-menu-item__state-layer{background-color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const m=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.mdClick=r(this,"mdClick",7);this.headline="";this.supportingText="";this.disabled=false;this.divider=false;this.gap=false;this.badge="";this.density=0;this.submenuOpen=false;this.hasLeadingIcon=false;this.handleMouseEnter=()=>{this.openSubmenu(false)};this.handleMouseLeave=()=>{this.closeSubmenu()};this.handleKeyDown=s=>{if(this.disabled)return;if(s.key==="ArrowRight"||s.key==="Enter"||s.key===" "){s.preventDefault();s.stopPropagation();n(this.el);this.openSubmenu(true)}if((s.key==="ArrowLeft"||s.key==="Escape")&&this.submenuOpen){s.preventDefault();s.stopPropagation();const e=this.getNestedMenu();if(e?.close)e.close();setTimeout((()=>{this.submenuOpen=false;this.resetSubmenuStyles()}),100);this.el.focus();this.el.setAttribute("data-md-focused","")}};this.handleClick=s=>{if(this.disabled){s.preventDefault();s.stopPropagation();return}this.mdClick.emit()}}componentWillLoad(){this.hasLeadingIcon=!!this.el.querySelector('[slot="leading-icon"]')}componentDidLoad(){const s=this.getNestedMenu();if(s?.open){this.submenuOpen=true;if(s){s.style.position="relative"}}}getNestedMenu(){return this.el.querySelector('[slot="submenu"]')}async collapse(){clearTimeout(this.closeTimer);const s=this.getNestedMenu();if(s?.open)s.open=false;this.submenuOpen=false;this.resetSubmenuStyles();this.el.removeAttribute("data-md-focused")}openSubmenu(s=false){if(this.disabled)return;clearTimeout(this.closeTimer);this.submenuOpen=true;if(s){this.el.removeAttribute("data-md-focused")}const e=this.getNestedMenu();if(e){e.style.position="relative";if(e.show)e.show({autoFocus:s})}requestAnimationFrame((()=>{requestAnimationFrame((()=>this.autoPositionSubmenu()))}))}autoPositionSubmenu(){const s=this.el.shadowRoot?.querySelector(".md-sub-menu-item__submenu");if(!s)return;s.style.insetInlineStart="";s.style.insetInlineEnd="";s.style.top="";s.style.bottom="";const e=this.el.getBoundingClientRect();const r=s.getBoundingClientRect();const a=r.width>0?r.width:200;const t=r.height>0?r.height:200;const d=this.resolveDirection()==="rtl";const n=d?e.left-a<0:e.right+a>window.innerWidth;if(n){s.style.insetInlineStart="auto";s.style.insetInlineEnd="100%"}const o=r.width>0&&(d?r.right>window.innerWidth:r.left<0);if(o){s.style.insetInlineStart="100%";s.style.insetInlineEnd="auto"}if(e.top+t>window.innerHeight){s.style.top="auto";s.style.bottom="0"}}resolveDirection(){let s=this.el;while(s){const e=s.getAttribute?.("dir");if(e==="rtl"||e==="ltr")return e;s=s.parentElement}return"ltr"}closeSubmenu(){const s=this.getNestedMenu();if(s?.close)s.close();this.closeTimer=setTimeout((()=>{this.submenuOpen=false;this.resetSubmenuStyles()}),100)}resetSubmenuStyles(){const s=this.el.querySelector('[slot="submenu"]');if(s){s.style.position=""}const e=this.el.shadowRoot?.querySelector(".md-sub-menu-item__submenu");if(e){e.style.insetInlineStart="";e.style.insetInlineEnd="";e.style.top="";e.style.bottom=""}}disconnectedCallback(){clearTimeout(this.closeTimer)}render(){return a(t,{key:"329e6ba98df9f496d2c147296a6ea46f870af0ab",class:{"md-sub-menu-item":true,"md-sub-menu-item--disabled":this.disabled,"md-sub-menu-item--open":this.submenuOpen,"md-sub-menu-item--divider":this.divider,"md-sub-menu-item--gap":this.gap},role:"menuitem","aria-haspopup":"menu","aria-expanded":String(this.submenuOpen),"aria-disabled":this.disabled?"true":"false",tabindex:"-1",onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onKeyDown:this.handleKeyDown},a("md-ripple",{key:"9a5911ae293ec369cd58c5e1f312249049fd45c3",disabled:this.disabled}),a("span",{key:"64fcee34cca73f86e050bd88bce4333243746a64",class:"md-sub-menu-item__state-layer",part:"state-layer","aria-hidden":"true"}),this.hasLeadingIcon&&a("span",{key:"3252b107b872171d237f80517dead6d178def951",class:"md-sub-menu-item__leading",part:"leading-icon","aria-hidden":"true"},a("slot",{key:"55dd8915410eb1223e3fd3af4c89f5c3bc84a0dc",name:"leading-icon"})),a("span",{key:"c890f7649a39ee1c66f4b38af84b12d439b30c30",class:"md-sub-menu-item__content",part:"content"},a("span",{key:"4b3b1820819786e80ec9d818cfe19d13ba49968b",class:"md-sub-menu-item__headline",part:"headline"},this.headline),this.supportingText&&a("span",{key:"c2656cc25bb70f7ba056cb7a92d31b5e03cd2131",class:"md-sub-menu-item__supporting",part:"supporting-text"},this.supportingText)),this.badge&&a("span",{key:"141edb788ebbe07fef25d17994a104e376f473db",class:"md-sub-menu-item__badge",part:"badge"},this.badge),a("span",{key:"13537dc9b7eb2ea452bfa2b32c31b4c6ebb3c9ba",class:"md-sub-menu-item__arrow material-symbols-outlined","aria-hidden":"true"},"arrow_right"),a("div",{key:"577fe59c9008baf1da574063b188a300bb52b719",class:"md-sub-menu-item__submenu",onMouseEnter:()=>this.openSubmenu(),onMouseLeave:()=>this.closeSubmenu()},a("slot",{key:"c6a2697f9ec32f89d11828e11d1173addbc20d10",name:"submenu"})))}get el(){return this}static get style(){return i()}},[257,"md-sub-menu-item",{headline:[1],supportingText:[1,"supporting-text"],disabled:[516],divider:[516],gap:[516],badge:[1],density:[514],submenuOpen:[32],hasLeadingIcon:[32],collapse:[64]}]);function l(){if(typeof customElements==="undefined"){return}const s=["md-sub-menu-item","md-ripple"];s.forEach((s=>{switch(s){case"md-sub-menu-item":if(!customElements.get(d(s))){customElements.define(d(s),m)}break;case"md-ripple":if(!customElements.get(d(s))){o()}break}}))}l();const c=m;const p=l;export{c as MdSubMenuItem,p as defineCustomElement};
+import{p as s,H as e,c as r,h as a,d as t,t as d}from"./p-BR6gfOQH.js";import{t as n}from"./p-DYBUr7K_.js";import{d as o}from"./p-De3E5Q8v.js";const i=()=>`:host{display:flex;align-items:center;position:relative;overflow:visible;cursor:pointer;user-select:none;min-height:calc(48px + var(--md-sys-density-scale, 0) * 4px);--_icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));padding:0 var(--md-sys-spacing-inset-md, 12px);gap:var(--md-sys-spacing-gap-sm, 8px);color:var(--md-sys-color-on-surface, #1C1B1F);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;transition:background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     border-radius var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1))}@media (prefers-reduced-motion: reduce){:host{transition:none}}.md-sub-menu-item__state-layer{position:absolute;inset:0;border-radius:inherit;background-color:var(--md-sys-color-on-surface, #1C1B1F);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(:hover) .md-sub-menu-item__state-layer{opacity:0.08}:host(:active) .md-sub-menu-item__state-layer{opacity:0.12}:host(:focus-visible) .md-sub-menu-item__state-layer,:host([data-md-focused]) .md-sub-menu-item__state-layer{opacity:0.12}:host(:focus-visible),:host([data-md-focused]){outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}:host(.md-sub-menu-item--open) .md-sub-menu-item__state-layer{opacity:0.08}:host(.md-sub-menu-item--disabled){cursor:default;opacity:0.38;pointer-events:none}.md-sub-menu-item__leading{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--_icon-size);height:var(--_icon-size);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-sub-menu-item__leading ::slotted(*:not(md-badge)){font-size:var(--_icon-size) !important;width:var(--_icon-size);height:var(--_icon-size);color:inherit}.md-sub-menu-item__content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.md-sub-menu-item__headline{font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-body-large-size, 16px);font-weight:var(--md-sys-typescale-body-large-weight, 400);line-height:var(--md-sys-typescale-body-large-line-height, 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-sub-menu-item__supporting{font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-body-medium-size, 14px);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);color:var(--md-sys-color-on-surface-variant, #49454F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-sub-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 8px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-sys-color-tertiary-container, #FFD8E4);color:var(--md-sys-color-on-tertiary-container, #31111D);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-size, 11px);font-weight:var(--md-sys-typescale-label-small-weight, 500);line-height:var(--md-sys-typescale-label-small-line-height, 16px);letter-spacing:var(--md-sys-typescale-label-small-tracking, 0.5px);white-space:nowrap}.md-sub-menu-item__arrow{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;flex-shrink:0;color:var(--md-sys-color-on-surface-variant, #49454F);transition:transform var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host([dir="rtl"]) .md-sub-menu-item__arrow,:host-context([dir="rtl"]) .md-sub-menu-item__arrow{--_arrow-flip:-1}.md-sub-menu-item__arrow{transform:scaleX(var(--_arrow-flip, 1))}:host(.md-sub-menu-item--open) .md-sub-menu-item__arrow{transform:scaleX(var(--_arrow-flip, 1)) rotate(90deg)}.md-sub-menu-item__submenu{position:absolute;inset-inline-start:100%;inset-inline-end:auto;top:0;z-index:1001;display:none}:host(.md-sub-menu-item--open) .md-sub-menu-item__submenu{display:block}:host(.md-sub-menu-item--divider){padding-bottom:8px;margin-bottom:8px}:host(.md-sub-menu-item--divider)::after{content:'';position:absolute;bottom:0;inset-inline:0;height:1px;background-color:var(--md-sys-color-outline-variant, #CAC4D0)}:host([data-variant="standard"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-surface, #1C1B1F);border-radius:var(--md-sys-shape-corner-small, 8px)}:host([data-variant="standard"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"]:active){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="standard"]:first-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"]:last-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="standard"][data-after-gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="standard"][data-after-gap][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-tertiary-container, #31111D);border-radius:var(--md-sys-shape-corner-small, 8px)}:host([data-variant="vibrant"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:active){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:first-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:last-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"][data-after-gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"][data-after-gap][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"]) .md-sub-menu-item__leading,:host([data-variant="vibrant"]) .md-sub-menu-item__supporting,:host([data-variant="vibrant"]) .md-sub-menu-item__arrow{color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([data-variant="vibrant"]) .md-sub-menu-item__state-layer{background-color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const m=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.mdClick=r(this,"mdClick",7);this.headline="";this.supportingText="";this.disabled=false;this.divider=false;this.gap=false;this.badge="";this.density=0;this.submenuOpen=false;this.hasLeadingIcon=false;this.handleMouseEnter=()=>{this.openSubmenu(false)};this.handleMouseLeave=()=>{this.closeSubmenu()};this.handleKeyDown=s=>{if(this.disabled)return;if(s.key==="ArrowRight"||s.key==="Enter"||s.key===" "){s.preventDefault();s.stopPropagation();n(this.el);this.openSubmenu(true)}if((s.key==="ArrowLeft"||s.key==="Escape")&&this.submenuOpen){s.preventDefault();s.stopPropagation();const e=this.getNestedMenu();if(e?.close)e.close();setTimeout((()=>{this.submenuOpen=false;this.resetSubmenuStyles()}),100);this.el.focus();this.el.setAttribute("data-md-focused","")}};this.handleClick=s=>{if(this.disabled){s.preventDefault();s.stopPropagation();return}this.mdClick.emit()}}componentWillLoad(){this.hasLeadingIcon=!!this.el.querySelector('[slot="leading-icon"]')}componentDidLoad(){const s=this.getNestedMenu();if(s?.open){this.submenuOpen=true;if(s){s.style.position="relative"}}}getNestedMenu(){return this.el.querySelector('[slot="submenu"]')}async collapse(){clearTimeout(this.closeTimer);const s=this.getNestedMenu();if(s?.open)s.open=false;this.submenuOpen=false;this.resetSubmenuStyles();this.el.removeAttribute("data-md-focused")}openSubmenu(s=false){if(this.disabled)return;clearTimeout(this.closeTimer);this.submenuOpen=true;if(s){this.el.removeAttribute("data-md-focused")}const e=this.getNestedMenu();if(e){e.style.position="relative";if(e.show)e.show({autoFocus:s})}requestAnimationFrame((()=>{requestAnimationFrame((()=>this.autoPositionSubmenu()))}))}autoPositionSubmenu(){const s=this.el.shadowRoot?.querySelector(".md-sub-menu-item__submenu");if(!s)return;s.style.insetInlineStart="";s.style.insetInlineEnd="";s.style.top="";s.style.bottom="";const e=this.el.getBoundingClientRect();const r=s.getBoundingClientRect();const a=r.width>0?r.width:200;const t=r.height>0?r.height:200;const d=this.resolveDirection()==="rtl";const n=d?e.left-a<0:e.right+a>window.innerWidth;if(n){s.style.insetInlineStart="auto";s.style.insetInlineEnd="100%"}const o=r.width>0&&(d?r.right>window.innerWidth:r.left<0);if(o){s.style.insetInlineStart="100%";s.style.insetInlineEnd="auto"}if(e.top+t>window.innerHeight){s.style.top="auto";s.style.bottom="0"}}resolveDirection(){let s=this.el;while(s){const e=s.getAttribute?.("dir");if(e==="rtl"||e==="ltr")return e;s=s.parentElement}return"ltr"}closeSubmenu(){const s=this.getNestedMenu();if(s?.close)s.close();this.closeTimer=setTimeout((()=>{this.submenuOpen=false;this.resetSubmenuStyles()}),100)}resetSubmenuStyles(){const s=this.el.querySelector('[slot="submenu"]');if(s){s.style.position=""}const e=this.el.shadowRoot?.querySelector(".md-sub-menu-item__submenu");if(e){e.style.insetInlineStart="";e.style.insetInlineEnd="";e.style.top="";e.style.bottom=""}}disconnectedCallback(){clearTimeout(this.closeTimer)}render(){return a(t,{key:"329e6ba98df9f496d2c147296a6ea46f870af0ab",class:{"md-sub-menu-item":true,"md-sub-menu-item--disabled":this.disabled,"md-sub-menu-item--open":this.submenuOpen,"md-sub-menu-item--divider":this.divider,"md-sub-menu-item--gap":this.gap},role:"menuitem","aria-haspopup":"menu","aria-expanded":String(this.submenuOpen),"aria-disabled":this.disabled?"true":"false",tabindex:"-1",onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onKeyDown:this.handleKeyDown},a("md-ripple",{key:"9a5911ae293ec369cd58c5e1f312249049fd45c3",disabled:this.disabled}),a("span",{key:"64fcee34cca73f86e050bd88bce4333243746a64",class:"md-sub-menu-item__state-layer",part:"state-layer","aria-hidden":"true"}),this.hasLeadingIcon&&a("span",{key:"3252b107b872171d237f80517dead6d178def951",class:"md-sub-menu-item__leading",part:"leading-icon","aria-hidden":"true"},a("slot",{key:"55dd8915410eb1223e3fd3af4c89f5c3bc84a0dc",name:"leading-icon"})),a("span",{key:"c890f7649a39ee1c66f4b38af84b12d439b30c30",class:"md-sub-menu-item__content",part:"content"},a("span",{key:"4b3b1820819786e80ec9d818cfe19d13ba49968b",class:"md-sub-menu-item__headline",part:"headline"},this.headline),this.supportingText&&a("span",{key:"c2656cc25bb70f7ba056cb7a92d31b5e03cd2131",class:"md-sub-menu-item__supporting",part:"supporting-text"},this.supportingText)),this.badge&&a("span",{key:"141edb788ebbe07fef25d17994a104e376f473db",class:"md-sub-menu-item__badge",part:"badge"},this.badge),a("span",{key:"13537dc9b7eb2ea452bfa2b32c31b4c6ebb3c9ba",class:"md-sub-menu-item__arrow material-symbols-outlined","aria-hidden":"true"},"arrow_right"),a("div",{key:"577fe59c9008baf1da574063b188a300bb52b719",class:"md-sub-menu-item__submenu",onMouseEnter:()=>this.openSubmenu(),onMouseLeave:()=>this.closeSubmenu()},a("slot",{key:"c6a2697f9ec32f89d11828e11d1173addbc20d10",name:"submenu"})))}get el(){return this}static get style(){return i()}},[257,"md-sub-menu-item",{headline:[1],supportingText:[1,"supporting-text"],disabled:[516],divider:[516],gap:[516],badge:[1],density:[514],submenuOpen:[32],hasLeadingIcon:[32],collapse:[64]}]);function l(){if(typeof customElements==="undefined"){return}const s=["md-sub-menu-item","md-ripple"];s.forEach((s=>{switch(s){case"md-sub-menu-item":if(!customElements.get(d(s))){customElements.define(d(s),m)}break;case"md-ripple":if(!customElements.get(d(s))){o()}break}}))}l();const c=m;const p=l;export{c as MdSubMenuItem,p as defineCustomElement};
 //# sourceMappingURL=md-sub-menu-item.js.map

package/dist/components/md-tab.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as a,h as i,d as s,t as n}from"./p-BR6gfOQH.js";import{t as o}from"./p-DYBUr7K_.js";import{d as r}from"./p-CTC8XAB6.js";const d=()=>`:host{--_container-color:var(--md-tab-container-color, transparent);--_active-label-color:var(--md-tab-active-label-color, var(--md-sys-color-primary, #6750A4));--_inactive-label-color:var(--md-tab-inactive-label-color, var(--md-sys-color-on-surface-variant, #49454F));--_active-icon-color:var(--md-tab-active-icon-color, var(--md-sys-color-primary, #6750A4));--_inactive-icon-color:var(--md-tab-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_indicator-color:var(--md-tab-active-indicator-color, var(--md-sys-color-primary, #6750A4));--_indicator-height:var(--md-tab-active-indicator-height, 3px);--_divider-color:var(--md-tab-divider-color, var(--md-tabs-divider-color, var(--md-sys-color-outline-variant, #CAC4D0)));--_icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;flex:1;min-inline-size:max(48px, calc(90px + var(--md-sys-density-scale, 0) * 8px));block-size:calc(48px + var(--md-sys-density-scale, 0) * 4px);padding-inline:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box;color:var(--_inactive-label-color);background-color:var(--_container-color);transition:color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease)}:host(.md-tab--stacked.md-tab--primary){block-size:calc(64px + var(--md-sys-density-scale, 0) * 4px)}:host(.md-tab--active){color:var(--_active-label-color)}:host(.md-tab--active) .md-tab__icon{color:var(--_active-icon-color)}:host(.md-tab--secondary){align-items:stretch;--_active-label-color:var(--md-tab-active-label-color, var(--md-sys-color-on-surface, #1C1B1F));--_indicator-color:var(--md-tab-active-indicator-color, var(--md-sys-color-primary, #6750A4));--_indicator-height:var(--md-tab-active-indicator-height, 2px)}:host(.md-tab--disabled){cursor:default;pointer-events:none;color:color-mix(     in srgb,     var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%),     transparent   )}.md-tab__state-layer{position:absolute;inset:0;background-color:currentColor;opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short1, 50ms) var(--md-sys-motion-easing-standard, ease)}:host(:hover) .md-tab__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(:focus-visible) .md-tab__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}:host(:active) .md-tab__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}:host(:focus-visible){outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}:host(.md-tab--primary) .md-tab__inner{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;inline-size:max-content;max-inline-size:100%;min-block-size:0;position:relative;z-index:1}:host(.md-tab--secondary) .md-tab__inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;inline-size:100%;min-block-size:0;position:relative;z-index:1}.md-tab__content{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;max-inline-size:100%;min-inline-size:0}:host(.md-tab--primary) .md-tab__content{flex:1 1 auto;justify-content:center;min-block-size:0}.md-tab__content--inline{flex-direction:row;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-tab__icon-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.md-tab__icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;color:var(--_inactive-icon-color);transition:color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease)}::slotted([slot="icon"]){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);font-size:var(--_icon-size);color:inherit;fill:currentColor;pointer-events:none}.md-tab__label{font-family:var(--md-sys-typescale-title-small-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-title-small-font-weight, 500);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-title-small-letter-spacing, 0.1px);white-space:nowrap;display:inline-flex;align-items:center;gap:var(--md-sys-spacing-gap-xs, 4px);max-inline-size:100%;min-inline-size:0}.md-tab__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.md-tab__badge{position:absolute;inset-block-start:-4px;inset-inline-end:-8px;min-inline-size:6px;min-block-size:6px;padding-inline:3px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-sys-color-error, #B3261E);color:var(--md-sys-color-on-error, #FFFFFF);font-size:10px;font-weight:500;line-height:14px;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.md-tab__badge:empty{padding:0;inline-size:6px;block-size:6px}.md-tab__badge--inline{position:relative;inset-block-start:auto;inset-inline-end:auto}:host(.md-tab--stacked) .md-tab__badge{inset-block-start:-2px;inset-inline-end:-6px}.md-tab__indicator{flex-shrink:0;background-color:var(--_indicator-color);block-size:var(--_indicator-height);opacity:0}:host(.md-tab--primary) .md-tab__indicator{position:relative;align-self:stretch;min-inline-size:24px;margin-block-start:2px;border-radius:var(--md-sys-shape-corner-full, 9999px) var(--md-sys-shape-corner-full, 9999px) 0 0;transform:scaleX(0.88);transform-origin:center;transition:transform var(--md-tab-glide-duration, var(--md-sys-motion-duration-medium4, 400ms)) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),     opacity var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-tab--primary) .md-tab__indicator--active{opacity:1;transform:translateX(var(--md-tab-glide-x, 0px)) scaleX(var(--md-tab-glide-scale, 1))}:host(.md-tab--secondary)>.md-tab__indicator{position:absolute;inset-inline:0;inset-block-end:0;inline-size:100%;max-inline-size:none;border-radius:2px 2px 0 0;transform:none;transform-origin:center;margin-block-start:0;z-index:1;transition:transform var(--md-tab-glide-duration, var(--md-sys-motion-duration-medium4, 400ms)) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),     opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-tab--secondary)>.md-tab__indicator.md-tab__indicator--active{opacity:1;transform:translateX(var(--md-tab-glide-x, 0px)) scaleX(var(--md-tab-glide-scale, 1))}.md-tab__divider{position:absolute;inset-block-end:0;inset-inline:0;block-size:1px;background-color:var(--_divider-color);z-index:0}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}.md-tab__icon-wrapper ::slotted([slot='badge']){position:absolute;inset-block-start:2px;inset-inline-end:-8px;z-index:1}.md-tab__label ::slotted([slot='badge']){position:static;margin-inline-start:var(--md-sys-spacing-inset-xs, 4px)}@media (prefers-reduced-motion: reduce){.md-tab__indicator,.md-tab__state-layer{transition-duration:0.01ms !important}}@media (forced-colors: active){.md-tab__indicator{background-color:SelectedItem}:host(.md-tab--active) .md-tab__label{text-decoration:underline;color:SelectedItem}.md-tab__divider{background-color:CanvasText}:host(.md-tab--disabled){color:GrayText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdTabClick=a(this,"mdTabClick",7);this.label="";this.icon="";this.active=false;this.disabled=false;this.inlineIcon=false;this.variant="primary";this.controls="";this.density=0;this.hasSlottedIcon=false;this.didLoad=false;this.warnedName=false;this.handleClick=()=>{if(this.disabled)return;this.mdTabClick.emit()};this.handleKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();if(!this.disabled){o(this.el);this.mdTabClick.emit()}}}}onDisabledChange(){this.syncStandaloneTabindex();this.el.dispatchEvent(new CustomEvent("mdTabDisabledChange",{bubbles:true}))}connectedCallback(){if(this.didLoad){queueMicrotask((()=>this.syncStandaloneTabindex()))}}componentWillLoad(){this.hasSlottedIcon=Array.from(this.el.children).some((t=>t.getAttribute("slot")==="icon"))}componentDidLoad(){this.didLoad=true;this.syncStandaloneTabindex();this.checkAccessibleName();const t=this.el.shadowRoot;if(!t)return;const e=t.querySelector('slot[name="icon"]');e?.addEventListener("slotchange",(()=>{this.hasSlottedIcon=e.assignedElements().length>0;this.checkAccessibleName()}))}checkAccessibleName(){return}hasTablistAncestor(){let t=this.el;while(t){if(t.tagName==="MD-TABS")return true;const e=t;t=e.assignedSlot??(t instanceof ShadowRoot?t.host:t.parentNode)}return false}syncStandaloneTabindex(){if(this.hasTablistAncestor())return;this.el.setAttribute("tabindex",this.disabled?"-1":"0")}render(){const t=!!this.icon||this.hasSlottedIcon;const e=!!this.label;const a=this.badge!==undefined;const n=this.inlineIcon&&t&&e;const o=t&&e&&!n;return i(s,{key:"f32d633ee759bb012060d73aa3c3905af41a6897",class:{"md-tab":true,[`md-tab--${this.variant}`]:true,"md-tab--active":this.active,"md-tab--disabled":this.disabled,"md-tab--inline-icon":n,"md-tab--stacked":o,"md-tab--icon-only":t&&!e},role:"tab","aria-selected":this.active?"true":"false","aria-disabled":this.disabled?"true":null,"aria-controls":this.controls||null,onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("md-ripple",{key:"d17e9eeb19b97015db61e0ece0315574ab249d07",disabled:this.disabled}),i("span",{key:"14694eacb977eba5e237af7be7db08831a7d8d54",class:"md-tab__state-layer",part:"state-layer","aria-hidden":"true"}),i("span",{key:"e375db0da4fba50532387bec0072c7d5a555310b",class:"md-tab__inner"},i("span",{key:"eb5cd54e380543d23561e1a0b952604e039bbd2f",class:{"md-tab__content":true,"md-tab__content--inline":n},part:"content"},t&&i("span",{key:"7538d5f0222dfc41bda882c9ac3355031e23c17b",class:"md-tab__icon-wrapper"},i("slot",{key:"b4ecc54c1cb1dfa59fcb7c89c9f72fef5baf58eb",name:"icon"},i("span",{key:"ae8668fe6571d37dd99ce3a1f38c01d821c15e22",class:"md-tab__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.icon)),i("slot",{key:"28d4fd59cde7ee4a35c74248ba921aa0e9c9275e",name:"badge"},a&&i("span",{key:"d8e5de8403b9d71ae023e023c18df315b76a2ba8",class:"md-tab__badge","aria-label":this.badge||"notification"},this.badge))),e&&i("span",{key:"4ad10ca62cdcd4f198760a11808b4e5637278d94",class:"md-tab__label",part:"label"},i("span",{key:"67d8113aa4e1db5d04ed99567c0c9efc3af37b92",class:"md-tab__label-text"},this.label),!t&&i("slot",{key:"77b8a07667a13c21b21b6b9f95885e5d2ad2daad",name:"badge"},a&&i("span",{key:"bda28af4562a7943c35d424a7ceae8d13f4151c8",class:"md-tab__badge md-tab__badge--inline","aria-label":this.badge||"notification"},this.badge)))),this.variant==="primary"?i("span",{class:{"md-tab__indicator":true,"md-tab__indicator--active":this.active},part:"indicator","aria-hidden":"true"}):null),this.variant==="secondary"?i("span",{class:{"md-tab__indicator":true,"md-tab__indicator--active":this.active},part:"indicator","aria-hidden":"true"}):null,i("span",{key:"b5dbf48d5986c950d728e10060ccb42a47050621",class:"md-tab__divider",part:"divider","aria-hidden":"true"}))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChange:0}]}}static get style(){return d()}},[257,"md-tab",{label:[1],icon:[1],active:[1540],disabled:[516],inlineIcon:[516,"inline-icon"],variant:[513],badge:[1],controls:[1],density:[514],hasSlottedIcon:[32]},undefined,{disabled:[{onDisabledChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["md-tab","md-ripple"];t.forEach((t=>{switch(t){case"md-tab":if(!customElements.get(n(t))){customElements.define(n(t),c)}break;case"md-ripple":if(!customElements.get(n(t))){r()}break}}))}l();const m=c;const b=l;export{m as MdTab,b as defineCustomElement};
+import{p as t,H as e,c as a,h as i,d as s,t as n}from"./p-BR6gfOQH.js";import{t as o}from"./p-DYBUr7K_.js";import{d as r}from"./p-De3E5Q8v.js";const d=()=>`:host{--_container-color:var(--md-tab-container-color, transparent);--_active-label-color:var(--md-tab-active-label-color, var(--md-sys-color-primary, #6750A4));--_inactive-label-color:var(--md-tab-inactive-label-color, var(--md-sys-color-on-surface-variant, #49454F));--_active-icon-color:var(--md-tab-active-icon-color, var(--md-sys-color-primary, #6750A4));--_inactive-icon-color:var(--md-tab-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_indicator-color:var(--md-tab-active-indicator-color, var(--md-sys-color-primary, #6750A4));--_indicator-height:var(--md-tab-active-indicator-height, 3px);--_divider-color:var(--md-tab-divider-color, var(--md-tabs-divider-color, var(--md-sys-color-outline-variant, #CAC4D0)));--_icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;flex:1;min-inline-size:max(48px, calc(90px + var(--md-sys-density-scale, 0) * 8px));block-size:calc(48px + var(--md-sys-density-scale, 0) * 4px);padding-inline:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));box-sizing:border-box;color:var(--_inactive-label-color);background-color:var(--_container-color);transition:color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease)}:host(.md-tab--stacked.md-tab--primary){block-size:calc(64px + var(--md-sys-density-scale, 0) * 4px)}:host(.md-tab--active){color:var(--_active-label-color)}:host(.md-tab--active) .md-tab__icon{color:var(--_active-icon-color)}:host(.md-tab--secondary){align-items:stretch;--_active-label-color:var(--md-tab-active-label-color, var(--md-sys-color-on-surface, #1C1B1F));--_indicator-color:var(--md-tab-active-indicator-color, var(--md-sys-color-primary, #6750A4));--_indicator-height:var(--md-tab-active-indicator-height, 2px)}:host(.md-tab--disabled){cursor:default;pointer-events:none;color:color-mix(     in srgb,     var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%),     transparent   )}.md-tab__state-layer{position:absolute;inset:0;background-color:currentColor;opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short1, 50ms) var(--md-sys-motion-easing-standard, ease)}:host(:hover) .md-tab__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(:focus-visible) .md-tab__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}:host(:active) .md-tab__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}:host(:focus-visible){outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}:host(.md-tab--primary) .md-tab__inner{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;inline-size:max-content;max-inline-size:100%;min-block-size:0;position:relative;z-index:1}:host(.md-tab--secondary) .md-tab__inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;inline-size:100%;min-block-size:0;position:relative;z-index:1}.md-tab__content{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;max-inline-size:100%;min-inline-size:0}:host(.md-tab--primary) .md-tab__content{flex:1 1 auto;justify-content:center;min-block-size:0}.md-tab__content--inline{flex-direction:row;gap:var(--md-sys-spacing-gap-sm, 8px)}.md-tab__icon-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.md-tab__icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;color:var(--_inactive-icon-color);transition:color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease)}::slotted([slot="icon"]){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);font-size:var(--_icon-size);color:inherit;fill:currentColor;pointer-events:none}.md-tab__label{font-family:var(--md-sys-typescale-title-small-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-title-small-font-weight, 500);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-title-small-letter-spacing, 0.1px);white-space:nowrap;display:inline-flex;align-items:center;gap:var(--md-sys-spacing-gap-xs, 4px);max-inline-size:100%;min-inline-size:0}.md-tab__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.md-tab__badge{position:absolute;inset-block-start:-4px;inset-inline-end:-8px;min-inline-size:6px;min-block-size:6px;padding-inline:3px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-sys-color-error, #B3261E);color:var(--md-sys-color-on-error, #FFFFFF);font-size:10px;font-weight:500;line-height:14px;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.md-tab__badge:empty{padding:0;inline-size:6px;block-size:6px}.md-tab__badge--inline{position:relative;inset-block-start:auto;inset-inline-end:auto}:host(.md-tab--stacked) .md-tab__badge{inset-block-start:-2px;inset-inline-end:-6px}.md-tab__indicator{flex-shrink:0;background-color:var(--_indicator-color);block-size:var(--_indicator-height);opacity:0}:host(.md-tab--primary) .md-tab__indicator{position:relative;align-self:stretch;min-inline-size:24px;margin-block-start:2px;border-radius:var(--md-sys-shape-corner-full, 9999px) var(--md-sys-shape-corner-full, 9999px) 0 0;transform:scaleX(0.88);transform-origin:center;transition:transform var(--md-tab-glide-duration, var(--md-sys-motion-duration-medium4, 400ms)) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),     opacity var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-tab--primary) .md-tab__indicator--active{opacity:1;transform:translateX(var(--md-tab-glide-x, 0px)) scaleX(var(--md-tab-glide-scale, 1))}:host(.md-tab--secondary)>.md-tab__indicator{position:absolute;inset-inline:0;inset-block-end:0;inline-size:100%;max-inline-size:none;border-radius:2px 2px 0 0;transform:none;transform-origin:center;margin-block-start:0;z-index:1;transition:transform var(--md-tab-glide-duration, var(--md-sys-motion-duration-medium4, 400ms)) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),     opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-tab--secondary)>.md-tab__indicator.md-tab__indicator--active{opacity:1;transform:translateX(var(--md-tab-glide-x, 0px)) scaleX(var(--md-tab-glide-scale, 1))}.md-tab__divider{position:absolute;inset-block-end:0;inset-inline:0;block-size:1px;background-color:var(--_divider-color);z-index:0}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}.md-tab__icon-wrapper ::slotted([slot='badge']){position:absolute;inset-block-start:2px;inset-inline-end:-8px;z-index:1}.md-tab__label ::slotted([slot='badge']){position:static;margin-inline-start:var(--md-sys-spacing-inset-xs, 4px)}@media (prefers-reduced-motion: reduce){.md-tab__indicator,.md-tab__state-layer{transition-duration:0.01ms !important}}@media (forced-colors: active){.md-tab__indicator{background-color:SelectedItem}:host(.md-tab--active) .md-tab__label{text-decoration:underline;color:SelectedItem}.md-tab__divider{background-color:CanvasText}:host(.md-tab--disabled){color:GrayText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdTabClick=a(this,"mdTabClick",7);this.label="";this.icon="";this.active=false;this.disabled=false;this.inlineIcon=false;this.variant="primary";this.controls="";this.density=0;this.hasSlottedIcon=false;this.didLoad=false;this.warnedName=false;this.handleClick=()=>{if(this.disabled)return;this.mdTabClick.emit()};this.handleKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();if(!this.disabled){o(this.el);this.mdTabClick.emit()}}}}onDisabledChange(){this.syncStandaloneTabindex();this.el.dispatchEvent(new CustomEvent("mdTabDisabledChange",{bubbles:true}))}connectedCallback(){if(this.didLoad){queueMicrotask((()=>this.syncStandaloneTabindex()))}}componentWillLoad(){this.hasSlottedIcon=Array.from(this.el.children).some((t=>t.getAttribute("slot")==="icon"))}componentDidLoad(){this.didLoad=true;this.syncStandaloneTabindex();this.checkAccessibleName();const t=this.el.shadowRoot;if(!t)return;const e=t.querySelector('slot[name="icon"]');e?.addEventListener("slotchange",(()=>{this.hasSlottedIcon=e.assignedElements().length>0;this.checkAccessibleName()}))}checkAccessibleName(){return}hasTablistAncestor(){let t=this.el;while(t){if(t.tagName==="MD-TABS")return true;const e=t;t=e.assignedSlot??(t instanceof ShadowRoot?t.host:t.parentNode)}return false}syncStandaloneTabindex(){if(this.hasTablistAncestor())return;this.el.setAttribute("tabindex",this.disabled?"-1":"0")}render(){const t=!!this.icon||this.hasSlottedIcon;const e=!!this.label;const a=this.badge!==undefined;const n=this.inlineIcon&&t&&e;const o=t&&e&&!n;return i(s,{key:"f32d633ee759bb012060d73aa3c3905af41a6897",class:{"md-tab":true,[`md-tab--${this.variant}`]:true,"md-tab--active":this.active,"md-tab--disabled":this.disabled,"md-tab--inline-icon":n,"md-tab--stacked":o,"md-tab--icon-only":t&&!e},role:"tab","aria-selected":this.active?"true":"false","aria-disabled":this.disabled?"true":null,"aria-controls":this.controls||null,onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("md-ripple",{key:"d17e9eeb19b97015db61e0ece0315574ab249d07",disabled:this.disabled}),i("span",{key:"14694eacb977eba5e237af7be7db08831a7d8d54",class:"md-tab__state-layer",part:"state-layer","aria-hidden":"true"}),i("span",{key:"e375db0da4fba50532387bec0072c7d5a555310b",class:"md-tab__inner"},i("span",{key:"eb5cd54e380543d23561e1a0b952604e039bbd2f",class:{"md-tab__content":true,"md-tab__content--inline":n},part:"content"},t&&i("span",{key:"7538d5f0222dfc41bda882c9ac3355031e23c17b",class:"md-tab__icon-wrapper"},i("slot",{key:"b4ecc54c1cb1dfa59fcb7c89c9f72fef5baf58eb",name:"icon"},i("span",{key:"ae8668fe6571d37dd99ce3a1f38c01d821c15e22",class:"md-tab__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.icon)),i("slot",{key:"28d4fd59cde7ee4a35c74248ba921aa0e9c9275e",name:"badge"},a&&i("span",{key:"d8e5de8403b9d71ae023e023c18df315b76a2ba8",class:"md-tab__badge","aria-label":this.badge||"notification"},this.badge))),e&&i("span",{key:"4ad10ca62cdcd4f198760a11808b4e5637278d94",class:"md-tab__label",part:"label"},i("span",{key:"67d8113aa4e1db5d04ed99567c0c9efc3af37b92",class:"md-tab__label-text"},this.label),!t&&i("slot",{key:"77b8a07667a13c21b21b6b9f95885e5d2ad2daad",name:"badge"},a&&i("span",{key:"bda28af4562a7943c35d424a7ceae8d13f4151c8",class:"md-tab__badge md-tab__badge--inline","aria-label":this.badge||"notification"},this.badge)))),this.variant==="primary"?i("span",{class:{"md-tab__indicator":true,"md-tab__indicator--active":this.active},part:"indicator","aria-hidden":"true"}):null),this.variant==="secondary"?i("span",{class:{"md-tab__indicator":true,"md-tab__indicator--active":this.active},part:"indicator","aria-hidden":"true"}):null,i("span",{key:"b5dbf48d5986c950d728e10060ccb42a47050621",class:"md-tab__divider",part:"divider","aria-hidden":"true"}))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChange:0}]}}static get style(){return d()}},[257,"md-tab",{label:[1],icon:[1],active:[1540],disabled:[516],inlineIcon:[516,"inline-icon"],variant:[513],badge:[1],controls:[1],density:[514],hasSlottedIcon:[32]},undefined,{disabled:[{onDisabledChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["md-tab","md-ripple"];t.forEach((t=>{switch(t){case"md-tab":if(!customElements.get(n(t))){customElements.define(n(t),c)}break;case"md-ripple":if(!customElements.get(n(t))){r()}break}}))}l();const m=c;const b=l;export{m as MdTab,b as defineCustomElement};
 //# sourceMappingURL=md-tab.js.map

package/dist/components/md-table-expand-toggle.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,d as n,t as i}from"./p-BR6gfOQH.js";import{d as a}from"./p-DYL-8C5C.js";import{d as o}from"./p-CTC8XAB6.js";const d=()=>`:host{display:inline-flex;align-items:center;justify-content:center}md-icon-button{transition:transform var(--md-sys-motion-spring-spatial-fast-duration, 350ms)     var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.9))}:host(.md-table-expand-toggle--expanded) md-icon-button{transform:rotate(var(--md-table-expand-toggle-rotation, 90deg))}@media (prefers-reduced-motion: reduce){md-icon-button{transition-duration:0.01ms !important}}`;const r=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.buttonLabel="Expand row";this.icon="chevron_right";this.expanded=false;this.row=null;this.onRowExpandedChange=t=>{this.expanded=!!t.detail?.expanded};this.onClick=t=>{t.stopPropagation();void this.row?.toggle?.()}}bindRow(){this.row=this.el.closest("md-table-row");this.expanded=!!this.row?.expanded;this.row?.addEventListener("mdRowExpandedChange",this.onRowExpandedChange)}connectedCallback(){this.bindRow()}disconnectedCallback(){this.row?.removeEventListener("mdRowExpandedChange",this.onRowExpandedChange);this.row=null}render(){return s(n,{key:"9f420bcf56efa5d34f8aa90df23d0149ef66f87b",class:{"md-table-expand-toggle":true,"md-table-expand-toggle--expanded":this.expanded}},s("md-icon-button",{key:"50647cd52fbc410f4df374db634e121b51faef54",size:"xs",icon:this.icon,"aria-label":this.buttonLabel,"aria-expanded":this.expanded?"true":"false",onClick:this.onClick}))}get el(){return this}static get style(){return d()}},[1,"md-table-expand-toggle",{buttonLabel:[1,"button-label"],icon:[1],expanded:[32]}]);function l(){if(typeof customElements==="undefined"){return}const t=["md-table-expand-toggle","md-icon-button","md-ripple"];t.forEach((t=>{switch(t){case"md-table-expand-toggle":if(!customElements.get(i(t))){customElements.define(i(t),r)}break;case"md-icon-button":if(!customElements.get(i(t))){a()}break;case"md-ripple":if(!customElements.get(i(t))){o()}break}}))}l();const c=r;const m=l;export{c as MdTableExpandToggle,m as defineCustomElement};
+import{p as t,H as e,h as s,d as n,t as i}from"./p-BR6gfOQH.js";import{d as a}from"./p-zMR3UIR_.js";import{d as o}from"./p-De3E5Q8v.js";const d=()=>`:host{display:inline-flex;align-items:center;justify-content:center}md-icon-button{transition:transform var(--md-sys-motion-spring-spatial-fast-duration, 350ms)     var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.9))}:host(.md-table-expand-toggle--expanded) md-icon-button{transform:rotate(var(--md-table-expand-toggle-rotation, 90deg))}@media (prefers-reduced-motion: reduce){md-icon-button{transition-duration:0.01ms !important}}`;const r=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.buttonLabel="Expand row";this.icon="chevron_right";this.expanded=false;this.row=null;this.onRowExpandedChange=t=>{this.expanded=!!t.detail?.expanded};this.onClick=t=>{t.stopPropagation();void this.row?.toggle?.()}}bindRow(){this.row=this.el.closest("md-table-row");this.expanded=!!this.row?.expanded;this.row?.addEventListener("mdRowExpandedChange",this.onRowExpandedChange)}connectedCallback(){this.bindRow()}disconnectedCallback(){this.row?.removeEventListener("mdRowExpandedChange",this.onRowExpandedChange);this.row=null}render(){return s(n,{key:"9f420bcf56efa5d34f8aa90df23d0149ef66f87b",class:{"md-table-expand-toggle":true,"md-table-expand-toggle--expanded":this.expanded}},s("md-icon-button",{key:"50647cd52fbc410f4df374db634e121b51faef54",size:"xs",icon:this.icon,"aria-label":this.buttonLabel,"aria-expanded":this.expanded?"true":"false",onClick:this.onClick}))}get el(){return this}static get style(){return d()}},[1,"md-table-expand-toggle",{buttonLabel:[1,"button-label"],icon:[1],expanded:[32]}]);function l(){if(typeof customElements==="undefined"){return}const t=["md-table-expand-toggle","md-icon-button","md-ripple"];t.forEach((t=>{switch(t){case"md-table-expand-toggle":if(!customElements.get(i(t))){customElements.define(i(t),r)}break;case"md-icon-button":if(!customElements.get(i(t))){a()}break;case"md-ripple":if(!customElements.get(i(t))){o()}break}}))}l();const c=r;const m=l;export{c as MdTableExpandToggle,m as defineCustomElement};
 //# sourceMappingURL=md-table-expand-toggle.js.map

package/dist/components/md-table-pagination.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as a,h as s,d as i,t as n}from"./p-BR6gfOQH.js";import{d as l}from"./p-DYL-8C5C.js";import{d as o}from"./p-B-iHDK5h.js";import{d as r}from"./p-CCMritCA.js";import{d as c}from"./p-D8oM1Kr3.js";import{d}from"./p-tSoecrcz.js";import{d as p}from"./p-CTC8XAB6.js";import{d as m}from"./p-Lsoo1B-2.js";import{d as h}from"./p-CtVItLby.js";const b=()=>`:host{--_color:var(--md-table-pagination-color, var(--md-sys-color-on-surface-variant, #49454F));--_bg:var(--md-table-pagination-bg, transparent);--_pad-block:var(--md-table-pagination-padding-block, var(--md-sys-spacing-inset-sm, 8px));--_pad-inline:var(--md-table-pagination-padding-inline, 16px);display:flex;align-items:center;justify-content:flex-end;gap:max(12px, calc(24px + var(--md-sys-density-scale, 0) * 3px));padding-block:var(--_pad-block);padding-inline:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));background-color:var(--_bg);color:var(--_color);font-family:var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));letter-spacing:var(--md-sys-typescale-body-small-letter-spacing, 0.4px);flex-wrap:wrap}:host(.md-table-pagination--compact){gap:12px;padding-block:4px}:host(.md-table-pagination--disabled){opacity:0.6;pointer-events:none}.md-table-pagination__rpp{display:inline-flex;align-items:center;gap:max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px))}.md-table-pagination__rpp-select{inline-size:var(--md-table-pagination-select-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)))}.md-table-pagination__rpp-select::part(caret){inline-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));block-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));font-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px))}.md-table-pagination__display{white-space:nowrap;margin-inline-end:auto}.md-table-pagination__nav{display:inline-flex;align-items:center;gap:max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));--md-icon-button-container-width:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-container-height:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}:host([dir='rtl']) .md-table-pagination__nav md-icon-button,:host-context([dir='rtl']) .md-table-pagination__nav md-icon-button{transform:scaleX(-1)}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const g=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdPageChange=a(this,"mdPageChange",7);this.mdRowsPerPageChange=a(this,"mdRowsPerPageChange",7);this.count=0;this.page=0;this.rowsPerPage=10;this.rowsPerPageOptions="5,10,25,50";this.showFirstLast=false;this.labelDisplayedRows="%from%–%to% of %count%";this.labelRowsPerPage="Rows per page:";this.labelFirstPage="First page";this.labelPreviousPage="Previous page";this.labelNextPage="Next page";this.labelLastPage="Last page";this.labelAll="All";this.compact=false;this.disabled=false;this.density=0;this.handleFirst=()=>this.goToPage(0);this.handlePrev=()=>this.goToPage(this.page-1);this.handleNext=()=>this.goToPage(this.page+1);this.handleLast=()=>this.goToPage(this.lastPage);this.handleRppChange=t=>{const e=Number(t.detail);if(Number.isFinite(e)&&e>0)this.setRowsPerPage(e)}}clampPage(){const t=this.lastPage;if(this.page>t){this.page=Math.max(0,t)}}get selectDensity(){if(typeof getComputedStyle!=="function")return-2;try{const t=getComputedStyle(this.el).getPropertyValue("--md-sys-density-scale").trim();const e=parseInt(t,10);if(Number.isFinite(e)&&e<=-2)return Math.max(-4,e)}catch{}return-2}onInternalChrome(t){if(t.target===this.el)t.stopPropagation()}async goToPage(t){const e=Math.max(0,Math.min(t,this.lastPage));if(e===this.page)return;this.page=e;this.mdPageChange.emit({page:this.page})}async setRowsPerPage(t){if(t<=0||t===this.rowsPerPage)return;this.rowsPerPage=t;this.page=0;this.mdRowsPerPageChange.emit({rowsPerPage:t});this.mdPageChange.emit({page:0})}get lastPage(){if(this.rowsPerPage<=0)return 0;return Math.max(0,Math.ceil(this.count/this.rowsPerPage)-1)}get from(){if(this.count===0)return 0;return this.page*this.rowsPerPage+1}get to(){if(this.count===0)return 0;return Math.min((this.page+1)*this.rowsPerPage,this.count)}get displayLabel(){return this.labelDisplayedRows.replace("%from%",String(this.from)).replace("%to%",String(this.to)).replace("%count%",String(this.count))}get options(){return this.rowsPerPageOptions.split(",").map((t=>t.trim())).filter(Boolean).map((t=>{if(t.toLowerCase()==="all"){return{value:this.count||-1,label:this.labelAll}}const e=Number(t);return{value:Number.isFinite(e)?e:0,label:t}})).filter((t=>t.value>0))}render(){const t=this.page===0;const e=this.page>=this.lastPage;const a=this.options;const n=a.map((t=>({value:String(t.value),label:t.label})));return s(i,{key:"5085b1774d448df446c38190b457527ad3848251",class:{"md-table-pagination":true,"md-table-pagination--compact":this.compact,"md-table-pagination--disabled":this.disabled},role:"navigation","aria-label":"Pagination"},s("div",{key:"123d91c2d80ed872e6622bfa9ed559e1d42027ce",class:"md-table-pagination__display",part:"display","aria-live":"polite"},this.displayLabel),s("div",{key:"504c63f56c1976371f5c2bc52c54deaf5a1457b5",class:"md-table-pagination__rpp",part:"rpp"},s("span",{key:"0e50b53cc47e2e2f0559a3f81ec555133336335f",class:"md-table-pagination__rpp-label",id:"rpp-label"},this.labelRowsPerPage),s("md-select",{key:"f4efee88087b60878b872ca2b7c1d2d9aabaf072",class:"md-table-pagination__rpp-select",part:"rpp-select","aria-label":this.labelRowsPerPage,density:this.selectDensity,options:n,value:String(this.rowsPerPage),disabled:this.disabled,placement:"top-start",onMdChange:this.handleRppChange})),s("div",{key:"b6b7223cf62b83f37555a94795da0d4417591169",class:"md-table-pagination__nav",part:"nav"},this.showFirstLast&&s("md-icon-button",{key:"8de3ce2fed65c8cbf460007b19d4391881429c02",part:"first-button",icon:"first_page",size:"sm","aria-label":this.labelFirstPage,disabled:t||this.disabled,onClick:this.handleFirst}),s("md-icon-button",{key:"8cf4d3293041d808231f65d88f6dcbe54cdd656a",part:"prev-button",icon:"chevron_left",size:"sm","aria-label":this.labelPreviousPage,disabled:t||this.disabled,onClick:this.handlePrev}),s("md-icon-button",{key:"82b91a148450916f7420578298be3ec074cc7db4",part:"next-button",icon:"chevron_right",size:"sm","aria-label":this.labelNextPage,disabled:e||this.disabled,onClick:this.handleNext}),this.showFirstLast&&s("md-icon-button",{key:"fdfd85fe44719334caf0cd811f638fc14a70d9ed",part:"last-button",icon:"last_page",size:"sm","aria-label":this.labelLastPage,disabled:e||this.disabled,onClick:this.handleLast}),s("slot",{key:"c63ea200bd8f9ff07b27c74da2cff3a5101303f0",name:"actions"})))}get el(){return this}static get watchers(){return{count:[{clampPage:0}],rowsPerPage:[{clampPage:0}]}}static get style(){return b()}},[257,"md-table-pagination",{count:[2],page:[1538],rowsPerPage:[1538,"rows-per-page"],rowsPerPageOptions:[1,"rows-per-page-options"],showFirstLast:[516,"show-first-last"],labelDisplayedRows:[1,"label-displayed-rows"],labelRowsPerPage:[1,"label-rows-per-page"],labelFirstPage:[1,"label-first-page"],labelPreviousPage:[1,"label-previous-page"],labelNextPage:[1,"label-next-page"],labelLastPage:[1,"label-last-page"],labelAll:[1,"label-all"],compact:[516],disabled:[516],density:[514],goToPage:[64],setRowsPerPage:[64]},[[0,"mdClick","onInternalChrome"],[0,"mdChange","onInternalChrome"],[0,"mdOpen","onInternalChrome"],[0,"mdClose","onInternalChrome"]],{count:[{clampPage:0}],rowsPerPage:[{clampPage:0}]}]);function f(){if(typeof customElements==="undefined"){return}const t=["md-table-pagination","md-icon-button","md-loading-indicator","md-menu","md-menu-item","md-progress-indicator","md-ripple","md-select","md-text-field"];t.forEach((t=>{switch(t){case"md-table-pagination":if(!customElements.get(n(t))){customElements.define(n(t),g)}break;case"md-icon-button":if(!customElements.get(n(t))){l()}break;case"md-loading-indicator":if(!customElements.get(n(t))){o()}break;case"md-menu":if(!customElements.get(n(t))){r()}break;case"md-menu-item":if(!customElements.get(n(t))){c()}break;case"md-progress-indicator":if(!customElements.get(n(t))){d()}break;case"md-ripple":if(!customElements.get(n(t))){p()}break;case"md-select":if(!customElements.get(n(t))){m()}break;case"md-text-field":if(!customElements.get(n(t))){h()}break}}))}f();const y=g;const u=f;export{y as MdTablePagination,u as defineCustomElement};
+import{p as t,H as e,c as a,h as s,d as i,t as n}from"./p-BR6gfOQH.js";import{d as l}from"./p-zMR3UIR_.js";import{d as o}from"./p-C77M30dm.js";import{d as r}from"./p-2HV152w7.js";import{d as c}from"./p-tSoecrcz.js";import{d}from"./p-De3E5Q8v.js";import{d as p}from"./p-CNgkGl_1.js";import{d as m}from"./p-D5Ht729E.js";const h=()=>`:host{--_color:var(--md-table-pagination-color, var(--md-sys-color-on-surface-variant, #49454F));--_bg:var(--md-table-pagination-bg, transparent);--_pad-block:var(--md-table-pagination-padding-block, var(--md-sys-spacing-inset-sm, 8px));--_pad-inline:var(--md-table-pagination-padding-inline, 16px);display:flex;align-items:center;justify-content:flex-end;gap:max(12px, calc(24px + var(--md-sys-density-scale, 0) * 3px));padding-block:var(--_pad-block);padding-inline:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));background-color:var(--_bg);color:var(--_color);font-family:var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));letter-spacing:var(--md-sys-typescale-body-small-letter-spacing, 0.4px);flex-wrap:wrap}:host(.md-table-pagination--compact){gap:12px;padding-block:4px}:host(.md-table-pagination--disabled){opacity:0.6;pointer-events:none}.md-table-pagination__rpp{display:inline-flex;align-items:center;gap:max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px))}.md-table-pagination__rpp-select{inline-size:var(--md-table-pagination-select-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)))}.md-table-pagination__rpp-select::part(caret){inline-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));block-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));font-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px))}.md-table-pagination__display{white-space:nowrap;margin-inline-end:auto}.md-table-pagination__nav{display:inline-flex;align-items:center;gap:max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));--md-icon-button-container-width:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-container-height:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}:host([dir='rtl']) .md-table-pagination__nav md-icon-button,:host-context([dir='rtl']) .md-table-pagination__nav md-icon-button{transform:scaleX(-1)}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const b=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdPageChange=a(this,"mdPageChange",7);this.mdRowsPerPageChange=a(this,"mdRowsPerPageChange",7);this.count=0;this.page=0;this.rowsPerPage=10;this.rowsPerPageOptions="5,10,25,50";this.showFirstLast=false;this.labelDisplayedRows="%from%–%to% of %count%";this.labelRowsPerPage="Rows per page:";this.labelFirstPage="First page";this.labelPreviousPage="Previous page";this.labelNextPage="Next page";this.labelLastPage="Last page";this.labelAll="All";this.compact=false;this.disabled=false;this.density=0;this.handleFirst=()=>this.goToPage(0);this.handlePrev=()=>this.goToPage(this.page-1);this.handleNext=()=>this.goToPage(this.page+1);this.handleLast=()=>this.goToPage(this.lastPage);this.handleRppChange=t=>{const e=Number(t.detail);if(Number.isFinite(e)&&e>0)this.setRowsPerPage(e)}}clampPage(){const t=this.lastPage;if(this.page>t){this.page=Math.max(0,t)}}get selectDensity(){if(typeof getComputedStyle!=="function")return-2;try{const t=getComputedStyle(this.el).getPropertyValue("--md-sys-density-scale").trim();const e=parseInt(t,10);if(Number.isFinite(e)&&e<=-2)return Math.max(-4,e)}catch{}return-2}onInternalChrome(t){if(t.target===this.el)t.stopPropagation()}async goToPage(t){const e=Math.max(0,Math.min(t,this.lastPage));if(e===this.page)return;this.page=e;this.mdPageChange.emit({page:this.page})}async setRowsPerPage(t){if(t<=0||t===this.rowsPerPage)return;this.rowsPerPage=t;this.page=0;this.mdRowsPerPageChange.emit({rowsPerPage:t});this.mdPageChange.emit({page:0})}get lastPage(){if(this.rowsPerPage<=0)return 0;return Math.max(0,Math.ceil(this.count/this.rowsPerPage)-1)}get from(){if(this.count===0)return 0;return this.page*this.rowsPerPage+1}get to(){if(this.count===0)return 0;return Math.min((this.page+1)*this.rowsPerPage,this.count)}get displayLabel(){return this.labelDisplayedRows.replace("%from%",String(this.from)).replace("%to%",String(this.to)).replace("%count%",String(this.count))}get options(){return this.rowsPerPageOptions.split(",").map((t=>t.trim())).filter(Boolean).map((t=>{if(t.toLowerCase()==="all"){return{value:this.count||-1,label:this.labelAll}}const e=Number(t);return{value:Number.isFinite(e)?e:0,label:t}})).filter((t=>t.value>0))}render(){const t=this.page===0;const e=this.page>=this.lastPage;const a=this.options;const n=a.map((t=>({value:String(t.value),label:t.label})));return s(i,{key:"5085b1774d448df446c38190b457527ad3848251",class:{"md-table-pagination":true,"md-table-pagination--compact":this.compact,"md-table-pagination--disabled":this.disabled},role:"navigation","aria-label":"Pagination"},s("div",{key:"123d91c2d80ed872e6622bfa9ed559e1d42027ce",class:"md-table-pagination__display",part:"display","aria-live":"polite"},this.displayLabel),s("div",{key:"504c63f56c1976371f5c2bc52c54deaf5a1457b5",class:"md-table-pagination__rpp",part:"rpp"},s("span",{key:"0e50b53cc47e2e2f0559a3f81ec555133336335f",class:"md-table-pagination__rpp-label",id:"rpp-label"},this.labelRowsPerPage),s("md-select",{key:"f4efee88087b60878b872ca2b7c1d2d9aabaf072",class:"md-table-pagination__rpp-select",part:"rpp-select","aria-label":this.labelRowsPerPage,density:this.selectDensity,options:n,value:String(this.rowsPerPage),disabled:this.disabled,placement:"top-start",onMdChange:this.handleRppChange})),s("div",{key:"b6b7223cf62b83f37555a94795da0d4417591169",class:"md-table-pagination__nav",part:"nav"},this.showFirstLast&&s("md-icon-button",{key:"8de3ce2fed65c8cbf460007b19d4391881429c02",part:"first-button",icon:"first_page",size:"sm","aria-label":this.labelFirstPage,disabled:t||this.disabled,onClick:this.handleFirst}),s("md-icon-button",{key:"8cf4d3293041d808231f65d88f6dcbe54cdd656a",part:"prev-button",icon:"chevron_left",size:"sm","aria-label":this.labelPreviousPage,disabled:t||this.disabled,onClick:this.handlePrev}),s("md-icon-button",{key:"82b91a148450916f7420578298be3ec074cc7db4",part:"next-button",icon:"chevron_right",size:"sm","aria-label":this.labelNextPage,disabled:e||this.disabled,onClick:this.handleNext}),this.showFirstLast&&s("md-icon-button",{key:"fdfd85fe44719334caf0cd811f638fc14a70d9ed",part:"last-button",icon:"last_page",size:"sm","aria-label":this.labelLastPage,disabled:e||this.disabled,onClick:this.handleLast}),s("slot",{key:"c63ea200bd8f9ff07b27c74da2cff3a5101303f0",name:"actions"})))}get el(){return this}static get watchers(){return{count:[{clampPage:0}],rowsPerPage:[{clampPage:0}]}}static get style(){return h()}},[257,"md-table-pagination",{count:[2],page:[1538],rowsPerPage:[1538,"rows-per-page"],rowsPerPageOptions:[1,"rows-per-page-options"],showFirstLast:[516,"show-first-last"],labelDisplayedRows:[1,"label-displayed-rows"],labelRowsPerPage:[1,"label-rows-per-page"],labelFirstPage:[1,"label-first-page"],labelPreviousPage:[1,"label-previous-page"],labelNextPage:[1,"label-next-page"],labelLastPage:[1,"label-last-page"],labelAll:[1,"label-all"],compact:[516],disabled:[516],density:[514],goToPage:[64],setRowsPerPage:[64]},[[0,"mdClick","onInternalChrome"],[0,"mdChange","onInternalChrome"],[0,"mdOpen","onInternalChrome"],[0,"mdClose","onInternalChrome"]],{count:[{clampPage:0}],rowsPerPage:[{clampPage:0}]}]);function g(){if(typeof customElements==="undefined"){return}const t=["md-table-pagination","md-icon-button","md-menu","md-menu-item","md-progress-indicator","md-ripple","md-select","md-text-field"];t.forEach((t=>{switch(t){case"md-table-pagination":if(!customElements.get(n(t))){customElements.define(n(t),b)}break;case"md-icon-button":if(!customElements.get(n(t))){l()}break;case"md-menu":if(!customElements.get(n(t))){o()}break;case"md-menu-item":if(!customElements.get(n(t))){r()}break;case"md-progress-indicator":if(!customElements.get(n(t))){c()}break;case"md-ripple":if(!customElements.get(n(t))){d()}break;case"md-select":if(!customElements.get(n(t))){p()}break;case"md-text-field":if(!customElements.get(n(t))){m()}break}}))}g();const f=b;const y=g;export{f as MdTablePagination,y as defineCustomElement};
 //# sourceMappingURL=md-table-pagination.js.map

package/dist/components/md-table-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["mdTablePaginationCss","MdTablePagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","count","page","rowsPerPage","rowsPerPageOptions","showFirstLast","labelDisplayedRows","labelRowsPerPage","labelFirstPage","labelPreviousPage","labelNextPage","labelLastPage","labelAll","compact","disabled","density","handleFirst","goToPage","handlePrev","handleNext","handleLast","lastPage","handleRppChange","e","n","Number","detail","isFinite","setRowsPerPage","clampPage","last","Math","max","selectDensity","getComputedStyle","raw","el","getPropertyValue","trim","parseInt","onInternalChrome","target","stopPropagation","min","mdPageChange","emit","rpp","mdRowsPerPageChange","ceil","from","to","displayLabel","replace","String","options","split","map","s","filter","Boolean","toLowerCase","value","label","o","render","isFirst","isLast","opts","selectOptions","h","Host","key","class","role","part","id","placement","onMdChange","icon","size","onClick","name"],"sources":["src/components/md-table-pagination/md-table-pagination.css?tag=md-table-pagination&encapsulation=shadow","src/components/md-table-pagination/md-table-pagination.tsx"],"sourcesContent":["/* ==========================================================\n md-table-pagination — built from house primitives\n (md-icon-button nav + md-select rows-per-page).\n\n PUBLIC CSS CUSTOM PROPERTIES:\n --md-table-pagination-color Foreground color\n --md-table-pagination-bg Background color\n --md-table-pagination-padding-block Top/bottom padding\n --md-table-pagination-padding-inline Left/right padding\n --md-table-pagination-select-width Rows-per-page select width (default 72px)\n\n CSS PARTS:\n rpp Rows-per-page region\n rpp-select The md-select picker\n display The \"from–to of count\" label\n nav Navigation buttons region\n first-button, prev-button, next-button, last-button\n ========================================================== /\n:host {\n --_color: var(--md-table-pagination-color, var(--md-sys-color-on-surface-variant, #49454F));\n --_bg: var(--md-table-pagination-bg, transparent);\n / Padding follows a global `data-density` ancestor (8px at density 0, so the\n default is unchanged); the `compact` boolean still force-overrides. /\n --_pad-block: var(--md-table-pagination-padding-block, var(--md-sys-spacing-inset-sm, 8px));\n --_pad-inline: var(--md-table-pagination-padding-inline, 16px);\n\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: max(12px, calc(24px + var(--md-sys-density-scale, 0) 3px));\n padding-block: var(--_pad-block);\n padding-inline: max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));\n background-color: var(--_bg);\n color: var(--_color);\n font-family: var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);\n font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n letter-spacing: var(--md-sys-typescale-body-small-letter-spacing, 0.4px);\n flex-wrap: wrap;\n}\n\n:host(.md-table-pagination--compact) {\n gap: 12px;\n padding-block: 4px;\n}\n\n:host(.md-table-pagination--disabled) {\n opacity: 0.6;\n pointer-events: none;\n}\n\n/* ----------- Rows-per-page region ----------- /\n.md-table-pagination__rpp {\n display: inline-flex;\n align-items: center;\n gap: max(4px, calc(8px + var(--md-sys-density-scale, 0) 1px));\n}\n\n.md-table-pagination__rpp-select {\n inline-size: var(--md-table-pagination-select-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)));\n}\n\n.md-table-pagination__rpp-select::part(caret) {\n inline-size: max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));\n block-size: max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));\n font-size: max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* ----------- Range display ----------- /\n.md-table-pagination__display {\n white-space: nowrap;\n / The range display leads the bar: it sits at the inline START while the\n rows-per-page selector + nav buttons group at the trailing edge. /\n margin-inline-end: auto;\n}\n\n/ ----------- Nav buttons ----------- /\n.md-table-pagination__nav {\n display: inline-flex;\n align-items: center;\n gap: max(0px, calc(4px + var(--md-sys-density-scale, 0) 1px));\n --md-icon-button-container-width: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n --md-icon-button-container-height: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n --md-icon-button-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* RTL: flip the chevron icon-buttons (logical direction). /\n:host([dir='rtl']) .md-table-pagination__nav md-icon-button,\n:host-context([dir='rtl']) .md-table-pagination__nav md-icon-button {\n transform: scaleX(-1);\n}\n\n/ ==========================================================\n DENSITY (local override)\n Maps the local `density` prop onto the same --md-sys-density-scale signal a\n global `data-density` ancestor sets. Declared on :host, so a local rung wins\n over the inherited global one. Every density-sensitive value in this file\n derives from that single signal by calc — never add a fixed per-rung ladder.\n ========================================================== /\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n Method,\n Listen,\n} from '@stencil/core';\n\n/\n Material Design 3 — Table Pagination.\n \n Drop into a `<md-table-container slot=\"bottom\">` for a complete data table.\n * Mirrors the MUI `<TablePagination>` API surface. Built from house\n * primitives: `md-icon-button` navigation and an `md-select` rows-per-page\n * picker (proper dismissal, keyboard support and theming for free).\n \n Emits:\n * - `mdPageChange` — when the page changes\n * - `mdRowsPerPageChange` — when the rows-per-page selector changes\n \n @slot actions - Custom pagination actions appended after the nav buttons\n * (MUI ActionsComponent parity).\n /\n@Component({\n tag: 'md-table-pagination',\n styleUrl: 'md-table-pagination.css',\n shadow: true,\n})\nexport class MdTablePagination {\n @Element() el!: HTMLElement;\n\n /* Total number of rows in the dataset. /\n @Prop() count: number = 0;\n\n /* Current zero-based page. /\n @Prop({ mutable: true, reflect: true }) page: number = 0;\n\n /* Rows shown per page. /\n @Prop({ mutable: true, reflect: true, attribute: 'rows-per-page' })\n rowsPerPage: number = 10;\n\n /\n Comma-separated list of options for the rows-per-page selector\n * (e.g. `\"5,10,25,50\"`). Use `\"all\"` (case-insensitive) to add an\n * \"All\" option that maps to the total count.\n /\n @Prop({ attribute: 'rows-per-page-options' }) rowsPerPageOptions: string = '5,10,25,50';\n\n /* Show the first / last page buttons. /\n @Prop({ reflect: true, attribute: 'show-first-last' }) showFirstLast: boolean = false;\n\n /\n Custom label used to display the current row range\n * (e.g. `\"Showing %from%–%to% of %count%\"`).\n * Tokens: `%from%`, `%to%`, `%count%`.\n /\n @Prop({ attribute: 'label-displayed-rows' })\n labelDisplayedRows: string = '%from%–%to% of %count%';\n\n /* Label for the rows-per-page selector. /\n @Prop({ attribute: 'label-rows-per-page' }) labelRowsPerPage: string = 'Rows per page:';\n\n /* Accessible label for the first-page button. /\n @Prop({ attribute: 'label-first-page' }) labelFirstPage: string = 'First page';\n\n /* Accessible label for the previous-page button. /\n @Prop({ attribute: 'label-previous-page' }) labelPreviousPage: string = 'Previous page';\n\n /* Accessible label for the next-page button. /\n @Prop({ attribute: 'label-next-page' }) labelNextPage: string = 'Next page';\n\n /* Accessible label for the last-page button. /\n @Prop({ attribute: 'label-last-page' }) labelLastPage: string = 'Last page';\n\n /* Label of the \"All\" rows-per-page option. /\n @Prop({ attribute: 'label-all' }) labelAll: string = 'All';\n\n /* Compact pagination layout (good for embedding inside cards). /\n @Prop({ reflect: true }) compact: boolean = false;\n\n /* Disabled state. /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Local density rung. Drives the same `--md-sys-density-scale` signal that a\n * global `data-density` ancestor sets, so a local value simply overrides the\n * inherited one. 0 = default, -4 = ultra-compact.\n /\n @Prop({ reflect: true }) density: 0 \| -1 \| -2 \| -3 \| -4 = 0;\n\n /* Fired when the user changes the page. /\n @Event() mdPageChange: EventEmitter<{ page: number }>;\n\n /* Fired when the user changes rows-per-page. /\n @Event() mdRowsPerPageChange: EventEmitter<{ rowsPerPage: number }>;\n\n @Watch('count')\n @Watch('rowsPerPage')\n clampPage() {\n const last = this.lastPage;\n if (this.page > last) {\n this.page = Math.max(0, last);\n }\n }\n\n private get selectDensity(): 0 \| -1 \| -2 \| -3 \| -4 {\n if (typeof getComputedStyle !== 'function') return -2;\n try {\n const raw = getComputedStyle(this.el).getPropertyValue('--md-sys-density-scale').trim();\n const n = parseInt(raw, 10);\n if (Number.isFinite(n) && n <= -2) return Math.max(-4, n) as -2 \| -3 \| -4;\n } catch { / noop / }\n return -2;\n }\n\n /* Internal md-icon-buttons / md-select emit composed events that retarget\n * to this host — swallow them so app-level delegation sees only the\n * pagination's own events. /\n @Listen('mdClick')\n @Listen('mdChange')\n @Listen('mdOpen')\n @Listen('mdClose')\n onInternalChrome(e: globalThis.Event) {\n if (e.target === this.el) e.stopPropagation();\n }\n\n /* Programmatically jump to a page. /\n @Method()\n async goToPage(page: number): Promise<void> {\n const target = Math.max(0, Math.min(page, this.lastPage));\n if (target === this.page) return;\n this.page = target;\n this.mdPageChange.emit({ page: this.page });\n }\n\n /* Programmatically set rows-per-page. /\n @Method()\n async setRowsPerPage(rpp: number): Promise<void> {\n if (rpp <= 0 \|\| rpp === this.rowsPerPage) return;\n this.rowsPerPage = rpp;\n this.page = 0;\n this.mdRowsPerPageChange.emit({ rowsPerPage: rpp });\n this.mdPageChange.emit({ page: 0 });\n }\n\n private get lastPage(): number {\n if (this.rowsPerPage <= 0) return 0;\n return Math.max(0, Math.ceil(this.count / this.rowsPerPage) - 1);\n }\n\n private get from(): number {\n if (this.count === 0) return 0;\n return this.page this.rowsPerPage + 1;\n }\n\n private get to(): number {\n if (this.count === 0) return 0;\n return Math.min((this.page + 1) * this.rowsPerPage, this.count);\n }\n\n private get displayLabel(): string {\n return this.labelDisplayedRows\n .replace('%from%', String(this.from))\n .replace('%to%', String(this.to))\n .replace('%count%', String(this.count));\n }\n\n private get options(): { value: number; label: string }[] {\n return this.rowsPerPageOptions\n .split(',')\n .map((s) => s.trim())\n .filter(Boolean)\n .map((raw) => {\n if (raw.toLowerCase() === 'all') {\n return { value: this.count \|\| -1, label: this.labelAll };\n }\n const n = Number(raw);\n return { value: Number.isFinite(n) ? n : 0, label: raw };\n })\n .filter((o) => o.value > 0);\n }\n\n private handleFirst = () => this.goToPage(0);\n private handlePrev = () => this.goToPage(this.page - 1);\n private handleNext = () => this.goToPage(this.page + 1);\n private handleLast = () => this.goToPage(this.lastPage);\n\n private handleRppChange = (e: CustomEvent<string>) => {\n const n = Number(e.detail);\n if (Number.isFinite(n) && n > 0) this.setRowsPerPage(n);\n };\n\n render() {\n const isFirst = this.page === 0;\n const isLast = this.page >= this.lastPage;\n const opts = this.options;\n const selectOptions = opts.map((o) => ({ value: String(o.value), label: o.label }));\n\n return (\n <Host\n class={{\n 'md-table-pagination': true,\n 'md-table-pagination--compact': this.compact,\n 'md-table-pagination--disabled': this.disabled,\n }}\n role=\"navigation\"\n aria-label=\"Pagination\"\n >\n {/* Range display LEADS the bar (far left; customize the string via\n label-displayed-rows, e.g. \"Showing %from%–%to% of %count% cases\"),\n while the controls group at the trailing edge. */}\n <div class=\"md-table-pagination__display\" part=\"display\" aria-live=\"polite\">\n {this.displayLabel}\n </div>\n\n <div class=\"md-table-pagination__rpp\" part=\"rpp\">\n <span class=\"md-table-pagination__rpp-label\" id=\"rpp-label\">\n {this.labelRowsPerPage}\n </span>\n <md-select\n class=\"md-table-pagination__rpp-select\"\n part=\"rpp-select\"\n aria-label={this.labelRowsPerPage}\n density={this.selectDensity}\n options={selectOptions}\n value={String(this.rowsPerPage)}\n disabled={this.disabled}\n placement=\"top-start\"\n onMdChange={this.handleRppChange}\n ></md-select>\n </div>\n\n <div class=\"md-table-pagination__nav\" part=\"nav\">\n {this.showFirstLast && (\n <md-icon-button\n part=\"first-button\"\n icon=\"first_page\"\n size=\"sm\"\n aria-label={this.labelFirstPage}\n disabled={isFirst \|\| this.disabled}\n onClick={this.handleFirst}\n ></md-icon-button>\n )}\n <md-icon-button\n part=\"prev-button\"\n icon=\"chevron_left\"\n size=\"sm\"\n aria-label={this.labelPreviousPage}\n disabled={isFirst \|\| this.disabled}\n onClick={this.handlePrev}\n ></md-icon-button>\n <md-icon-button\n part=\"next-button\"\n icon=\"chevron_right\"\n size=\"sm\"\n aria-label={this.labelNextPage}\n disabled={isLast \|\| this.disabled}\n onClick={this.handleNext}\n ></md-icon-button>\n {this.showFirstLast && (\n <md-icon-button\n part=\"last-button\"\n icon=\"last_page\"\n size=\"sm\"\n aria-label={this.labelLastPage}\n disabled={isLast \|\| this.disabled}\n onClick={this.handleLast}\n ></md-icon-button>\n )}\n <slot name=\"actions\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["mdTablePaginationCss","MdTablePagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","count","page","rowsPerPage","rowsPerPageOptions","showFirstLast","labelDisplayedRows","labelRowsPerPage","labelFirstPage","labelPreviousPage","labelNextPage","labelLastPage","labelAll","compact","disabled","density","handleFirst","goToPage","handlePrev","handleNext","handleLast","lastPage","handleRppChange","e","n","Number","detail","isFinite","setRowsPerPage","clampPage","last","Math","max","selectDensity","getComputedStyle","raw","el","getPropertyValue","trim","parseInt","onInternalChrome","target","stopPropagation","min","mdPageChange","emit","rpp","mdRowsPerPageChange","ceil","from","to","displayLabel","replace","String","options","split","map","s","filter","Boolean","toLowerCase","value","label","o","render","isFirst","isLast","opts","selectOptions","h","Host","key","class","role","part","id","placement","onMdChange","icon","size","onClick","name"],"sources":["src/components/md-table-pagination/md-table-pagination.css?tag=md-table-pagination&encapsulation=shadow","src/components/md-table-pagination/md-table-pagination.tsx"],"sourcesContent":["/* ==========================================================\n md-table-pagination — built from house primitives\n (md-icon-button nav + md-select rows-per-page).\n\n PUBLIC CSS CUSTOM PROPERTIES:\n --md-table-pagination-color Foreground color\n --md-table-pagination-bg Background color\n --md-table-pagination-padding-block Top/bottom padding\n --md-table-pagination-padding-inline Left/right padding\n --md-table-pagination-select-width Rows-per-page select width (default 72px)\n\n CSS PARTS:\n rpp Rows-per-page region\n rpp-select The md-select picker\n display The \"from–to of count\" label\n nav Navigation buttons region\n first-button, prev-button, next-button, last-button\n ========================================================== /\n:host {\n --_color: var(--md-table-pagination-color, var(--md-sys-color-on-surface-variant, #49454F));\n --_bg: var(--md-table-pagination-bg, transparent);\n / Padding follows a global `data-density` ancestor (8px at density 0, so the\n default is unchanged); the `compact` boolean still force-overrides. /\n --_pad-block: var(--md-table-pagination-padding-block, var(--md-sys-spacing-inset-sm, 8px));\n --_pad-inline: var(--md-table-pagination-padding-inline, 16px);\n\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: max(12px, calc(24px + var(--md-sys-density-scale, 0) 3px));\n padding-block: var(--_pad-block);\n padding-inline: max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));\n background-color: var(--_bg);\n color: var(--_color);\n font-family: var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);\n font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n letter-spacing: var(--md-sys-typescale-body-small-letter-spacing, 0.4px);\n flex-wrap: wrap;\n}\n\n:host(.md-table-pagination--compact) {\n gap: 12px;\n padding-block: 4px;\n}\n\n:host(.md-table-pagination--disabled) {\n opacity: 0.6;\n pointer-events: none;\n}\n\n/* ----------- Rows-per-page region ----------- /\n.md-table-pagination__rpp {\n display: inline-flex;\n align-items: center;\n gap: max(4px, calc(8px + var(--md-sys-density-scale, 0) 1px));\n}\n\n.md-table-pagination__rpp-select {\n inline-size: var(--md-table-pagination-select-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)));\n}\n\n.md-table-pagination__rpp-select::part(caret) {\n inline-size: max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));\n block-size: max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));\n font-size: max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* ----------- Range display ----------- /\n.md-table-pagination__display {\n white-space: nowrap;\n / The range display leads the bar: it sits at the inline START while the\n rows-per-page selector + nav buttons group at the trailing edge. /\n margin-inline-end: auto;\n}\n\n/ ----------- Nav buttons ----------- /\n.md-table-pagination__nav {\n display: inline-flex;\n align-items: center;\n gap: max(0px, calc(4px + var(--md-sys-density-scale, 0) 1px));\n --md-icon-button-container-width: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n --md-icon-button-container-height: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n --md-icon-button-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* RTL: flip the chevron icon-buttons (logical direction). /\n:host([dir='rtl']) .md-table-pagination__nav md-icon-button,\n:host-context([dir='rtl']) .md-table-pagination__nav md-icon-button {\n transform: scaleX(-1);\n}\n\n/ ==========================================================\n DENSITY (local override)\n Maps the local `density` prop onto the same --md-sys-density-scale signal a\n global `data-density` ancestor sets. Declared on :host, so a local rung wins\n over the inherited global one. Every density-sensitive value in this file\n derives from that single signal by calc — never add a fixed per-rung ladder.\n ========================================================== /\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n Method,\n Listen,\n} from '@stencil/core';\n\n/\n Material Design 3 — Table Pagination.\n \n Drop into a `<md-table-container slot=\"bottom\">` for a complete data table.\n * Mirrors the MUI `<TablePagination>` API surface. Built from house\n * primitives: `md-icon-button` navigation and an `md-select` rows-per-page\n * picker (proper dismissal, keyboard support and theming for free).\n \n Emits:\n * - `mdPageChange` — when the page changes\n * - `mdRowsPerPageChange` — when the rows-per-page selector changes\n \n @slot actions - Custom pagination actions appended after the nav buttons\n * (MUI ActionsComponent parity).\n /\n@Component({\n tag: 'md-table-pagination',\n styleUrl: 'md-table-pagination.css',\n shadow: true,\n})\nexport class MdTablePagination {\n @Element() el!: HTMLElement;\n\n /* Total number of rows in the dataset. /\n @Prop() count: number = 0;\n\n /* Current zero-based page. /\n @Prop({ mutable: true, reflect: true }) page: number = 0;\n\n /* Rows shown per page. /\n @Prop({ mutable: true, reflect: true, attribute: 'rows-per-page' })\n rowsPerPage: number = 10;\n\n /\n Comma-separated list of options for the rows-per-page selector\n * (e.g. `\"5,10,25,50\"`). Use `\"all\"` (case-insensitive) to add an\n * \"All\" option that maps to the total count.\n /\n @Prop({ attribute: 'rows-per-page-options' }) rowsPerPageOptions: string = '5,10,25,50';\n\n /* Show the first / last page buttons. /\n @Prop({ reflect: true, attribute: 'show-first-last' }) showFirstLast: boolean = false;\n\n /\n Custom label used to display the current row range\n * (e.g. `\"Showing %from%–%to% of %count%\"`).\n * Tokens: `%from%`, `%to%`, `%count%`.\n /\n @Prop({ attribute: 'label-displayed-rows' })\n labelDisplayedRows: string = '%from%–%to% of %count%';\n\n /* Label for the rows-per-page selector. /\n @Prop({ attribute: 'label-rows-per-page' }) labelRowsPerPage: string = 'Rows per page:';\n\n /* Accessible label for the first-page button. /\n @Prop({ attribute: 'label-first-page' }) labelFirstPage: string = 'First page';\n\n /* Accessible label for the previous-page button. /\n @Prop({ attribute: 'label-previous-page' }) labelPreviousPage: string = 'Previous page';\n\n /* Accessible label for the next-page button. /\n @Prop({ attribute: 'label-next-page' }) labelNextPage: string = 'Next page';\n\n /* Accessible label for the last-page button. /\n @Prop({ attribute: 'label-last-page' }) labelLastPage: string = 'Last page';\n\n /* Label of the \"All\" rows-per-page option. /\n @Prop({ attribute: 'label-all' }) labelAll: string = 'All';\n\n /* Compact pagination layout (good for embedding inside cards). /\n @Prop({ reflect: true }) compact: boolean = false;\n\n /* Disabled state. /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Local density rung. Drives the same `--md-sys-density-scale` signal that a\n * global `data-density` ancestor sets, so a local value simply overrides the\n * inherited one. 0 = default, -4 = ultra-compact.\n /\n @Prop({ reflect: true }) density: 0 \| -1 \| -2 \| -3 \| -4 = 0;\n\n /* Fired when the user changes the page. /\n @Event() mdPageChange: EventEmitter<{ page: number }>;\n\n /* Fired when the user changes rows-per-page. /\n @Event() mdRowsPerPageChange: EventEmitter<{ rowsPerPage: number }>;\n\n @Watch('count')\n @Watch('rowsPerPage')\n clampPage() {\n const last = this.lastPage;\n if (this.page > last) {\n this.page = Math.max(0, last);\n }\n }\n\n private get selectDensity(): 0 \| -1 \| -2 \| -3 \| -4 {\n if (typeof getComputedStyle !== 'function') return -2;\n try {\n const raw = getComputedStyle(this.el).getPropertyValue('--md-sys-density-scale').trim();\n const n = parseInt(raw, 10);\n if (Number.isFinite(n) && n <= -2) return Math.max(-4, n) as -2 \| -3 \| -4;\n } catch { / noop / }\n return -2;\n }\n\n /* Internal md-icon-buttons / md-select emit composed events that retarget\n * to this host — swallow them so app-level delegation sees only the\n * pagination's own events. /\n @Listen('mdClick')\n @Listen('mdChange')\n @Listen('mdOpen')\n @Listen('mdClose')\n onInternalChrome(e: globalThis.Event) {\n if (e.target === this.el) e.stopPropagation();\n }\n\n /* Programmatically jump to a page. /\n @Method()\n async goToPage(page: number): Promise<void> {\n const target = Math.max(0, Math.min(page, this.lastPage));\n if (target === this.page) return;\n this.page = target;\n this.mdPageChange.emit({ page: this.page });\n }\n\n /* Programmatically set rows-per-page. /\n @Method()\n async setRowsPerPage(rpp: number): Promise<void> {\n if (rpp <= 0 \|\| rpp === this.rowsPerPage) return;\n this.rowsPerPage = rpp;\n this.page = 0;\n this.mdRowsPerPageChange.emit({ rowsPerPage: rpp });\n this.mdPageChange.emit({ page: 0 });\n }\n\n private get lastPage(): number {\n if (this.rowsPerPage <= 0) return 0;\n return Math.max(0, Math.ceil(this.count / this.rowsPerPage) - 1);\n }\n\n private get from(): number {\n if (this.count === 0) return 0;\n return this.page this.rowsPerPage + 1;\n }\n\n private get to(): number {\n if (this.count === 0) return 0;\n return Math.min((this.page + 1) * this.rowsPerPage, this.count);\n }\n\n private get displayLabel(): string {\n return this.labelDisplayedRows\n .replace('%from%', String(this.from))\n .replace('%to%', String(this.to))\n .replace('%count%', String(this.count));\n }\n\n private get options(): { value: number; label: string }[] {\n return this.rowsPerPageOptions\n .split(',')\n .map((s) => s.trim())\n .filter(Boolean)\n .map((raw) => {\n if (raw.toLowerCase() === 'all') {\n return { value: this.count \|\| -1, label: this.labelAll };\n }\n const n = Number(raw);\n return { value: Number.isFinite(n) ? n : 0, label: raw };\n })\n .filter((o) => o.value > 0);\n }\n\n private handleFirst = () => this.goToPage(0);\n private handlePrev = () => this.goToPage(this.page - 1);\n private handleNext = () => this.goToPage(this.page + 1);\n private handleLast = () => this.goToPage(this.lastPage);\n\n private handleRppChange = (e: CustomEvent<string>) => {\n const n = Number(e.detail);\n if (Number.isFinite(n) && n > 0) this.setRowsPerPage(n);\n };\n\n render() {\n const isFirst = this.page === 0;\n const isLast = this.page >= this.lastPage;\n const opts = this.options;\n const selectOptions = opts.map((o) => ({ value: String(o.value), label: o.label }));\n\n return (\n <Host\n class={{\n 'md-table-pagination': true,\n 'md-table-pagination--compact': this.compact,\n 'md-table-pagination--disabled': this.disabled,\n }}\n role=\"navigation\"\n aria-label=\"Pagination\"\n >\n {/* Range display LEADS the bar (far left; customize the string via\n label-displayed-rows, e.g. \"Showing %from%–%to% of %count% cases\"),\n while the controls group at the trailing edge. */}\n <div class=\"md-table-pagination__display\" part=\"display\" aria-live=\"polite\">\n {this.displayLabel}\n </div>\n\n <div class=\"md-table-pagination__rpp\" part=\"rpp\">\n <span class=\"md-table-pagination__rpp-label\" id=\"rpp-label\">\n {this.labelRowsPerPage}\n </span>\n <md-select\n class=\"md-table-pagination__rpp-select\"\n part=\"rpp-select\"\n aria-label={this.labelRowsPerPage}\n density={this.selectDensity}\n options={selectOptions}\n value={String(this.rowsPerPage)}\n disabled={this.disabled}\n placement=\"top-start\"\n onMdChange={this.handleRppChange}\n ></md-select>\n </div>\n\n <div class=\"md-table-pagination__nav\" part=\"nav\">\n {this.showFirstLast && (\n <md-icon-button\n part=\"first-button\"\n icon=\"first_page\"\n size=\"sm\"\n aria-label={this.labelFirstPage}\n disabled={isFirst \|\| this.disabled}\n onClick={this.handleFirst}\n ></md-icon-button>\n )}\n <md-icon-button\n part=\"prev-button\"\n icon=\"chevron_left\"\n size=\"sm\"\n aria-label={this.labelPreviousPage}\n disabled={isFirst \|\| this.disabled}\n onClick={this.handlePrev}\n ></md-icon-button>\n <md-icon-button\n part=\"next-button\"\n icon=\"chevron_right\"\n size=\"sm\"\n aria-label={this.labelNextPage}\n disabled={isLast \|\| this.disabled}\n onClick={this.handleNext}\n ></md-icon-button>\n {this.showFirstLast && (\n <md-icon-button\n part=\"last-button\"\n icon=\"last_page\"\n size=\"sm\"\n aria-label={this.labelLastPage}\n disabled={isLast \|\| this.disabled}\n onClick={this.handleLast}\n ></md-icon-button>\n )}\n <slot name=\"actions\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8TAAA,MAAMA,EAAuB,IAAM,80E,MCiCtBC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAC,CAAAC,G,sKASUC,KAAAC,MAAgB,EAGgBD,KAAAE,KAAe,EAIvDF,KAAAG,YAAsB,GAOwBH,KAAAI,mBAA6B,aAGpBJ,KAAAK,cAAyB,MAQhFL,KAAAM,mBAA6B,yBAGeN,KAAAO,iBAA2B,iBAG9BP,KAAAQ,eAAyB,aAGtBR,KAAAS,kBAA4B,gBAGhCT,KAAAU,cAAwB,YAGxBV,KAAAW,cAAwB,YAG9BX,KAAAY,SAAmB,MAG5BZ,KAAAa,QAAmB,MAGnBb,KAAAc,SAAoB,MAOpBd,KAAAe,QAAiC,EA8FlDf,KAAAgB,YAAc,IAAMhB,KAAKiB,SAAS,GAClCjB,KAAAkB,WAAa,IAAMlB,KAAKiB,SAASjB,KAAKE,KAAO,GAC7CF,KAAAmB,WAAa,IAAMnB,KAAKiB,SAASjB,KAAKE,KAAO,GAC7CF,KAAAoB,WAAa,IAAMpB,KAAKiB,SAASjB,KAAKqB,UAEtCrB,KAAAsB,gBAAmBC,IACzB,MAAMC,EAAIC,OAAOF,EAAEG,QACnB,GAAID,OAAOE,SAASH,IAAMA,EAAI,EAAGxB,KAAK4B,eAAeJ,EAAE,CAqF1D,CAhLC,SAAAK,GACE,MAAMC,EAAO9B,KAAKqB,SAClB,GAAIrB,KAAKE,KAAO4B,EAAM,CACpB9B,KAAKE,KAAO6B,KAAKC,IAAI,EAAGF,E,EAI5B,iBAAYG,GACV,UAAWC,mBAAqB,WAAY,OAAO,EACnD,IACE,MAAMC,EAAMD,iBAAiBlC,KAAKoC,IAAIC,iBAAiB,0BAA0BC,OACjF,MAAMd,EAAIe,SAASJ,EAAK,IACxB,GAAIV,OAAOE,SAASH,IAAMA,IAAK,EAAI,OAAOO,KAAKC,KAAI,EAAIR,E,CACvD,MAAM,CACR,OAAO,C,CAUT,gBAAAgB,CAAiBjB,GACf,GAAIA,EAAEkB,SAAWzC,KAAKoC,GAAIb,EAAEmB,iB,CAK9B,cAAMzB,CAASf,GACb,MAAMuC,EAASV,KAAKC,IAAI,EAAGD,KAAKY,IAAIzC,EAAMF,KAAKqB,WAC/C,GAAIoB,IAAWzC,KAAKE,KAAM,OAC1BF,KAAKE,KAAOuC,EACZzC,KAAK4C,aAAaC,KAAK,CAAE3C,KAAMF,KAAKE,M,CAKtC,oBAAM0B,CAAekB,GACnB,GAAIA,GAAO,GAAKA,IAAQ9C,KAAKG,YAAa,OAC1CH,KAAKG,YAAc2C,EACnB9C,KAAKE,KAAO,EACZF,KAAK+C,oBAAoBF,KAAK,CAAE1C,YAAa2C,IAC7C9C,KAAK4C,aAAaC,KAAK,CAAE3C,KAAM,G,CAGjC,YAAYmB,GACV,GAAIrB,KAAKG,aAAe,EAAG,OAAO,EAClC,OAAO4B,KAAKC,IAAI,EAAGD,KAAKiB,KAAKhD,KAAKC,MAAQD,KAAKG,aAAe,E,CAGhE,QAAY8C,GACV,GAAIjD,KAAKC,QAAU,EAAG,OAAO,EAC7B,OAAOD,KAAKE,KAAOF,KAAKG,YAAc,C,CAGxC,MAAY+C,GACV,GAAIlD,KAAKC,QAAU,EAAG,OAAO,EAC7B,OAAO8B,KAAKY,KAAK3C,KAAKE,KAAO,GAAKF,KAAKG,YAAaH,KAAKC,M,CAG3D,gBAAYkD,GACV,OAAOnD,KAAKM,mBACT8C,QAAQ,SAAUC,OAAOrD,KAAKiD,OAC9BG,QAAQ,OAAQC,OAAOrD,KAAKkD,KAC5BE,QAAQ,UAAWC,OAAOrD,KAAKC,O,CAGpC,WAAYqD,GACV,OAAOtD,KAAKI,mBACTmD,MAAM,KACNC,KAAKC,GAAMA,EAAEnB,SACboB,OAAOC,SACPH,KAAKrB,IACJ,GAAIA,EAAIyB,gBAAkB,MAAO,CAC/B,MAAO,CAAEC,MAAO7D,KAAKC,QAAS,EAAI6D,MAAO9D,KAAKY,S,CAEhD,MAAMY,EAAIC,OAAOU,GACjB,MAAO,CAAE0B,MAAOpC,OAAOE,SAASH,GAAKA,EAAI,EAAGsC,MAAO3B,EAAK,IAEzDuB,QAAQK,GAAMA,EAAEF,MAAQ,G,CAa7B,MAAAG,GACE,MAAMC,EAAUjE,KAAKE,OAAS,EAC9B,MAAMgE,EAASlE,KAAKE,MAAQF,KAAKqB,SACjC,MAAM8C,EAAOnE,KAAKsD,QAClB,MAAMc,EAAgBD,EAAKX,KAAKO,IAAC,CAAQF,MAAOR,OAAOU,EAAEF,OAAQC,MAAOC,EAAED,UAE1E,OACEO,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,sBAAuB,KACvB,+BAAgCxE,KAAKa,QACrC,gCAAiCb,KAAKc,UAExC2D,KAAK,aAAY,aACN,cAKXJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BAA+BE,KAAK,UAAS,YAAW,UAChE1E,KAAKmD,cAGRkB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BAA2BE,KAAK,OACzCL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,iCAAiCG,GAAG,aAC7C3E,KAAKO,kBAER8D,EAAA,aAAAE,IAAA,2CACEC,MAAM,kCACNE,KAAK,aAAY,aACL1E,KAAKO,iBACjBQ,QAASf,KAAKiC,cACdqB,QAASc,EACTP,MAAOR,OAAOrD,KAAKG,aACnBW,SAAUd,KAAKc,SACf8D,UAAU,YACVC,WAAY7E,KAAKsB,mBAIrB+C,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BAA2BE,KAAK,OACxC1E,KAAKK,eACJgE,EAAA,kBAAAE,IAAA,2CACEG,KAAK,eACLI,KAAK,aACLC,KAAK,KAAI,aACG/E,KAAKQ,eACjBM,SAAUmD,GAAWjE,KAAKc,SAC1BkE,QAAShF,KAAKgB,cAGlBqD,EAAA,kBAAAE,IAAA,2CACEG,KAAK,cACLI,KAAK,eACLC,KAAK,KAAI,aACG/E,KAAKS,kBACjBK,SAAUmD,GAAWjE,KAAKc,SAC1BkE,QAAShF,KAAKkB,aAEhBmD,EAAA,kBAAAE,IAAA,2CACEG,KAAK,cACLI,KAAK,gBACLC,KAAK,KAAI,aACG/E,KAAKU,cACjBI,SAAUoD,GAAUlE,KAAKc,SACzBkE,QAAShF,KAAKmB,aAEfnB,KAAKK,eACJgE,EAAA,kBAAAE,IAAA,2CACEG,KAAK,cACLI,KAAK,YACLC,KAAK,KAAI,aACG/E,KAAKW,cACjBG,SAAUoD,GAAUlE,KAAKc,SACzBkE,QAAShF,KAAKoB,aAGlBiD,EAAA,QAAAE,IAAA,2CAAMU,KAAK,a","ignoreList":[]}