npm - @internetarchive/elements - Versions diffs - 0.4.0 → 0.4.2-webdev-9107.0 - Mend

@internetarchive/elements 0.4.0 → 0.4.2-webdev-9107.0

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

package/dist/src/elements/ia-item-navigator/ia-item-navigator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-item-navigator.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n nothing,\n type CSSResultGroup,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport { ellipsesIcon } from './icons';\nimport './ia-itemnav-menu-slider';\nimport './ia-itemnav-no-theater-available';\nimport type { IAItemNavMenuSlider } from './ia-itemnav-menu-slider';\n\nimport {\n ToggleSideMenuOpenEvent,\n ToggleSidePanelOpenEvent,\n SetSideMenuContentsEvent,\n SetSideMenuShortcutsEvent,\n LoadingStateUpdatedEvent,\n ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './interfaces/menu-interfaces';\n\n/*\n A fullscreen-capable frame that hosts an Archive.org item's theater. The\n * consumer projects a header bar and the theater itself into the `header` and\n * `main` slots; a collapsible left drawer (`ia-itemnav-menu-slider`) is driven by a\n * data array of menu providers, and a minimized rail shows shortcut icons.\n \n The navigator is a shell — it does not know how to render any particular\n * viewer. Menu panel bodies are opaque `TemplateResult`s supplied by the\n * consumer via `menuContents`.\n /\n@customElement('ia-item-navigator')\nexport class IAItemNavigator extends LitElement {\n /* archive.org item identifier. /\n @property({ type: String }) identifier?: string;\n\n @property({ type: Boolean, reflect: true }) viewAvailable: boolean = true;\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({ type: Boolean }) signedIn = false;\n\n @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n @property({ type: Boolean, reflect: true, attribute: true })\n viewportInFullscreen: boolean \| null = null;\n\n @property({ type: Boolean, reflect: true }) menuOpened = false;\n\n @property({ type: String, reflect: true }) openMenu?: MenuId;\n\n /\n Whether the slotted theater is ready. While false the reader stays\n * hidden and the frame is empty.\n \n The navigator used to fill that gap with its own spinner, but a shell\n * shouldn't decide what loading looks like — and its glyph and fullscreen\n * caption were branding a consumer couldn't override. An indicator returns\n * once WEBDEV-8951 moves the shared status indicators into elements, so the\n * navigator can use that one instead of carrying its own.\n /\n @property({ type: Boolean, reflect: true, attribute: true }) loaded: boolean =\n false;\n\n /\n Set for the render where the drawer opens straight to a panel, so the\n * panel holds still and rides in. Every other path clears it, rather\n * than waiting for the drawer's `transitionend` — that never fires when\n * animations are disabled, which would strand the flag on.\n /\n @state() private drawerEntering = false;\n\n @query('ia-itemnav-menu-slider') private menuSlider!: IAItemNavMenuSlider;\n\n @query('button.toggle-menu') private toggleMenuButton!: HTMLButtonElement;\n\n slotChange(e: Event, type: 'header' \| 'main'): void {\n const slottedContent = (\n e.target as HTMLSlotElement\n ).assignedNodes()?.[0] as HTMLElement;\n\n this.dispatchEvent(\n new CustomEvent('slotChange', {\n detail: { slot: slottedContent, type },\n }),\n );\n this.requestUpdate();\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot\n name=\"header\"\n @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n ></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n </div>\n </div>\n `;\n }\n\n get noTheaterView(): TemplateResult {\n return html`<ia-itemnav-no-theater-available\n .identifier=${this.identifier}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-itemnav-no-theater-available>`;\n }\n\n get renderViewport(): TemplateResult \| typeof nothing {\n if (!this.viewAvailable) {\n return this.noTheaterView;\n }\n\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n return html`\n <div slot=\"main\" style=${slotVisibility}>\n <slot\n name=\"main\"\n @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n ></slot>\n </div>\n `;\n }\n\n loadingStateUpdated(e: LoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded ?? false;\n }\n\n /* Fullscreen Management /\n manageViewportFullscreen(e: ManageFullscreenEvent): void {\n const fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as ManageFullscreenEvent;\n\n this.dispatchEvent(event);\n }\n /* End Fullscreen Management /\n\n /* Side menu /\n get shouldRenderMenu(): boolean {\n return !!this.menuContents?.length;\n }\n\n toggleMenu(forceValue: boolean \| undefined = undefined): void {\n this.drawerEntering = false;\n this.menuOpened = forceValue !== undefined ? forceValue : !this.menuOpened;\n this.moveFocusForDrawer();\n }\n\n /\n Opening the drawer moves focus into it; closing hands focus back to the\n * toggle. Without this, opening from the shortcut rail would leave focus on\n * a button that is about to be hidden, dropping it to the document.\n /\n private moveFocusForDrawer(): void {\n this.updateComplete.then(() => {\n if (this.menuOpened) {\n this.menuSlider?.focusDrawer();\n } else {\n this.toggleMenuButton?.focus();\n }\n });\n }\n\n /\n Closing the drawer also closes whatever panel was open inside it, so the\n * two can't disagree and a stale panel can't reappear on the next open.\n /\n closeMenu(): void {\n this.openMenu = undefined;\n this.toggleMenu(false);\n }\n\n setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n this.drawerEntering = false;\n const { id } = e.detail;\n this.openMenu = id !== this.openMenu ? id : undefined;\n }\n\n /\n Clears the open channel when the slider closes its sub-panel, without\n * closing the drawer. Keeps `openMenu` in sync with the slider so the same\n * channel can be reopened afterwards.\n /\n closeSidePanel(): void {\n this.drawerEntering = false;\n this.openMenu = undefined;\n }\n\n setMenuContents(e: SetSideMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: SetSideMenuShortcutsEvent): void {\n this.menuShortcuts = [...e.detail];\n }\n\n /* Toggles Side Menu & Sets viewable subpanel /\n manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton(): TemplateResult {\n const label = this.menuOpened ? 'Close side panel' : 'Open side panel';\n return html`\n <button\n class=\"toggle-menu\"\n @click=${() => this.toggleMenu()}\n title=${label}\n aria-label=${label}\n aria-expanded=${this.menuOpened}\n aria-controls=\"menu\"\n >\n ${ellipsesIcon}\n </button>\n `;\n }\n\n get selectedMenuId(): MenuId \| '' {\n return this.openMenu \|\| '';\n }\n\n get renderSideMenu(): TemplateResult {\n return html`\n <nav aria-label=\"Item navigation\">\n <div\n class=\"minimized ${classMap({ hidden: this.menuOpened })}\"\n part=\"minimized-menu\"\n >\n ${this.shortcuts} ${this.menuToggleButton}\n </div>\n <!-- Closed drawers are inert, so what is off-screen is also out of\n the tab order and the accessibility tree. -->\n <div\n id=\"menu\"\n role=\"group\"\n aria-label=\"Item navigation menu\"\n ?inert=${!this.menuOpened}\n >\n <ia-itemnav-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.selectedMenuId}\n @menuTypeSelected=${this.setOpenMenu}\n @menuPanelClosed=${this.closeSidePanel}\n @menuSliderClosed=${this.closeMenu}\n ></ia-itemnav-menu-slider>\n </div>\n </nav>\n `;\n }\n /* End Side menu /\n\n /* Menu Shortcuts /\n openShortcut(selectedMenuId: MenuId = ''): void {\n // Opening straight to a panel is one movement: the drawer carries the\n // panel in, so the panel must not also slide (see `.drawer-entering`).\n // Only when the drawer is actually closed — switching shortcuts while it\n // is already open should still animate the panel across.\n this.drawerEntering = !this.menuOpened;\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n // The rail hides itself once the drawer opens, taking the focused\n // shortcut with it, so focus has to be placed deliberately.\n this.moveFocusForDrawer();\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id, label }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <li>\n <button\n class=\"shortcut ${id}\"\n @click=${() => this.openShortcut(id)}\n title=${label}\n aria-label=${label}\n aria-expanded=${this.menuOpened && this.openMenu === id}\n >\n ${icon}\n </button>\n </li>\n `;\n });\n return html`<ul class=\"shortcuts\" role=\"list\">\n ${shortcuts}\n </ul>`;\n }\n /* End Menu Shortcuts /\n\n /* Misc Render /\n get menuClass(): string {\n const hasMenuOrShortcuts =\n this.menuContents?.length \|\| this.menuShortcuts?.length;\n const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n // When the side menu renders, the minimized rail floats over the left edge;\n // `has-menu` lets the reader reserve its width so the theater isn't covered.\n const railState = this.shouldRenderMenu ? 'has-menu' : '';\n const enteringState = this.drawerEntering ? 'drawer-entering' : '';\n return `${drawerState} ${fullscreenState} ${railState} ${enteringState}`;\n }\n\n static get styles(): CSSResultGroup {\n const subnavWidth = css`var(--item-navigator-menu-width--)`;\n const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--item-navigator-menu-margin--)`;\n const theaterBg = css`var(--item-navigator-theater-bg-color--)`;\n const iconSize = css`var(--item-navigator-icon-size--)`;\n\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-menu-width--: var(\n --item-navigator-menu-width,\n 320px\n );\n --item-navigator-animation-timing--: var(\n --item-navigator-animation-timing,\n 200ms\n );\n --item-navigator-menu-margin--: var(\n --item-navigator-menu-margin,\n 42px\n );\n --item-navigator-theater-bg-color--: var(\n --item-navigator-theater-bg-color,\n #000\n );\n / Every glyph is square, so one knob sizes both axes. /\n --item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);\n / Icons follow the adjustable text color by default. /\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color, var(--true-white))\n );\n\n /\n * The component's internal sizing is expressed in em against this\n * base (10px matches petabox's base font size, which the upstream\n * demo set on the document root). Anchoring it here makes the\n * navigator self-contained — its scale no longer depends on the\n * consumer's root font-size. Override to rescale everything.\n /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n :host,\n #frame,\n .menu-and-reader {\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n :host,\n #frame {\n min-height: inherit;\n height: inherit;\n }\n\n slot {\n display: block;\n width: 100%;\n }\n\n slot {\n display: block;\n height: inherit;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n display: flex;\n flex-direction: column;\n /\n The overlay/shift breakpoint keys off the navigator's own width,\n * not the viewport's, so the frame is the query container. This\n * replaces a host-injected resize observer that set the class from\n * JS: layout drives it now, so there is nothing to inject, register\n * or tear down. The inline-size type contains width only, leaving the\n * flex column's height behaviour alone.\n /\n container-type: inline-size;\n container-name: navframe;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n /\n * Override the inherited height/min-height from the base #frame rule:\n * on a fixed element an explicit height wins over top/bottom, so the\n * inset (0 on all sides) can't fill the viewport unless height is\n * released back to auto.\n /\n height: auto;\n min-height: 0;\n }\n\n .hidden {\n display: none !important;\n }\n\n button {\n / Buttons don't inherit font-size from the UA stylesheet; inherit it\n so em-sized icons resolve against the component's base, not the\n browser's default button font-size. /\n font: inherit;\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n .menu-and-reader {\n position: relative;\n display: flex;\n flex: 1;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n margin-bottom: 0.2em;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button > {\n /** Prevent the icon's SVG description from stealing tooltip message /\n pointer-events: none;\n }\n\n nav .minimized button.toggle-menu > {\n border: 2px solid var(--item-navigator-icon-color--);\n border-radius: ${iconSize};\n width: ${iconSize};\n height: ${iconSize};\n margin: auto;\n }\n\n /* The rail is a list for assistive tech; strip the list chrome so it\n still reads as a row of icons. /\n .shortcuts,\n .shortcuts li {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .toggle-menu .ia-icon,\n .shortcuts .ia-icon {\n width: ${iconSize};\n height: ${iconSize};\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. /\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. /\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n transform: translateX(0);\n width: 100%;\n display: flex;\n /\n Ease the reader's size/position changes so the slotted theater\n * glides in sync with the sliding drawer (shift mode) and settles\n * smoothly on resize, rather than snapping. Overlay mode opts out\n * below so the full-width theater tracks resizes instantly.\n /\n transition:\n width ${transitionTiming} ease-out,\n margin-left ${transitionTiming} ease-out,\n transform ${transitionTiming} ease-out;\n }\n\n #reader > {\n width: 100%;\n display: flex;\n flex: 1;\n }\n\n /\n The minimized rail floats over the frame's left edge while the drawer\n * is closed, so pad the theater content by its width to avoid overlap.\n * This lives on the reader's content (not the reader box) and isn't\n * transitioned, so it snaps away on open — letting the reader box track\n * the drawer's edge exactly during the shift, rather than trailing it.\n /\n .has-menu:not(.open) #reader > {\n box-sizing: border-box;\n padding-left: ${menuMargin};\n }\n\n /* Opening straight to a panel is one movement. The panel is nested in\n #menu, so its own slide would compose with the drawer's transform\n and send it twice the distance in the same time — arriving late and\n travelling at double speed. Holding it still lets the drawer carry\n it in. /\n .drawer-entering #menu {\n --item-navigator-panel-transition--: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n / Shift: the drawer pushes the theater aside. /\n .open #reader {\n width: calc(100% - ${subnavWidth});\n margin-left: ${subnavWidth};\n }\n\n /\n * Overlay: too narrow to give the drawer its own column, so it covers\n * a full-width theater. The transition is dropped here so the theater\n * tracks resizes instantly instead of easing behind them.\n */\n @container navframe (max-width: 600px) {\n .open #reader {\n width: 100%;\n margin-left: 0;\n transition: none;\n }\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-item-navigator': IAItemNavigator;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-item-navigator.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n nothing,\n type CSSResultGroup,\n} from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport { ellipsesIcon } from './icons';\nimport './ia-itemnav-menu-slider';\nimport './ia-itemnav-no-theater-available';\nimport type { IAItemNavMenuSlider } from './ia-itemnav-menu-slider';\n\nimport {\n ToggleSideMenuOpenEvent,\n ToggleSidePanelOpenEvent,\n SetSideMenuContentsEvent,\n SetSideMenuShortcutsEvent,\n LoadingStateUpdatedEvent,\n ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './interfaces/menu-interfaces';\n\n/*\n A fullscreen-capable frame that hosts an Archive.org item's theater. The\n * consumer projects a header bar and the theater itself into the `header` and\n * `main` slots; a collapsible left drawer (`ia-itemnav-menu-slider`) is driven by a\n * data array of menu providers, and a minimized rail shows shortcut icons.\n \n The navigator is a shell — it does not know how to render any particular\n * viewer. Menu panel bodies are opaque `TemplateResult`s supplied by the\n * consumer via `menuContents`.\n /\n@customElement('ia-item-navigator')\nexport class IAItemNavigator extends LitElement {\n /* archive.org item identifier. /\n @property({ type: String }) identifier?: string;\n\n @property({ type: Boolean, reflect: true }) viewAvailable: boolean = true;\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({ type: Boolean }) signedIn = false;\n\n @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n @property({ type: Boolean, reflect: true, attribute: true })\n viewportInFullscreen: boolean \| null = null;\n\n @property({ type: Boolean, reflect: true }) menuOpened = false;\n\n @property({ type: String, reflect: true }) openMenu?: MenuId;\n\n /\n Whether the slotted theater is ready. While false the reader stays\n * hidden and the frame is empty.\n \n The navigator used to fill that gap with its own spinner, but a shell\n * shouldn't decide what loading looks like — and its glyph and fullscreen\n * caption were branding a consumer couldn't override. An indicator returns\n * once WEBDEV-8951 moves the shared status indicators into elements, so the\n * navigator can use that one instead of carrying its own.\n /\n @property({ type: Boolean, reflect: true, attribute: true }) loaded: boolean =\n false;\n\n /\n Set for the render where the drawer opens straight to a panel, so the\n * panel holds still and rides in. Every other path clears it, rather\n * than waiting for the drawer's `transitionend` — that never fires when\n * animations are disabled, which would strand the flag on.\n /\n @state() private drawerEntering = false;\n\n @query('ia-itemnav-menu-slider') private menuSlider!: IAItemNavMenuSlider;\n\n @query('button.toggle-menu') private toggleMenuButton!: HTMLButtonElement;\n\n slotChange(e: Event, type: 'header' \| 'main'): void {\n const slottedContent = (\n e.target as HTMLSlotElement\n ).assignedNodes()?.[0] as HTMLElement;\n\n this.dispatchEvent(\n new CustomEvent('slotChange', {\n detail: { slot: slottedContent, type },\n }),\n );\n this.requestUpdate();\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot\n name=\"header\"\n @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n ></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n </div>\n </div>\n `;\n }\n\n get noTheaterView(): TemplateResult {\n return html`<ia-itemnav-no-theater-available\n .identifier=${this.identifier}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-itemnav-no-theater-available>`;\n }\n\n get renderViewport(): TemplateResult \| typeof nothing {\n if (!this.viewAvailable) {\n return this.noTheaterView;\n }\n\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n return html`\n <div slot=\"main\" style=${slotVisibility}>\n <slot\n name=\"main\"\n @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n ></slot>\n </div>\n `;\n }\n\n loadingStateUpdated(e: LoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded ?? false;\n }\n\n /* Fullscreen Management /\n manageViewportFullscreen(e: ManageFullscreenEvent): void {\n const fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as ManageFullscreenEvent;\n\n this.dispatchEvent(event);\n }\n /* End Fullscreen Management /\n\n /* Side menu /\n get shouldRenderMenu(): boolean {\n return !!this.menuContents?.length;\n }\n\n toggleMenu(forceValue: boolean \| undefined = undefined): void {\n this.drawerEntering = false;\n this.menuOpened = forceValue !== undefined ? forceValue : !this.menuOpened;\n this.moveFocusForDrawer();\n }\n\n /\n Opening the drawer moves focus into it; closing hands focus back to the\n * toggle. Without this, opening from the shortcut rail would leave focus on\n * a button that is about to be hidden, dropping it to the document.\n /\n private moveFocusForDrawer(): void {\n this.updateComplete.then(() => {\n if (this.menuOpened) {\n this.menuSlider?.focusDrawer();\n } else {\n this.toggleMenuButton?.focus();\n }\n });\n }\n\n /\n Closing the drawer also closes whatever panel was open inside it, so the\n * two can't disagree and a stale panel can't reappear on the next open.\n /\n closeMenu(): void {\n this.openMenu = undefined;\n this.toggleMenu(false);\n }\n\n setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n this.drawerEntering = false;\n const { id } = e.detail;\n this.openMenu = id !== this.openMenu ? id : undefined;\n }\n\n /\n Clears the open channel when the slider closes its sub-panel, without\n * closing the drawer. Keeps `openMenu` in sync with the slider so the same\n * channel can be reopened afterwards.\n /\n closeSidePanel(): void {\n this.drawerEntering = false;\n this.openMenu = undefined;\n }\n\n setMenuContents(e: SetSideMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: SetSideMenuShortcutsEvent): void {\n this.menuShortcuts = [...e.detail];\n }\n\n /* Toggles Side Menu & Sets viewable subpanel /\n manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton(): TemplateResult {\n const label = this.menuOpened ? 'Close side panel' : 'Open side panel';\n return html`\n <button\n class=\"toggle-menu\"\n @click=${() => this.toggleMenu()}\n title=${label}\n aria-label=${label}\n aria-expanded=${this.menuOpened}\n aria-controls=\"menu\"\n >\n ${ellipsesIcon}\n </button>\n `;\n }\n\n get selectedMenuId(): MenuId \| '' {\n return this.openMenu \|\| '';\n }\n\n get renderSideMenu(): TemplateResult {\n return html`\n <nav aria-label=\"Item navigation\">\n <div\n class=\"minimized ${classMap({ hidden: this.menuOpened })}\"\n part=\"minimized-menu\"\n >\n ${this.shortcuts} ${this.menuToggleButton}\n </div>\n <!-- Closed drawers are inert, so what is off-screen is also out of\n the tab order and the accessibility tree. -->\n <div\n id=\"menu\"\n role=\"group\"\n aria-label=\"Item navigation menu\"\n ?inert=${!this.menuOpened}\n >\n <ia-itemnav-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.selectedMenuId}\n @menuTypeSelected=${this.setOpenMenu}\n @menuPanelClosed=${this.closeSidePanel}\n @menuSliderClosed=${this.closeMenu}\n ></ia-itemnav-menu-slider>\n </div>\n </nav>\n `;\n }\n /* End Side menu /\n\n /* Menu Shortcuts /\n openShortcut(selectedMenuId: MenuId = ''): void {\n // Opening straight to a panel is one movement: the drawer carries the\n // panel in, so the panel must not also slide (see `.drawer-entering`).\n // Only when the drawer is actually closed — switching shortcuts while it\n // is already open should still animate the panel across.\n this.drawerEntering = !this.menuOpened;\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n // The rail hides itself once the drawer opens, taking the focused\n // shortcut with it, so focus has to be placed deliberately.\n this.moveFocusForDrawer();\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id, label }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <li>\n <button\n class=\"shortcut ${id}\"\n @click=${() => this.openShortcut(id)}\n title=${label}\n aria-label=${label}\n aria-expanded=${this.menuOpened && this.openMenu === id}\n >\n ${icon}\n </button>\n </li>\n `;\n });\n return html`<ul class=\"shortcuts\" role=\"list\">\n ${shortcuts}\n </ul>`;\n }\n /* End Menu Shortcuts /\n\n /* Misc Render /\n get menuClass(): string {\n const hasMenuOrShortcuts =\n this.menuContents?.length \|\| this.menuShortcuts?.length;\n const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n // When the side menu renders, the minimized rail floats over the left edge;\n // `has-menu` lets the reader reserve its width so the theater isn't covered.\n const railState = this.shouldRenderMenu ? 'has-menu' : '';\n const enteringState = this.drawerEntering ? 'drawer-entering' : '';\n return `${drawerState} ${fullscreenState} ${railState} ${enteringState}`;\n }\n\n static get styles(): CSSResultGroup {\n const subnavWidth = css`var(--item-navigator-menu-width--)`;\n const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--item-navigator-menu-margin--)`;\n const theaterBg = css`var(--item-navigator-theater-bg-color--)`;\n const iconSize = css`var(--item-navigator-icon-size--)`;\n\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-menu-width--: var(\n --item-navigator-menu-width,\n 320px\n );\n --item-navigator-animation-timing--: var(\n --item-navigator-animation-timing,\n 200ms\n );\n --item-navigator-menu-margin--: var(\n --item-navigator-menu-margin,\n 42px\n );\n --item-navigator-theater-bg-color--: var(\n --item-navigator-theater-bg-color,\n #000\n );\n / Every glyph is square, so one knob sizes both axes. /\n --item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);\n / Icons follow the adjustable text color by default. /\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color, var(--true-white))\n );\n\n /\n * The component's internal sizing is expressed in em against this\n * base (10px matches petabox's base font size, which the upstream\n * demo set on the document root). Anchoring it here makes the\n * navigator self-contained — its scale no longer depends on the\n * consumer's root font-size. Override to rescale everything.\n /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n :host,\n #frame,\n .menu-and-reader {\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n :host,\n #frame {\n min-height: inherit;\n height: inherit;\n }\n\n slot {\n display: block;\n width: 100%;\n }\n\n slot {\n display: block;\n height: inherit;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n display: flex;\n flex-direction: column;\n /\n The overlay/shift breakpoint keys off the navigator's own width,\n * not the viewport's, so the frame is the query container. This\n * replaces a host-injected resize observer that set the class from\n * JS: layout drives it now, so there is nothing to inject, register\n * or tear down. The inline-size type contains width only, leaving the\n * flex column's height behaviour alone.\n /\n container-type: inline-size;\n container-name: navframe;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n /\n * Override the inherited height/min-height from the base #frame rule:\n * on a fixed element an explicit height wins over top/bottom, so the\n * inset (0 on all sides) can't fill the viewport unless height is\n * released back to auto.\n /\n height: auto;\n min-height: 0;\n }\n\n .hidden {\n display: none !important;\n }\n\n button {\n / Buttons don't inherit font-size from the UA stylesheet; inherit it\n so em-sized icons resolve against the component's base, not the\n browser's default button font-size. /\n font: inherit;\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n .menu-and-reader {\n position: relative;\n display: flex;\n flex: 1;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n margin-bottom: 0.2em;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button > {\n /** Prevent the icon's SVG description from stealing tooltip message /\n pointer-events: none;\n }\n\n nav .minimized button.toggle-menu > {\n border: 2px solid var(--item-navigator-icon-color--);\n border-radius: ${iconSize};\n width: ${iconSize};\n height: ${iconSize};\n margin: auto;\n }\n\n /* The rail is a list for assistive tech; strip the list chrome so it\n still reads as a row of icons. /\n .shortcuts,\n .shortcuts li {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .toggle-menu .ia-icon,\n .shortcuts .ia-icon {\n width: ${iconSize};\n height: ${iconSize};\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. /\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. /\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n transform: translateX(0);\n width: 100%;\n display: flex;\n /\n Ease the reader's size/position changes so the slotted theater\n * glides in sync with the sliding drawer (shift mode) and settles\n * smoothly on resize, rather than snapping. Overlay mode opts out\n * below so the full-width theater tracks resizes instantly.\n /\n transition:\n width ${transitionTiming} ease-out,\n margin-left ${transitionTiming} ease-out,\n transform ${transitionTiming} ease-out;\n }\n\n #reader > {\n width: 100%;\n display: flex;\n flex: 1;\n }\n\n /\n The minimized rail floats over the frame's left edge while the drawer\n * is closed, so pad the theater content by its width to avoid overlap.\n * This lives on the reader's content (not the reader box) and isn't\n * transitioned, so it snaps away on open — letting the reader box track\n * the drawer's edge exactly during the shift, rather than trailing it.\n /\n .has-menu:not(.open) #reader > {\n box-sizing: border-box;\n padding-left: ${menuMargin};\n }\n\n /* Opening straight to a panel is one movement. The panel is nested in\n #menu, so its own slide would compose with the drawer's transform\n and send it twice the distance in the same time — arriving late and\n travelling at double speed. Holding it still lets the drawer carry\n it in. /\n .drawer-entering #menu {\n --item-navigator-panel-transition--: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n / Shift: the drawer pushes the theater aside. /\n .open #reader {\n width: calc(100% - ${subnavWidth});\n margin-left: ${subnavWidth};\n }\n\n /\n * Overlay: too narrow to give the drawer its own column, so it covers\n * a full-width theater. The transition is dropped here so the theater\n * tracks resizes instantly instead of easing behind them.\n */\n @container navframe (max-width: 600px) {\n .open #reader {\n width: 100%;\n margin-left: 0;\n transition: none;\n }\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-item-navigator': IAItemNavigator;\n }\n}\n"]}

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-menu-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;~~AAKb~~;;;;GAIG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,iBAAiB;;;;;;;;;MAGtB;IAE0B,IAAI,EAAE,cAAc,GAAG,MAAM,CAAM;IAEnC,IAAI,SAAM;IAEV,KAAK,SAAM;IAEX,WAAW,EAAE,cAAc,GAAG,MAAM,CAAM;IAE1C,QAAQ,SAAM;IAEb,QAAQ,UAAS;IAEjB,UAAU,UAAS;IAEhD,OAAO,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKvB,6BAA6B,IAAI,IAAI;IAYrC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,QAAQ,IAAI,cAAc,CAW7B;IAED,IAAI,UAAU,IAAI,cAAc,CAa/B;IAED,IAAI,WAAW,IAAI,cAAc,CAWhC;IAED,MAAM,IAAI,cAAc;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CA2IlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
1	+ {"version":3,"file":"ia-itemnav-menu-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb;;;;GAIG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,iBAAiB;;;;;;;;;MAGtB;IAE0B,IAAI,EAAE,cAAc,GAAG,MAAM,CAAM;IAEnC,IAAI,SAAM;IAEV,KAAK,SAAM;IAEX,WAAW,EAAE,cAAc,GAAG,MAAM,CAAM;IAE1C,QAAQ,SAAM;IAEb,QAAQ,UAAS;IAEjB,UAAU,UAAS;IAEhD,OAAO,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKvB,6BAA6B,IAAI,IAAI;IAYrC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,QAAQ,IAAI,cAAc,CAW7B;IAED,IAAI,UAAU,IAAI,cAAc,CAa/B;IAED,IAAI,WAAW,IAAI,cAAc,CAWhC;IAED,MAAM,IAAI,cAAc;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CA2IlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import themeStyles from '../../themes/theme-styles.js';
 /**

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-menu-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport themeStyles from '@src/themes/theme-styles';\n\n/*\n A single entry in the item navigator's side menu. Renders either a button\n * (default) or a link (when `href` is set) with an icon, label and optional\n * detail text, and emits `menuTypeSelected` when activated.\n /\n@customElement('ia-itemnav-menu-button')\nexport class IAItemNavMenuButton extends LitElement {\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Object }) icon: TemplateResult \| string = '';\n\n @property({ type: String }) href = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: Object }) menuDetails: TemplateResult \| string = '';\n\n @property({ type: String }) buttonId = '';\n\n @property({ type: Boolean }) selected = false;\n\n @property({ type: Boolean }) followable = false;\n\n onClick(e: Event): void {\n e.preventDefault();\n this.dispatchMenuTypeSelectedEvent();\n }\n\n dispatchMenuTypeSelectedEvent(): void {\n this.dispatchEvent(\n new CustomEvent('menuTypeSelected', {\n bubbles: true,\n composed: true,\n detail: {\n id: this.buttonId,\n },\n }),\n );\n }\n\n get iconClass(): string {\n return this.selected ? 'active' : '';\n }\n\n get menuItem(): TemplateResult {\n return html`\n <span\n class=\"icon ${this.iconClass}\"\n aria-hidden=\"true\"\n title=${this.label}\n >${this.icon}</span\n >\n <span class=\"label\">${this.label}</span>\n <span class=\"menu-details\">${this.menuDetails}</span>\n `;\n }\n\n get linkButton(): TemplateResult {\n // A followable link really does navigate, so it is a link and nothing\n // more; only the in-place variant is a disclosure.\n return html`\n <a\n href=${this.href}\n class=\"menu-item\"\n aria-label=${this.label}\n aria-expanded=${ifDefined(this.followable ? undefined : this.selected)}\n @click=${this.followable ? undefined : this.onClick}\n >${this.menuItem}</a\n >\n `;\n }\n\n get clickButton(): TemplateResult {\n return html`\n <button\n class=\"menu-item\"\n aria-label=${this.label}\n aria-expanded=${this.selected}\n @click=${this.onClick}\n >\n ${this.menuItem}\n </button>\n `;\n }\n\n render(): TemplateResult {\n return this.href ? this.linkButton : this.clickButton;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-active-button-bg--: var(\n --item-navigator-active-button-bg,\n var(--mid-gray)\n );\n --item-navigator-menu-button-label-display--: var(\n --item-navigator-menu-button-label-display,\n none\n );\n --item-navigator-icon-inactive-color--: var(\n --item-navigator-icon-inactive-color,\n var(--lighter-gray)\n );\n --item-navigator-icon-active-color--: var(\n --item-navigator-icon-active-color,\n var(--item-navigator-text-color--)\n );\n / Every glyph is square, so one knob sizes both axes. /\n --item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);\n\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n a {\n display: inline-block;\n text-decoration: none;\n }\n\n button.menu-item {\n -webkit-appearance: none;\n appearance: none;\n / Inherit font-size so the em-sized icon/label resolve against the\n component base rather than the UA default button font-size. /\n font: inherit;\n }\n\n .menu-item {\n display: inline-flex;\n width: 100%;\n padding: 0;\n text-align: left;\n background: transparent;\n align-items: center;\n border: none;\n cursor: pointer;\n transition: background-color 0.2s;\n border-radius: 6px;\n }\n\n .menu-item:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n .label {\n display: var(--item-navigator-menu-button-label-display--);\n padding: 0;\n font-size: 1.6em;\n font-weight: 400;\n color: var(--item-navigator-text-color--);\n text-align: left;\n vertical-align: middle;\n margin-left: 1em;\n }\n\n .menu-details {\n color: var(--item-navigator-text-color--);\n display: inline-block;\n margin-left: 0.5em;\n font-style: italic;\n font-size: 1.5em;\n }\n\n .menu-item > .icon {\n position: relative;\n display: inline-flex;\n min-width: 4.2em;\n max-width: 4.2em;\n height: 4.2em;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n }\n\n .menu-item > .icon > {\n /* Prevent tooltip containing icon literal description /\n pointer-events: none;\n }\n\n / Size the glyph within the icon box to match the shortcut-rail\n icons, rather than letting the svg fill the whole box. /\n .menu-item > .icon .ia-icon {\n width: var(--item-navigator-icon-size--);\n height: var(--item-navigator-icon-size--);\n }\n\n / The open entry's icon shares the panel's background and rounds into\n it, so it has to sit above the panel to read as one shape. The rest\n stay below: they have no background of their own, so the panel would\n slide visibly behind them. /\n .menu-item[aria-expanded='true'] .icon {\n z-index: 2;\n background-color: var(--item-navigator-active-button-bg--);\n border-radius: 1em 0 0 1em;\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, these\n supply the paint. /\n .icon span.ia-icon {\n background-color: var(--item-navigator-icon-inactive-color--);\n }\n\n .icon.active span.ia-icon {\n background-color: var(--item-navigator-icon-active-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. */\n .icon .fill-color {\n fill: var(--item-navigator-icon-inactive-color--);\n }\n\n .icon.active .fill-color {\n fill: var(--item-navigator-icon-active-color--);\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-menu-button': IAItemNavMenuButton;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-itemnav-menu-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport themeStyles from '@src/themes/theme-styles';\n\n/*\n A single entry in the item navigator's side menu. Renders either a button\n * (default) or a link (when `href` is set) with an icon, label and optional\n * detail text, and emits `menuTypeSelected` when activated.\n /\n@customElement('ia-itemnav-menu-button')\nexport class IAItemNavMenuButton extends LitElement {\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Object }) icon: TemplateResult \| string = '';\n\n @property({ type: String }) href = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: Object }) menuDetails: TemplateResult \| string = '';\n\n @property({ type: String }) buttonId = '';\n\n @property({ type: Boolean }) selected = false;\n\n @property({ type: Boolean }) followable = false;\n\n onClick(e: Event): void {\n e.preventDefault();\n this.dispatchMenuTypeSelectedEvent();\n }\n\n dispatchMenuTypeSelectedEvent(): void {\n this.dispatchEvent(\n new CustomEvent('menuTypeSelected', {\n bubbles: true,\n composed: true,\n detail: {\n id: this.buttonId,\n },\n }),\n );\n }\n\n get iconClass(): string {\n return this.selected ? 'active' : '';\n }\n\n get menuItem(): TemplateResult {\n return html`\n <span\n class=\"icon ${this.iconClass}\"\n aria-hidden=\"true\"\n title=${this.label}\n >${this.icon}</span\n >\n <span class=\"label\">${this.label}</span>\n <span class=\"menu-details\">${this.menuDetails}</span>\n `;\n }\n\n get linkButton(): TemplateResult {\n // A followable link really does navigate, so it is a link and nothing\n // more; only the in-place variant is a disclosure.\n return html`\n <a\n href=${this.href}\n class=\"menu-item\"\n aria-label=${this.label}\n aria-expanded=${ifDefined(this.followable ? undefined : this.selected)}\n @click=${this.followable ? undefined : this.onClick}\n >${this.menuItem}</a\n >\n `;\n }\n\n get clickButton(): TemplateResult {\n return html`\n <button\n class=\"menu-item\"\n aria-label=${this.label}\n aria-expanded=${this.selected}\n @click=${this.onClick}\n >\n ${this.menuItem}\n </button>\n `;\n }\n\n render(): TemplateResult {\n return this.href ? this.linkButton : this.clickButton;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-active-button-bg--: var(\n --item-navigator-active-button-bg,\n var(--mid-gray)\n );\n --item-navigator-menu-button-label-display--: var(\n --item-navigator-menu-button-label-display,\n none\n );\n --item-navigator-icon-inactive-color--: var(\n --item-navigator-icon-inactive-color,\n var(--lighter-gray)\n );\n --item-navigator-icon-active-color--: var(\n --item-navigator-icon-active-color,\n var(--item-navigator-text-color--)\n );\n / Every glyph is square, so one knob sizes both axes. /\n --item-navigator-icon-size--: var(--item-navigator-icon-size, 2.4em);\n\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n a {\n display: inline-block;\n text-decoration: none;\n }\n\n button.menu-item {\n -webkit-appearance: none;\n appearance: none;\n / Inherit font-size so the em-sized icon/label resolve against the\n component base rather than the UA default button font-size. /\n font: inherit;\n }\n\n .menu-item {\n display: inline-flex;\n width: 100%;\n padding: 0;\n text-align: left;\n background: transparent;\n align-items: center;\n border: none;\n cursor: pointer;\n transition: background-color 0.2s;\n border-radius: 6px;\n }\n\n .menu-item:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n .label {\n display: var(--item-navigator-menu-button-label-display--);\n padding: 0;\n font-size: 1.6em;\n font-weight: 400;\n color: var(--item-navigator-text-color--);\n text-align: left;\n vertical-align: middle;\n margin-left: 1em;\n }\n\n .menu-details {\n color: var(--item-navigator-text-color--);\n display: inline-block;\n margin-left: 0.5em;\n font-style: italic;\n font-size: 1.5em;\n }\n\n .menu-item > .icon {\n position: relative;\n display: inline-flex;\n min-width: 4.2em;\n max-width: 4.2em;\n height: 4.2em;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n }\n\n .menu-item > .icon > {\n /* Prevent tooltip containing icon literal description /\n pointer-events: none;\n }\n\n / Size the glyph within the icon box to match the shortcut-rail\n icons, rather than letting the svg fill the whole box. /\n .menu-item > .icon .ia-icon {\n width: var(--item-navigator-icon-size--);\n height: var(--item-navigator-icon-size--);\n }\n\n / The open entry's icon shares the panel's background and rounds into\n it, so it has to sit above the panel to read as one shape. The rest\n stay below: they have no background of their own, so the panel would\n slide visibly behind them. /\n .menu-item[aria-expanded='true'] .icon {\n z-index: 2;\n background-color: var(--item-navigator-active-button-bg--);\n border-radius: 1em 0 0 1em;\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, these\n supply the paint. /\n .icon span.ia-icon {\n background-color: var(--item-navigator-icon-inactive-color--);\n }\n\n .icon.active span.ia-icon {\n background-color: var(--item-navigator-icon-active-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. */\n .icon .fill-color {\n fill: var(--item-navigator-icon-inactive-color--);\n }\n\n .icon.active .fill-color {\n fill: var(--item-navigator-icon-active-color--);\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-menu-button': IAItemNavMenuButton;\n }\n}\n"]}

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-menu-slider.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;~~AAIb~~,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAOrE;;;GAGG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACtB,KAAK,EAAE,qBAAqB,EAAE,CAAM;IAE/D;;;;OAIG;IACyB,YAAY,SAAM;IAElB,kBAAkB,EAC1C,cAAc,GACd,OAAO,OAAO,CAAW;IAEV,OAAO,CAAC,KAAK,CAAC,CAAc;IAE1B,OAAO,CAAC,QAAQ,CAAC,CAAmB;IAE1B,OAAO,CAAC,iBAAiB,CAAC,CAAc;IAEvE,mEAAmE;IACnE,OAAO,CAAC,aAAa,CAAQ;IAE7B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYhD;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,aAAa;IAQrB;;;;OAIG;IACH,WAAW,IAAI,IAAI;IAWnB,oDAAoD;IACpD,SAAS,IAAI,IAAI;IAQjB,uDAAuD;IACvD,UAAU,IAAI,IAAI;IAQlB,sDAAsD;IACtD,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAUzC,IAAI,mBAAmB,IAAI,qBAAqB,GAAG,SAAS,CAE3D;IAID,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,SAAS,IAAI,cAAc,EAAE,CAgBhC;IAED,IAAI,gBAAgB,IAAI,cAAc,CA4BrC;IAED,IAAI,WAAW,IAAI,cAAc,CAWhC;IAED,kBAAkB;IAClB,MAAM,IAAI,cAAc;IA+BxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAyLlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
1	+ {"version":3,"file":"ia-itemnav-menu-slider.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAOrE;;;GAGG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACtB,KAAK,EAAE,qBAAqB,EAAE,CAAM;IAE/D;;;;OAIG;IACyB,YAAY,SAAM;IAElB,kBAAkB,EAC1C,cAAc,GACd,OAAO,OAAO,CAAW;IAEV,OAAO,CAAC,KAAK,CAAC,CAAc;IAE1B,OAAO,CAAC,QAAQ,CAAC,CAAmB;IAE1B,OAAO,CAAC,iBAAiB,CAAC,CAAc;IAEvE,mEAAmE;IACnE,OAAO,CAAC,aAAa,CAAQ;IAE7B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYhD;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,aAAa;IAQrB;;;;OAIG;IACH,WAAW,IAAI,IAAI;IAWnB,oDAAoD;IACpD,SAAS,IAAI,IAAI;IAQjB,uDAAuD;IACvD,UAAU,IAAI,IAAI;IAQlB,sDAAsD;IACtD,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAUzC,IAAI,mBAAmB,IAAI,qBAAqB,GAAG,SAAS,CAE3D;IAID,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,SAAS,IAAI,cAAc,EAAE,CAgBhC;IAED,IAAI,gBAAgB,IAAI,cAAc,CA4BrC;IAED,IAAI,WAAW,IAAI,cAAc,CAWhC;IAED,kBAAkB;IAClB,MAAM,IAAI,cAAc;IA+BxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAyLlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
 import themeStyles from '../../themes/theme-styles.js';
 import { collapseSidebarIcon } from './icons.js';
 import './ia-itemnav-menu-button.js';

package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-menu-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport { collapseSidebarIcon } from './icons';\nimport './ia-itemnav-menu-button';\nimport type { IAItemNavMenuButton } from './ia-itemnav-menu-button';\nimport { MenuProviderInterface } from './interfaces/menu-interfaces';\n\nconst sliderEvents = {\n closeDrawer: 'menuSliderClosed',\n closePanel: 'menuPanelClosed',\n};\n\n/*\n The sliding drawer that lists the navigator's menu providers and renders the\n * body of whichever provider is currently selected.\n /\n@customElement('ia-itemnav-menu-slider')\nexport class IAItemNavMenuSlider extends LitElement {\n @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n /\n Which panel is open. The navigator owns this — the slider only reports\n * what the user did and renders whatever comes back, so there is one copy\n * of the state rather than two that have to agree.\n /\n @property({ type: String }) selectedMenu = '';\n\n @property({ type: Object }) selectedMenuAction:\n \| TemplateResult\n \| typeof nothing = nothing;\n\n @query('.content') private panel?: HTMLElement;\n\n @query('.menu-list') private menuList?: HTMLUListElement;\n\n @query('.menu > button.close') private drawerCloseButton?: HTMLElement;\n\n /* Focus should follow what the user did, not the first render. /\n private isFirstRender = true;\n\n protected updated(changed: PropertyValues): void {\n const actionButton = this.selectedMenuDetails?.actionButton \|\| nothing;\n if (actionButton !== this.selectedMenuAction) {\n this.selectedMenuAction = actionButton;\n }\n\n if (!this.isFirstRender && changed.has('selectedMenu')) {\n this.moveFocusForSelection(changed.get('selectedMenu') as string);\n }\n this.isFirstRender = false;\n }\n\n /\n Opening a panel moves focus into it, so it is announced by name; closing\n * hands focus back to the button that opened it.\n /\n private moveFocusForSelection(previousMenu: string): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n } else if (previousMenu) {\n this.menuButtonFor(previousMenu)?.focus();\n }\n }\n\n private menuButtonFor(menuId: string): IAItemNavMenuButton \| undefined {\n const buttons =\n this.menuList?.querySelectorAll<IAItemNavMenuButton>(\n 'ia-itemnav-menu-button',\n ) ?? [];\n return [...buttons].find((button) => button.buttonId === menuId);\n }\n\n /\n Moves focus into the drawer — the open panel if there is one, otherwise\n * the first thing worth acting on. Exposed so the navigator doesn't have to\n * reach through this component's shadow DOM to place focus.\n /\n focusDrawer(): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n return;\n }\n const firstMenuButton = this.menuList?.querySelector<HTMLElement>(\n 'ia-itemnav-menu-button',\n );\n (firstMenuButton ?? this.drawerCloseButton)?.focus();\n }\n\n /* Asks the navigator to close the whole drawer. /\n closeMenu(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closeDrawer, {\n detail: this.selectedMenuDetails,\n }),\n );\n }\n\n /* Asks the navigator to close just the open panel. /\n closePanel(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closePanel, {\n detail: { id: this.selectedMenu },\n }),\n );\n }\n\n /* Escape closes the panel first, then the drawer. /\n handleKeyDown(event: KeyboardEvent): void {\n if (event.key !== 'Escape') return;\n event.preventDefault();\n if (this.selectedMenu) {\n this.closePanel();\n } else {\n this.closeMenu();\n }\n }\n\n get selectedMenuDetails(): MenuProviderInterface \| undefined {\n return this.menus.find((menu) => menu.id === this.selectedMenu);\n }\n\n / render /\n\n get selectedMenuClass(): string {\n return this.selectedMenu ? 'open' : '';\n }\n\n get menuItems(): TemplateResult[] {\n return this.menus.map(\n (menu) => html`\n <li>\n <ia-itemnav-menu-button\n .icon=${menu.icon}\n .label=${menu.label}\n .menuDetails=${menu.menuDetails \|\| ''}\n .buttonId=${menu.id}\n .selected=${menu.id === this.selectedMenu}\n .followable=${menu.followable \|\| false}\n .href=${menu.href \|\| ''}\n ></ia-itemnav-menu-button>\n </li>\n `,\n );\n }\n\n get renderMenuHeader(): TemplateResult {\n const { label = '', menuDetails = '' } = this.selectedMenuDetails \|\| {};\n // `selectedMenuAction` defaults to Lit's `nothing` sentinel, which is\n // truthy — so compare against it explicitly, otherwise the header would\n // always get the secondary-action treatment (and an empty action span).\n const hasAction = this.selectedMenuAction !== nothing;\n const headerClass = hasAction ? 'with-secondary-action' : '';\n const actionBlock = hasAction\n ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n : nothing;\n const closeLabel = label ? `Close ${label}` : 'Close this panel';\n return html`\n <header class=${headerClass}>\n <div class=\"details\">\n <h3 id=\"panel-title\">${label}</h3>\n <span class=\"extra-details\">${menuDetails}</span>\n </div>\n ${actionBlock}\n <button\n class=\"close\"\n aria-label=${closeLabel}\n title=${closeLabel}\n @click=${this.closePanel}\n >\n ${collapseSidebarIcon}\n </button>\n </header>\n `;\n }\n\n get closeButton(): TemplateResult {\n return html`\n <button\n class=\"close\"\n aria-label=\"Close navigation\"\n title=\"Close navigation\"\n @click=${this.closeMenu}\n >\n ${collapseSidebarIcon}\n </button>\n `;\n }\n\n /* @inheritdoc /\n render(): TemplateResult {\n const panelOpen = !!this.selectedMenu;\n return html`\n <div class=\"main\" @keydown=${this.handleKeyDown}>\n <div class=\"menu\">\n ${this.closeButton}\n <ul class=\"menu-list\" role=\"list\">\n ${this.menuItems}\n </ul>\n <!-- Closed panels are inert so the tab order and the accessibility\n tree agree with what is on screen; the slide is a consequence\n of the class, not something to wait on. -->\n <div\n class=\"content ${this.selectedMenuClass}\"\n role=\"region\"\n aria-labelledby=\"panel-title\"\n tabindex=\"-1\"\n ?inert=${!panelOpen}\n >\n ${this.renderMenuHeader}\n <section>\n <div class=\"selected-menu\">\n ${this.selectedMenuDetails?.component \|\| nothing}\n </div>\n </section>\n </div>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n const menuButtonWidth = css`42px`;\n const sliderWidth = css`var(--item-navigator-menu-width--)`;\n const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-menu-width--: var(\n --item-navigator-menu-width,\n 320px\n );\n --item-navigator-animation-timing--: var(\n --item-navigator-animation-timing,\n 200ms\n );\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-menu-slider-bg--: var(\n --item-navigator-menu-slider-bg,\n #212121\n );\n --item-navigator-active-button-bg--: var(\n --item-navigator-active-button-bg,\n var(--mid-gray)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n / Every glyph is square, so one knob sizes both axes. /\n --item-navigator-header-icon-size--: var(\n --item-navigator-header-icon-size,\n 2em\n );\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n .main {\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n / The drawer's own slide is owned by the navigator's #menu; this just\n fills it. /\n .menu {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: ${sliderWidth};\n padding: 0.5em 0.5em 0 0;\n box-sizing: border-box;\n font-size: 1.4em;\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n button {\n cursor: pointer;\n }\n\n header {\n margin: 0 0 0.5em 0;\n }\n\n header {\n margin: 0;\n display: inline-block;\n }\n\n header button {\n cursor: pointer;\n }\n\n header.with-secondary-action .details {\n width: 80%;\n }\n\n header .details {\n font-weight: bold;\n width: 88%;\n }\n\n header .custom-action > ,\n button.close {\n padding: 0;\n background-color: transparent;\n border: 0;\n }\n\n header .custom-action,\n button.close {\n position: absolute;\n }\n\n button.close {\n / Reset to the base so the header icon (em) doesn't compound\n against .menu's enlarged font-size. /\n font-size: var(--item-navigator-base-font-size--);\n min-width: 38px;\n min-height: 38px;\n display: flex;\n justify-content: center;\n align-items: center;\n right: 0;\n top: 0;\n }\n\n button.close .ia-icon {\n width: var(--item-navigator-header-icon-size--);\n height: var(--item-navigator-header-icon-size--);\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. /\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. /\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: ${menuButtonWidth};\n z-index: 1;\n transform: translateX(calc(${sliderWidth} -1));\n transition: var(\n --item-navigator-panel-transition--,\n transform ${transitionTiming} ease-out\n );\n background: var(--item-navigator-active-button-bg--);\n border-right: 0.2em solid;\n border-color: var(--item-navigator-border-color--);\n padding: 0.5em 0 0 0.5em;\n display: flex;\n flex-direction: column;\n }\n\n .content.open {\n transform: translateX(0);\n }\n\n .content:focus {\n outline: none;\n }\n\n .menu-list {\n padding: 0;\n margin: 0;\n list-style: none;\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n .menu-list li {\n margin-bottom: 0.2em;\n }\n\n .content > section {\n overflow: auto;\n overscroll-behavior: contain;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-menu-slider': IAItemNavMenuSlider;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-itemnav-menu-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\nimport { collapseSidebarIcon } from './icons';\nimport './ia-itemnav-menu-button';\nimport type { IAItemNavMenuButton } from './ia-itemnav-menu-button';\nimport { MenuProviderInterface } from './interfaces/menu-interfaces';\n\nconst sliderEvents = {\n closeDrawer: 'menuSliderClosed',\n closePanel: 'menuPanelClosed',\n};\n\n/*\n The sliding drawer that lists the navigator's menu providers and renders the\n * body of whichever provider is currently selected.\n /\n@customElement('ia-itemnav-menu-slider')\nexport class IAItemNavMenuSlider extends LitElement {\n @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n /\n Which panel is open. The navigator owns this — the slider only reports\n * what the user did and renders whatever comes back, so there is one copy\n * of the state rather than two that have to agree.\n /\n @property({ type: String }) selectedMenu = '';\n\n @property({ type: Object }) selectedMenuAction:\n \| TemplateResult\n \| typeof nothing = nothing;\n\n @query('.content') private panel?: HTMLElement;\n\n @query('.menu-list') private menuList?: HTMLUListElement;\n\n @query('.menu > button.close') private drawerCloseButton?: HTMLElement;\n\n /* Focus should follow what the user did, not the first render. /\n private isFirstRender = true;\n\n protected updated(changed: PropertyValues): void {\n const actionButton = this.selectedMenuDetails?.actionButton \|\| nothing;\n if (actionButton !== this.selectedMenuAction) {\n this.selectedMenuAction = actionButton;\n }\n\n if (!this.isFirstRender && changed.has('selectedMenu')) {\n this.moveFocusForSelection(changed.get('selectedMenu') as string);\n }\n this.isFirstRender = false;\n }\n\n /\n Opening a panel moves focus into it, so it is announced by name; closing\n * hands focus back to the button that opened it.\n /\n private moveFocusForSelection(previousMenu: string): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n } else if (previousMenu) {\n this.menuButtonFor(previousMenu)?.focus();\n }\n }\n\n private menuButtonFor(menuId: string): IAItemNavMenuButton \| undefined {\n const buttons =\n this.menuList?.querySelectorAll<IAItemNavMenuButton>(\n 'ia-itemnav-menu-button',\n ) ?? [];\n return [...buttons].find((button) => button.buttonId === menuId);\n }\n\n /\n Moves focus into the drawer — the open panel if there is one, otherwise\n * the first thing worth acting on. Exposed so the navigator doesn't have to\n * reach through this component's shadow DOM to place focus.\n /\n focusDrawer(): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n return;\n }\n const firstMenuButton = this.menuList?.querySelector<HTMLElement>(\n 'ia-itemnav-menu-button',\n );\n (firstMenuButton ?? this.drawerCloseButton)?.focus();\n }\n\n /* Asks the navigator to close the whole drawer. /\n closeMenu(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closeDrawer, {\n detail: this.selectedMenuDetails,\n }),\n );\n }\n\n /* Asks the navigator to close just the open panel. /\n closePanel(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closePanel, {\n detail: { id: this.selectedMenu },\n }),\n );\n }\n\n /* Escape closes the panel first, then the drawer. /\n handleKeyDown(event: KeyboardEvent): void {\n if (event.key !== 'Escape') return;\n event.preventDefault();\n if (this.selectedMenu) {\n this.closePanel();\n } else {\n this.closeMenu();\n }\n }\n\n get selectedMenuDetails(): MenuProviderInterface \| undefined {\n return this.menus.find((menu) => menu.id === this.selectedMenu);\n }\n\n / render /\n\n get selectedMenuClass(): string {\n return this.selectedMenu ? 'open' : '';\n }\n\n get menuItems(): TemplateResult[] {\n return this.menus.map(\n (menu) => html`\n <li>\n <ia-itemnav-menu-button\n .icon=${menu.icon}\n .label=${menu.label}\n .menuDetails=${menu.menuDetails \|\| ''}\n .buttonId=${menu.id}\n .selected=${menu.id === this.selectedMenu}\n .followable=${menu.followable \|\| false}\n .href=${menu.href \|\| ''}\n ></ia-itemnav-menu-button>\n </li>\n `,\n );\n }\n\n get renderMenuHeader(): TemplateResult {\n const { label = '', menuDetails = '' } = this.selectedMenuDetails \|\| {};\n // `selectedMenuAction` defaults to Lit's `nothing` sentinel, which is\n // truthy — so compare against it explicitly, otherwise the header would\n // always get the secondary-action treatment (and an empty action span).\n const hasAction = this.selectedMenuAction !== nothing;\n const headerClass = hasAction ? 'with-secondary-action' : '';\n const actionBlock = hasAction\n ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n : nothing;\n const closeLabel = label ? `Close ${label}` : 'Close this panel';\n return html`\n <header class=${headerClass}>\n <div class=\"details\">\n <h3 id=\"panel-title\">${label}</h3>\n <span class=\"extra-details\">${menuDetails}</span>\n </div>\n ${actionBlock}\n <button\n class=\"close\"\n aria-label=${closeLabel}\n title=${closeLabel}\n @click=${this.closePanel}\n >\n ${collapseSidebarIcon}\n </button>\n </header>\n `;\n }\n\n get closeButton(): TemplateResult {\n return html`\n <button\n class=\"close\"\n aria-label=\"Close navigation\"\n title=\"Close navigation\"\n @click=${this.closeMenu}\n >\n ${collapseSidebarIcon}\n </button>\n `;\n }\n\n /* @inheritdoc /\n render(): TemplateResult {\n const panelOpen = !!this.selectedMenu;\n return html`\n <div class=\"main\" @keydown=${this.handleKeyDown}>\n <div class=\"menu\">\n ${this.closeButton}\n <ul class=\"menu-list\" role=\"list\">\n ${this.menuItems}\n </ul>\n <!-- Closed panels are inert so the tab order and the accessibility\n tree agree with what is on screen; the slide is a consequence\n of the class, not something to wait on. -->\n <div\n class=\"content ${this.selectedMenuClass}\"\n role=\"region\"\n aria-labelledby=\"panel-title\"\n tabindex=\"-1\"\n ?inert=${!panelOpen}\n >\n ${this.renderMenuHeader}\n <section>\n <div class=\"selected-menu\">\n ${this.selectedMenuDetails?.component \|\| nothing}\n </div>\n </section>\n </div>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n const menuButtonWidth = css`42px`;\n const sliderWidth = css`var(--item-navigator-menu-width--)`;\n const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-menu-width--: var(\n --item-navigator-menu-width,\n 320px\n );\n --item-navigator-animation-timing--: var(\n --item-navigator-animation-timing,\n 200ms\n );\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-menu-slider-bg--: var(\n --item-navigator-menu-slider-bg,\n #212121\n );\n --item-navigator-active-button-bg--: var(\n --item-navigator-active-button-bg,\n var(--mid-gray)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n / Every glyph is square, so one knob sizes both axes. /\n --item-navigator-header-icon-size--: var(\n --item-navigator-header-icon-size,\n 2em\n );\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n .main {\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n / The drawer's own slide is owned by the navigator's #menu; this just\n fills it. /\n .menu {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: ${sliderWidth};\n padding: 0.5em 0.5em 0 0;\n box-sizing: border-box;\n font-size: 1.4em;\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n button {\n cursor: pointer;\n }\n\n header {\n margin: 0 0 0.5em 0;\n }\n\n header {\n margin: 0;\n display: inline-block;\n }\n\n header button {\n cursor: pointer;\n }\n\n header.with-secondary-action .details {\n width: 80%;\n }\n\n header .details {\n font-weight: bold;\n width: 88%;\n }\n\n header .custom-action > ,\n button.close {\n padding: 0;\n background-color: transparent;\n border: 0;\n }\n\n header .custom-action,\n button.close {\n position: absolute;\n }\n\n button.close {\n / Reset to the base so the header icon (em) doesn't compound\n against .menu's enlarged font-size. /\n font-size: var(--item-navigator-base-font-size--);\n min-width: 38px;\n min-height: 38px;\n display: flex;\n justify-content: center;\n align-items: center;\n right: 0;\n top: 0;\n }\n\n button.close .ia-icon {\n width: var(--item-navigator-header-icon-size--);\n height: var(--item-navigator-header-icon-size--);\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. /\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. /\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: ${menuButtonWidth};\n z-index: 1;\n transform: translateX(calc(${sliderWidth} -1));\n transition: var(\n --item-navigator-panel-transition--,\n transform ${transitionTiming} ease-out\n );\n background: var(--item-navigator-active-button-bg--);\n border-right: 0.2em solid;\n border-color: var(--item-navigator-border-color--);\n padding: 0.5em 0 0 0.5em;\n display: flex;\n flex-direction: column;\n }\n\n .content.open {\n transform: translateX(0);\n }\n\n .content:focus {\n outline: none;\n }\n\n .menu-list {\n padding: 0;\n margin: 0;\n list-style: none;\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n .menu-list li {\n margin-bottom: 0.2em;\n }\n\n .content > section {\n overflow: auto;\n overscroll-behavior: contain;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-menu-slider': IAItemNavMenuSlider;\n }\n}\n"]}

package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-no-theater-available.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EACd,cAAc,EAEd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;~~AAIb~~;;;;GAIG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAM;IAErD,UAAU,IAAI,IAAI;IAQlB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,MAAM,IAAI,cAAc;IAexB,MAAM,KAAK,MAAM,IAAI,cAAc,CAmDlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}
1	+ {"version":3,"file":"ia-itemnav-no-theater-available.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EACd,cAAc,EAEd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb;;;;GAIG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAM;IAErD,UAAU,IAAI,IAAI;IAQlB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,MAAM,IAAI,cAAc;IAexB,MAAM,KAAK,MAAM,IAAI,cAAc,CAmDlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}

package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
 import themeStyles from '../../themes/theme-styles.js';
 /**
  * Placeholder shown in place of the theater when `viewAvailable` is false,

package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-no-theater-available.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,~~aAAa~~,EAAE,~~QAAQ~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAC5D~~,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;GAIG;AAEI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;QACuB,eAAU,GAAY,EAAE,CAAC;IAuFvD,CAAC;IArFC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8CF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAvF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA0B;AAD1C,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAwFvC","sourcesContent":["import {\n LitElement,\n html,\n TemplateResult,\n PropertyValues,\n css,\n type CSSResultGroup,\n} from 'lit';\nimport { ~~customElement,~~ property } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\n/*\n Placeholder shown in place of the theater when `viewAvailable` is false,\n * i.e. the item has no files that can be experienced in the browser. Emits\n * `loadingStateUpdated` so the navigator hides its loading spinner.\n /\n@customElement('ia-itemnav-no-theater-available')\nexport class IAItemNavNoTheaterAvailable extends LitElement {\n @property({ type: String }) identifier?: string = '';\n\n emitLoaded(): void {\n this.dispatchEvent(\n new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n detail: { loaded: true },\n }),\n );\n }\n\n updated(changed: PropertyValues): void {\n if (changed.has('identifier')) {\n this.emitLoaded();\n }\n }\n\n get downloadUrl(): string {\n return `/download/${this.identifier}`;\n }\n\n render(): TemplateResult {\n return html`\n <section>\n <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n <p>\n This item does not appear to have any files that can be experienced on\n Archive.org. <br />\n Please download files in this item to interact with them on your\n computer.\n </p>\n <a href=${this.downloadUrl}>Show all files</a>\n </section>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n color: var(--item-navigator-text-color--);\n text-align: center;\n / 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n section {\n width: 100%;\n margin: 5%;\n padding: 0 5%;\n }\n\n p {\n font-size: 1.4em;\n }\n\n a {\n color: var(--item-navigator-text-color--);\n background-color: var(--navy-blue);\n min-height: 35px;\n cursor: pointer;\n line-height: normal;\n border-radius: 0.4em;\n text-align: center;\n vertical-align: middle;\n font-size: 1.4em;\n font-family: var(--base-font-family);\n display: inline-block;\n padding: 0.85em 1.2em;\n border: 1px solid var(--lightest-gray);\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n user-select: none;\n text-decoration: none;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-no-theater-available': IAItemNavNoTheaterAvailable;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-itemnav-no-theater-available.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;GAIG;AAEI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;QACuB,eAAU,GAAY,EAAE,CAAC;IAuFvD,CAAC;IArFC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8CF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAvF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA0B;AAD1C,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAwFvC","sourcesContent":["import {\n LitElement,\n html,\n TemplateResult,\n PropertyValues,\n css,\n type CSSResultGroup,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\n\n/*\n Placeholder shown in place of the theater when `viewAvailable` is false,\n * i.e. the item has no files that can be experienced in the browser. Emits\n * `loadingStateUpdated` so the navigator hides its loading spinner.\n /\n@customElement('ia-itemnav-no-theater-available')\nexport class IAItemNavNoTheaterAvailable extends LitElement {\n @property({ type: String }) identifier?: string = '';\n\n emitLoaded(): void {\n this.dispatchEvent(\n new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n detail: { loaded: true },\n }),\n );\n }\n\n updated(changed: PropertyValues): void {\n if (changed.has('identifier')) {\n this.emitLoaded();\n }\n }\n\n get downloadUrl(): string {\n return `/download/${this.identifier}`;\n }\n\n render(): TemplateResult {\n return html`\n <section>\n <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n <p>\n This item does not appear to have any files that can be experienced on\n Archive.org. <br />\n Please download files in this item to interact with them on your\n computer.\n </p>\n <a href=${this.downloadUrl}>Show all files</a>\n </section>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n color: var(--item-navigator-text-color--);\n text-align: center;\n / 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n section {\n width: 100%;\n margin: 5%;\n padding: 0 5%;\n }\n\n p {\n font-size: 1.4em;\n }\n\n a {\n color: var(--item-navigator-text-color--);\n background-color: var(--navy-blue);\n min-height: 35px;\n cursor: pointer;\n line-height: normal;\n border-radius: 0.4em;\n text-align: center;\n vertical-align: middle;\n font-size: 1.4em;\n font-family: var(--base-font-family);\n display: inline-block;\n padding: 0.85em 1.2em;\n border: 1px solid var(--lightest-gray);\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n user-select: none;\n text-decoration: none;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-no-theater-available': IAItemNavNoTheaterAvailable;\n }\n}\n"]}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-share-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;~~AAGb~~,OAAO,EACL,SAAS,EAOV,MAAM,eAAe,CAAC;AAEvB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qDAAqD;AACrD,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACrB,QAAQ,SAAiB;IAEzB,OAAO,SAAM;IAEb,WAAW,SAAM;IAEhB,mBAAmB,UAAS;IAE7B,UAAU,SAAM;IAEjB,cAAc,EAAE,WAAW,EAAE,CAAM;IAElC,IAAI,SAAM;IAET,YAAY,UAAS;IAEtB,aAAa,SAAM;IAE/C,OAAO,CAAC,gBAAgB,CAGpB;IAEJ,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IA+DrB;;;;OAIG;YACW,eAAe;IAuB7B,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO,CAG5C;IAED,MAAM,IAAI,cAAc;IAwCxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAwJlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
1	+ {"version":3,"file":"ia-itemnav-share-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EACL,SAAS,EAOV,MAAM,eAAe,CAAC;AAEvB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qDAAqD;AACrD,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACrB,QAAQ,SAAiB;IAEzB,OAAO,SAAM;IAEb,WAAW,SAAM;IAEhB,mBAAmB,UAAS;IAE7B,UAAU,SAAM;IAEjB,cAAc,EAAE,WAAW,EAAE,CAAM;IAElC,IAAI,SAAM;IAET,YAAY,UAAS;IAEtB,aAAa,SAAM;IAE/C,OAAO,CAAC,gBAAgB,CAGpB;IAEJ,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IA+DrB;;;;OAIG;YACW,eAAe;IAuB7B,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO,CAG5C;IAED,MAAM,IAAI,cAAc;IAwCxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAwJlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
 import themeStyles from '../../../themes/theme-styles.js';
 import { shareIcon, twitterIcon, facebookIcon, tumblrIcon, pinterestIcon, emailIcon, linkIcon, } from './share-icons.js';
 /** Icon for the share menu shortcut / menu entry. */

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-share-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport {\n shareIcon,\n twitterIcon,\n facebookIcon,\n tumblrIcon,\n pinterestIcon,\n emailIcon,\n linkIcon,\n} from './share-icons';\n\ntype ShareOption = {\n name: string;\n icon: TemplateResult \| string;\n url: string;\n};\n\n/** Icon for the share menu shortcut / menu entry. /\nexport { shareIcon };\n\n/\n The \"share this item\" side panel: social sharing links (Twitter, Facebook,\n * Tumblr, Pinterest, email) plus copyable iframe / bbcode embed snippets.\n * Sharing options are derived from the item identifier/metadata and rebuilt\n * whenever `sharingOptions` is reset to empty.\n /\n@customElement('ia-itemnav-share-panel')\nexport class IAItemNavSharePanel extends LitElement {\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({ type: String }) creator = '';\n\n @property({ type: String }) description = '';\n\n @property({ type: Boolean }) embedOptionsVisible = false;\n\n @property({ type: String }) identifier = '';\n\n @property({ type: Array }) sharingOptions: ShareOption[] = [];\n\n @property({ type: String }) type = '';\n\n @property({ type: Boolean }) renderHeader = false;\n\n @property({ type: String }) fileSubPrefix = '';\n\n private copyNoteTimeouts = new WeakMap<\n Element,\n ReturnType<typeof setTimeout>\n >();\n\n updated(changed: PropertyValues): void {\n if (changed.has('sharingOptions') && !this.sharingOptions.length) {\n this.loadProviders();\n }\n }\n\n loadProviders(): void {\n let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;\n if (this.fileSubPrefix) {\n shareUrl += `/${this.fileSubPrefix}`;\n }\n const shareBlurb = [\n this.description,\n this.creator,\n 'Free Download, Borrow, and Streaming',\n 'Internet Archive',\n ]\n .filter(Boolean)\n .join(' : ');\n\n this.sharingOptions = [\n {\n name: 'Twitter',\n icon: twitterIcon,\n url: `https://twitter.com/intent/tweet?${new URLSearchParams({\n url: shareUrl,\n text: shareBlurb,\n via: 'internetarchive',\n })}`,\n },\n {\n name: 'Facebook',\n icon: facebookIcon,\n url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({\n u: shareUrl,\n })}`,\n },\n {\n name: 'Tumblr',\n icon: tumblrIcon,\n url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(\n {\n posttype: 'link',\n canonicalUrl: shareUrl,\n title: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Pinterest',\n icon: pinterestIcon,\n url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(\n {\n url: shareUrl,\n description: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Email',\n icon: emailIcon,\n url: `mailto:?${new URLSearchParams({\n subject: shareBlurb,\n body: shareUrl,\n })}`,\n },\n ];\n }\n\n /\n Copies the embed snippet in the clicked `.code` block, preferring the async\n * Clipboard API and falling back to the legacy `execCommand` path for\n * browsers that lack it, then briefly flashes the \"Copied\" note.\n /\n private async copyToClipboard(event: MouseEvent): Promise<void> {\n const currentTarget = event.currentTarget as HTMLElement;\n const textarea = currentTarget.querySelector('textarea');\n const note = currentTarget.querySelector('small');\n if (!textarea \|\| !note) return;\n\n try {\n await navigator.clipboard.writeText(textarea.value);\n } catch {\n // Fallback for browsers without the async Clipboard API.\n textarea.select();\n document.execCommand('copy');\n textarea.blur();\n }\n\n note.classList.add('visible');\n clearTimeout(this.copyNoteTimeouts.get(note));\n this.copyNoteTimeouts.set(\n note,\n setTimeout(() => note.classList.remove('visible'), 4000),\n );\n }\n\n get iframeEmbed(): string {\n return `<iframe\n src=\"https://${this.baseHost}/embed/${this.identifier}\"\n width=\"560\" height=\"384\" frameborder=\"0\"\n webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen\n ></iframe>`;\n }\n\n get bbcodeEmbed(): string {\n return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;\n }\n\n get helpURL(): string {\n return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;\n }\n\n get header(): TemplateResult \| typeof nothing {\n const header = html`<header><h3>Share this ${this.type}</h3></header>`;\n return this.renderHeader ? header : nothing;\n }\n\n render(): TemplateResult {\n return html`\n ${this.header}\n <div>\n ${this.sharingOptions.map(\n (option) =>\n html`<a class=\"share-option\" href=${option.url} target=\"_blank\">\n ${option.icon} ${option.name}\n </a>`,\n )}\n <details>\n <summary class=\"share-option\">\n ${linkIcon} Get an embeddable link\n </summary>\n <div class=\"embed\">\n <h4>Embed</h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.iframeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <h4>\n Embed for wordpress.com hosted blogs and archive.org item\n <description> tags\n </h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.bbcodeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <p>\n Want more?\n <a href=${this.helpURL}\n >Advanced embedding details, examples, and help</a\n >!\n </p>\n </div>\n </details>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n / Icons follow the adjustable text color by default. /\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n --item-navigator-share-embed-bg--: var(\n --item-navigator-share-embed-bg,\n #151515\n );\n\n display: block;\n height: 100%;\n overflow-y: auto;\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n color: var(--item-navigator-text-color--);\n box-sizing: border-box;\n }\n\n header {\n display: flex;\n align-items: baseline;\n }\n\n h3 {\n padding: 0;\n margin: 0 1em 0 0;\n font-size: 1.6em;\n }\n\n h4 {\n font-size: 1.4em;\n }\n\n :host > div {\n padding: 1em 0;\n }\n\n .share-option {\n display: block;\n padding: 0.5em 0;\n font-size: 1.6em;\n text-decoration: none;\n color: var(--item-navigator-text-color--);\n cursor: pointer;\n transition: background-color 0.2s;\n border-radius: 6px;\n }\n\n .share-option:hover {\n background-color: rgba(255, 255, 255, 0.05);\n }\n\n .share-option > {\n display: inline-block;\n padding: 0.2em;\n margin-right: 1em;\n vertical-align: middle;\n border: 1px solid var(--item-navigator-border-color--);\n border-radius: 7px;\n }\n\n .share-option .ia-icon {\n /* Reset to the base so the icon (em) doesn't compound against the\n share-option's enlarged font-size. /\n font-size: var(--item-navigator-base-font-size--);\n width: 2em;\n height: 2em;\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. /\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. /\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n / Hide the triangle that appears on details tags */\n summary::marker {\n content: '';\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n .embed {\n padding-right: 5px;\n }\n\n .embed a {\n color: var(--item-navigator-text-color--);\n }\n\n .code {\n position: relative;\n }\n\n textarea {\n display: block;\n width: 100%;\n height: 120px;\n padding: 0.8em 1em;\n box-sizing: border-box;\n resize: none;\n cursor: pointer;\n font: normal 1.4em var(--base-font-family);\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-share-embed-bg--);\n }\n\n small {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3em;\n padding: 0.5em 1em;\n box-sizing: border-box;\n font: normal 1.2em/2em var(--base-font-family);\n color: var(--item-navigator-share-embed-bg--);\n background: var(--item-navigator-text-color--);\n opacity: 0;\n transition: opacity 300ms linear;\n }\n\n small.visible {\n opacity: 1;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-share-panel': IAItemNavSharePanel;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-itemnav-share-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAIR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EACL,SAAS,EACT,WAAW,EACX,YAAY,EACZ,UAAU,EACV,aAAa,EACb,SAAS,EACT,QAAQ,GACT,MAAM,eAAe,CAAC;AAQvB,qDAAqD;AACrD,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACuB,aAAQ,GAAG,aAAa,CAAC;QAEzB,YAAO,GAAG,EAAE,CAAC;QAEb,gBAAW,GAAG,EAAE,CAAC;QAEhB,wBAAmB,GAAG,KAAK,CAAC;QAE7B,eAAU,GAAG,EAAE,CAAC;QAEjB,mBAAc,GAAkB,EAAE,CAAC;QAElC,SAAI,GAAG,EAAE,CAAC;QAET,iBAAY,GAAG,KAAK,CAAC;QAEtB,kBAAa,GAAG,EAAE,CAAC;QAEvC,qBAAgB,GAAG,IAAI,OAAO,EAGnC,CAAC;IAyTN,CAAC;IAvTC,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YACjE,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,aAAa;QACX,IAAI,QAAQ,GAAG,WAAW,IAAI,CAAC,QAAQ,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC;QACrE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,QAAQ,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;QACvC,CAAC;QACD,MAAM,UAAU,GAAG;YACjB,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,OAAO;YACZ,sCAAsC;YACtC,kBAAkB;SACnB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,KAAK,CAAC,CAAC;QAEf,IAAI,CAAC,cAAc,GAAG;YACpB;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,WAAW;gBACjB,GAAG,EAAE,oCAAoC,IAAI,eAAe,CAAC;oBAC3D,GAAG,EAAE,QAAQ;oBACb,IAAI,EAAE,UAAU;oBAChB,GAAG,EAAE,iBAAiB;iBACvB,CAAC,EAAE;aACL;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,YAAY;gBAClB,GAAG,EAAE,8CAA8C,IAAI,eAAe,CAAC;oBACrE,CAAC,EAAE,QAAQ;iBACZ,CAAC,EAAE;aACL;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,UAAU;gBAChB,GAAG,EAAE,qDAAqD,IAAI,eAAe,CAC3E;oBACE,QAAQ,EAAE,MAAM;oBAChB,YAAY,EAAE,QAAQ;oBACtB,KAAK,EAAE,UAAU;iBAClB,CACF,EAAE;aACJ;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,aAAa;gBACnB,GAAG,EAAE,+CAA+C,IAAI,eAAe,CACrE;oBACE,GAAG,EAAE,QAAQ;oBACb,WAAW,EAAE,UAAU;iBACxB,CACF,EAAE;aACJ;YACD;gBACE,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,SAAS;gBACf,GAAG,EAAE,WAAW,IAAI,eAAe,CAAC;oBAClC,OAAO,EAAE,UAAU;oBACnB,IAAI,EAAE,QAAQ;iBACf,CAAC,EAAE;aACL;SACF,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACK,KAAK,CAAC,eAAe,CAAC,KAAiB;QAC7C,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B,CAAC;QACzD,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,IAAI,GAAG,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI;YAAE,OAAO;QAE/B,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACtD,CAAC;QAAC,MAAM,CAAC;YACP,yDAAyD;YACzD,QAAQ,CAAC,MAAM,EAAE,CAAC;YAClB,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YAC7B,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClB,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC9B,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACvB,IAAI,EACJ,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CACzD,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO;qBACU,IAAI,CAAC,QAAQ,UAAU,IAAI,CAAC,UAAU;;;eAG5C,CAAC;IACd,CAAC;IAED,IAAI,WAAW;QACb,OAAO,eAAe,IAAI,CAAC,UAAU,yFAAyF,CAAC;IACjI,CAAC;IAED,IAAI,OAAO;QACT,OAAO,WAAW,IAAI,CAAC,QAAQ,8BAA8B,IAAI,CAAC,UAAU,EAAE,CAAC;IACjF,CAAC;IAED,IAAI,MAAM;QACR,MAAM,MAAM,GAAG,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI,gBAAgB,CAAC;QACvE,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,MAAM;;UAET,IAAI,CAAC,cAAc,CAAC,GAAG,CACvB,CAAC,MAAM,EAAE,EAAE,CACT,IAAI,CAAA,gCAAgC,MAAM,CAAC,GAAG;gBAC1C,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI;iBACzB,CACR;;;cAGK,QAAQ;;;;uCAIiB,IAAI,CAAC,eAAe;mCACxB,IAAI,CAAC,WAAW;;;;;;;uCAOZ,IAAI,CAAC,eAAe;mCACxB,IAAI,CAAC,WAAW;;;;;wBAK3B,IAAI,CAAC,OAAO;;;;;;;KAO/B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmJF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9U6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AAEhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gEAA6B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAiB;AAEjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2DAAoC;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAW;AAET;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAAsB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAoB;AAjBpC,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA+U/B","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\nimport {\n shareIcon,\n twitterIcon,\n facebookIcon,\n tumblrIcon,\n pinterestIcon,\n emailIcon,\n linkIcon,\n} from './share-icons';\n\ntype ShareOption = {\n name: string;\n icon: TemplateResult \| string;\n url: string;\n};\n\n/** Icon for the share menu shortcut / menu entry. /\nexport { shareIcon };\n\n/\n The \"share this item\" side panel: social sharing links (Twitter, Facebook,\n * Tumblr, Pinterest, email) plus copyable iframe / bbcode embed snippets.\n * Sharing options are derived from the item identifier/metadata and rebuilt\n * whenever `sharingOptions` is reset to empty.\n /\n@customElement('ia-itemnav-share-panel')\nexport class IAItemNavSharePanel extends LitElement {\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({ type: String }) creator = '';\n\n @property({ type: String }) description = '';\n\n @property({ type: Boolean }) embedOptionsVisible = false;\n\n @property({ type: String }) identifier = '';\n\n @property({ type: Array }) sharingOptions: ShareOption[] = [];\n\n @property({ type: String }) type = '';\n\n @property({ type: Boolean }) renderHeader = false;\n\n @property({ type: String }) fileSubPrefix = '';\n\n private copyNoteTimeouts = new WeakMap<\n Element,\n ReturnType<typeof setTimeout>\n >();\n\n updated(changed: PropertyValues): void {\n if (changed.has('sharingOptions') && !this.sharingOptions.length) {\n this.loadProviders();\n }\n }\n\n loadProviders(): void {\n let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;\n if (this.fileSubPrefix) {\n shareUrl += `/${this.fileSubPrefix}`;\n }\n const shareBlurb = [\n this.description,\n this.creator,\n 'Free Download, Borrow, and Streaming',\n 'Internet Archive',\n ]\n .filter(Boolean)\n .join(' : ');\n\n this.sharingOptions = [\n {\n name: 'Twitter',\n icon: twitterIcon,\n url: `https://twitter.com/intent/tweet?${new URLSearchParams({\n url: shareUrl,\n text: shareBlurb,\n via: 'internetarchive',\n })}`,\n },\n {\n name: 'Facebook',\n icon: facebookIcon,\n url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({\n u: shareUrl,\n })}`,\n },\n {\n name: 'Tumblr',\n icon: tumblrIcon,\n url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(\n {\n posttype: 'link',\n canonicalUrl: shareUrl,\n title: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Pinterest',\n icon: pinterestIcon,\n url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(\n {\n url: shareUrl,\n description: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Email',\n icon: emailIcon,\n url: `mailto:?${new URLSearchParams({\n subject: shareBlurb,\n body: shareUrl,\n })}`,\n },\n ];\n }\n\n /\n Copies the embed snippet in the clicked `.code` block, preferring the async\n * Clipboard API and falling back to the legacy `execCommand` path for\n * browsers that lack it, then briefly flashes the \"Copied\" note.\n /\n private async copyToClipboard(event: MouseEvent): Promise<void> {\n const currentTarget = event.currentTarget as HTMLElement;\n const textarea = currentTarget.querySelector('textarea');\n const note = currentTarget.querySelector('small');\n if (!textarea \|\| !note) return;\n\n try {\n await navigator.clipboard.writeText(textarea.value);\n } catch {\n // Fallback for browsers without the async Clipboard API.\n textarea.select();\n document.execCommand('copy');\n textarea.blur();\n }\n\n note.classList.add('visible');\n clearTimeout(this.copyNoteTimeouts.get(note));\n this.copyNoteTimeouts.set(\n note,\n setTimeout(() => note.classList.remove('visible'), 4000),\n );\n }\n\n get iframeEmbed(): string {\n return `<iframe\n src=\"https://${this.baseHost}/embed/${this.identifier}\"\n width=\"560\" height=\"384\" frameborder=\"0\"\n webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen\n ></iframe>`;\n }\n\n get bbcodeEmbed(): string {\n return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;\n }\n\n get helpURL(): string {\n return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;\n }\n\n get header(): TemplateResult \| typeof nothing {\n const header = html`<header><h3>Share this ${this.type}</h3></header>`;\n return this.renderHeader ? header : nothing;\n }\n\n render(): TemplateResult {\n return html`\n ${this.header}\n <div>\n ${this.sharingOptions.map(\n (option) =>\n html`<a class=\"share-option\" href=${option.url} target=\"_blank\">\n ${option.icon} ${option.name}\n </a>`,\n )}\n <details>\n <summary class=\"share-option\">\n ${linkIcon} Get an embeddable link\n </summary>\n <div class=\"embed\">\n <h4>Embed</h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.iframeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <h4>\n Embed for wordpress.com hosted blogs and archive.org item\n <description> tags\n </h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.bbcodeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <p>\n Want more?\n <a href=${this.helpURL}\n >Advanced embedding details, examples, and help</a\n >!\n </p>\n </div>\n </details>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n / Icons follow the adjustable text color by default. /\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n --item-navigator-share-embed-bg--: var(\n --item-navigator-share-embed-bg,\n #151515\n );\n\n display: block;\n height: 100%;\n overflow-y: auto;\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n color: var(--item-navigator-text-color--);\n box-sizing: border-box;\n }\n\n header {\n display: flex;\n align-items: baseline;\n }\n\n h3 {\n padding: 0;\n margin: 0 1em 0 0;\n font-size: 1.6em;\n }\n\n h4 {\n font-size: 1.4em;\n }\n\n :host > div {\n padding: 1em 0;\n }\n\n .share-option {\n display: block;\n padding: 0.5em 0;\n font-size: 1.6em;\n text-decoration: none;\n color: var(--item-navigator-text-color--);\n cursor: pointer;\n transition: background-color 0.2s;\n border-radius: 6px;\n }\n\n .share-option:hover {\n background-color: rgba(255, 255, 255, 0.05);\n }\n\n .share-option > {\n display: inline-block;\n padding: 0.2em;\n margin-right: 1em;\n vertical-align: middle;\n border: 1px solid var(--item-navigator-border-color--);\n border-radius: 7px;\n }\n\n .share-option .ia-icon {\n /* Reset to the base so the icon (em) doesn't compound against the\n share-option's enlarged font-size. /\n font-size: var(--item-navigator-base-font-size--);\n width: 2em;\n height: 2em;\n }\n\n / Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. /\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n / Host-supplied icons may still be inline svg, so keep theming those\n the original way. /\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n / Hide the triangle that appears on details tags */\n summary::marker {\n content: '';\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n .embed {\n padding-right: 5px;\n }\n\n .embed a {\n color: var(--item-navigator-text-color--);\n }\n\n .code {\n position: relative;\n }\n\n textarea {\n display: block;\n width: 100%;\n height: 120px;\n padding: 0.8em 1em;\n box-sizing: border-box;\n resize: none;\n cursor: pointer;\n font: normal 1.4em var(--base-font-family);\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-share-embed-bg--);\n }\n\n small {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3em;\n padding: 0.5em 1em;\n box-sizing: border-box;\n font: normal 1.2em/2em var(--base-font-family);\n color: var(--item-navigator-share-embed-bg--);\n background: var(--item-navigator-text-color--);\n opacity: 0;\n transition: opacity 300ms linear;\n }\n\n small.visible {\n opacity: 1;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-share-panel': IAItemNavSharePanel;\n }\n}\n"]}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-sort-files-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,cAAc,EACf,MAAM,KAAK,CAAC;~~AAOb~~,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQjE;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC3B,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAErC,cAAc,EAAE,gBAAgB,EAAE,CAAM;IAExB,WAAW,EAAE,cAAc,CAC1D;IAEZ,MAAM,IAAI,cAAc;IAIxB,IAAI,UAAU,IAAI,cAAc,CAgC/B;IAED,WAAW,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IAsB3C,MAAM,KAAK,MAAM,IAAI,cAAc,CA4ClC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}
1	+ {"version":3,"file":"ia-itemnav-sort-files-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,cAAc,EACf,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQjE;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC3B,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAErC,cAAc,EAAE,gBAAgB,EAAE,CAAM;IAExB,WAAW,EAAE,cAAc,CAC1D;IAEZ,MAAM,IAAI,cAAc;IAIxB,IAAI,UAAU,IAAI,cAAc,CAgC/B;IAED,WAAW,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IAsB3C,MAAM,KAAK,MAAM,IAAI,cAAc,CA4ClC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
 import themeStyles from '../../../themes/theme-styles.js';
 import { maskedIcon } from '../../../util/masked-icon.js';
 import sortAscUrl from './icons/sort-asc.svg';

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-sort-files-button.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,~~aAAa~~,EAAE,~~QAAQ~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAC5D~~,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,cAAc,MAAM,0BAA0B,CAAC;AAGtD,MAAM,WAAW,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;AAE3C,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAE7C,MAAM,eAAe,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AAEnD;;;;GAIG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QACsB,gBAAW,GAAuB,EAAE,CAAC;QAErC,mBAAc,GAAuB,EAAE,CAAC;QAExB,gBAAW,GACpD,SAAS,CAAC;IA2Gd,CAAC;IAzGC,MAAM;QACJ,OAAO,IAAI,CAAA,qCAAqC,IAAI,CAAC,UAAU,QAAQ,CAAC;IAC1E,CAAC;IAED,IAAI,UAAU;QACZ,MAAM,SAAS,GAA2C;YACxD,OAAO,EAAE,IAAI,CAAA;;;;mBAIA,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;;YAE1C,eAAe;;OAEpB;YACD,SAAS,EAAE,IAAI,CAAA;;;;mBAIF,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;;YAE3C,WAAW;;OAEhB;YACD,UAAU,EAAE,IAAI,CAAA;;;;mBAIH,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;;YAExC,YAAY;;OAEjB;SACF,CAAC;QAEF,OAAO,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAED,WAAW,CAAC,QAAwB;QAClC,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;QAE5B,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACtD,IAAI,QAAQ,KAAK,WAAW;gBAAE,OAAO,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACpE,IAAI,QAAQ,KAAK,YAAY;gBAAE,OAAO,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACrE,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,MAAM,EAAE;gBACN,QAAQ;gBACR,WAAW;aACZ;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;IACpC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuCF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAhH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6DAAsC;AAErC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gEAAyC;AAExB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6DAC9B;AAND,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAiHpC","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n TemplateResult,\n} from 'lit';\nimport { ~~customElement,~~ property } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\nimport sortAscUrl from './icons/sort-asc.svg';\nimport sortDescUrl from './icons/sort-desc.svg';\nimport sortNeutralUrl from './icons/sort-neutral.svg';\nimport type { FileSortOption, ViewableFileInfo } from './models';\n\nconst sortAscIcon = maskedIcon(sortAscUrl);\n\nconst sortDescIcon = maskedIcon(sortDescUrl);\n\nconst sortNeutralIcon = maskedIcon(sortNeutralUrl);\n\n/*\n A tri-state sort toggle for the viewable-files panel header. Cycles\n * default → title ascending → title descending → default, sorting the supplied\n * file list and emitting `fileListSorted` on each change.\n /\n@customElement('ia-itemnav-sort-files-button')\nexport class IAItemNavSortFilesButton extends LitElement {\n @property({ type: Array }) fileListRaw: ViewableFileInfo[] = [];\n\n @property({ type: Array }) fileListSorted: ViewableFileInfo[] = [];\n\n @property({ type: String, reflect: true }) sortOrderBy: FileSortOption =\n 'default';\n\n render(): TemplateResult {\n return html`<div class=\"sort-multi-file-list\">${this.sortButton}</div>`;\n }\n\n get sortButton(): TemplateResult {\n const sortIcons: Record<FileSortOption, TemplateResult> = {\n default: html`\n <button\n class=\"sort-by neutral-icon\"\n aria-label=\"Sort volumes in initial order\"\n @click=${() => this.sortVolumes('title_asc')}\n >\n ${sortNeutralIcon}\n </button>\n `,\n title_asc: html`\n <button\n class=\"sort-by asc-icon\"\n aria-label=\"Sort volumes in ascending order\"\n @click=${() => this.sortVolumes('title_desc')}\n >\n ${sortAscIcon}\n </button>\n `,\n title_desc: html`\n <button\n class=\"sort-by desc-icon\"\n aria-label=\"Sort volumes in descending order\"\n @click=${() => this.sortVolumes('default')}\n >\n ${sortDescIcon}\n </button>\n `,\n };\n\n return sortIcons[this.sortOrderBy];\n }\n\n sortVolumes(sortType: FileSortOption): void {\n this.sortOrderBy = sortType;\n\n const sortedFiles = [...this.fileListRaw].sort((a, b) => {\n if (sortType === 'title_asc') return a.title.localeCompare(b.title);\n if (sortType === 'title_desc') return b.title.localeCompare(a.title);\n return (a.orig_sort ?? 0) - (b.orig_sort ?? 0);\n });\n\n this.dispatchEvent(\n new CustomEvent('fileListSorted', {\n detail: {\n sortType,\n sortedFiles,\n },\n bubbles: true,\n composed: true,\n }),\n );\n this.fileListSorted = sortedFiles;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n / Every glyph is square, so one knob sizes both axes. Matches the\n panel header's close button, which sits beside this one. /\n --item-navigator-header-icon-size--: var(\n --item-navigator-header-icon-size,\n 2em\n );\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color, var(--true-white))\n );\n\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n button.sort-by {\n padding: 0;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: inline-flex;\n / Buttons don't inherit font-size, and the UA default would make the\n em-sized glyph larger than the close button beside it. /\n font: inherit;\n }\n\n / The glyph is a masked span: the mask supplies the shape, this\n supplies the paint. */\n button.sort-by .ia-icon {\n width: var(--item-navigator-header-icon-size--);\n height: var(--item-navigator-header-icon-size--);\n background-color: var(--item-navigator-icon-color--);\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-sort-files-button': IAItemNavSortFilesButton;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-itemnav-sort-files-button.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\nimport sortAscUrl from './icons/sort-asc.svg';\nimport sortDescUrl from './icons/sort-desc.svg';\nimport sortNeutralUrl from './icons/sort-neutral.svg';\nimport type { FileSortOption, ViewableFileInfo } from './models';\n\nconst sortAscIcon = maskedIcon(sortAscUrl);\n\nconst sortDescIcon = maskedIcon(sortDescUrl);\n\nconst sortNeutralIcon = maskedIcon(sortNeutralUrl);\n\n/*\n A tri-state sort toggle for the viewable-files panel header. Cycles\n * default → title ascending → title descending → default, sorting the supplied\n * file list and emitting `fileListSorted` on each change.\n /\n@customElement('ia-itemnav-sort-files-button')\nexport class IAItemNavSortFilesButton extends LitElement {\n @property({ type: Array }) fileListRaw: ViewableFileInfo[] = [];\n\n @property({ type: Array }) fileListSorted: ViewableFileInfo[] = [];\n\n @property({ type: String, reflect: true }) sortOrderBy: FileSortOption =\n 'default';\n\n render(): TemplateResult {\n return html`<div class=\"sort-multi-file-list\">${this.sortButton}</div>`;\n }\n\n get sortButton(): TemplateResult {\n const sortIcons: Record<FileSortOption, TemplateResult> = {\n default: html`\n <button\n class=\"sort-by neutral-icon\"\n aria-label=\"Sort volumes in initial order\"\n @click=${() => this.sortVolumes('title_asc')}\n >\n ${sortNeutralIcon}\n </button>\n `,\n title_asc: html`\n <button\n class=\"sort-by asc-icon\"\n aria-label=\"Sort volumes in ascending order\"\n @click=${() => this.sortVolumes('title_desc')}\n >\n ${sortAscIcon}\n </button>\n `,\n title_desc: html`\n <button\n class=\"sort-by desc-icon\"\n aria-label=\"Sort volumes in descending order\"\n @click=${() => this.sortVolumes('default')}\n >\n ${sortDescIcon}\n </button>\n `,\n };\n\n return sortIcons[this.sortOrderBy];\n }\n\n sortVolumes(sortType: FileSortOption): void {\n this.sortOrderBy = sortType;\n\n const sortedFiles = [...this.fileListRaw].sort((a, b) => {\n if (sortType === 'title_asc') return a.title.localeCompare(b.title);\n if (sortType === 'title_desc') return b.title.localeCompare(a.title);\n return (a.orig_sort ?? 0) - (b.orig_sort ?? 0);\n });\n\n this.dispatchEvent(\n new CustomEvent('fileListSorted', {\n detail: {\n sortType,\n sortedFiles,\n },\n bubbles: true,\n composed: true,\n }),\n );\n this.fileListSorted = sortedFiles;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n / Every glyph is square, so one knob sizes both axes. Matches the\n panel header's close button, which sits beside this one. /\n --item-navigator-header-icon-size--: var(\n --item-navigator-header-icon-size,\n 2em\n );\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color, var(--true-white))\n );\n\n / 10px base (petabox scale); internal sizing is em against it. /\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n button.sort-by {\n padding: 0;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: inline-flex;\n / Buttons don't inherit font-size, and the UA default would make the\n em-sized glyph larger than the close button beside it. /\n font: inherit;\n }\n\n / The glyph is a masked span: the mask supplies the shape, this\n supplies the paint. */\n button.sort-by .ia-icon {\n width: var(--item-navigator-header-icon-size--);\n height: var(--item-navigator-header-icon-size--);\n background-color: var(--item-navigator-icon-color--);\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-sort-files-button': IAItemNavSortFilesButton;\n }\n}\n"]}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-viewable-files-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;~~AAMb~~,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjE,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,gBAA+B,CAAC;AAE9D;;;;;GAKG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IAC7B,QAAQ,EAAE,MAAM,CAAiB;IAEjC,WAAW,EAAE,cAAc,CAAa;IAExC,SAAS,EAAE,MAAM,CAAM;IAExB,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAEjB,YAAY,UAAS;IAEjE;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMhD,iBAAiB,IAAI,IAAI;YAOX,gBAAgB;IAS9B,OAAO,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM;IAQvC,IAAI,QAAQ,IAAI,cAAc,CAI7B;IAED,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc;IAmB9C,IAAI,gBAAgB,IAAI,cAAc,CAYrC;IAED,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAIzC,MAAM,KAAK,MAAM,IAAI,cAAc,CAuGlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}
1	+ {"version":3,"file":"ia-itemnav-viewable-files-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjE,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,gBAA+B,CAAC;AAE9D;;;;;GAKG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IAC7B,QAAQ,EAAE,MAAM,CAAiB;IAEjC,WAAW,EAAE,cAAc,CAAa;IAExC,SAAS,EAAE,MAAM,CAAM;IAExB,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAEjB,YAAY,UAAS;IAEjE;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMhD,iBAAiB,IAAI,IAAI;YAOX,gBAAgB;IAS9B,OAAO,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM;IAQvC,IAAI,QAAQ,IAAI,cAAc,CAI7B;IAED,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc;IAmB9C,IAAI,gBAAgB,IAAI,cAAc,CAYrC;IAED,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAIzC,MAAM,KAAK,MAAM,IAAI,cAAc,CAuGlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
 import { repeat } from 'lit/directives/repeat.js';
 import themeStyles from '../../../themes/theme-styles.js';
 import { maskedIcon } from '../../../util/masked-icon.js';

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-itemnav-viewable-files-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAIR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,~~aAAa~~,EAAE,~~QAAQ~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAC5D~~,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAG1D,8DAA8D;AAC9D,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;AAE9D;;;;;GAKG;AAEI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;QACuB,aAAQ,GAAW,aAAa,CAAC;QAEjC,gBAAW,GAAmB,SAAS,CAAC;QAExC,cAAS,GAAW,EAAE,CAAC;QAExB,aAAQ,GAAuB,EAAE,CAAC;QAEjB,iBAAY,GAAG,KAAK,CAAC;IA2LnE,CAAC;IAzLC;;;;;;;OAOG;IACO,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,0EAA0E;QAC1E,4CAA4C;QAC5C,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,mEAAmE;QACnE,uDAAuD;QACvD,IAAI,CAAC,UAAU;YACb,EAAE,aAAa,CAAc,iBAAiB,CAAC;YAC/C,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,OAAO,CAAC,IAAsB;QAC5B,MAAM,OAAO,GAAG,KAAK,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QACrD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE,CAAC;YACxD,OAAO,GAAG,OAAO,SAAS,IAAI,CAAC,WAAW,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAA;;MAET,CAAC;IACL,CAAC;IAED,MAAM,CAAC,IAAsB;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAE9D,OAAO,IAAI,CAAA;;;6BAGc,WAAW;oBACpB,OAAO;;gBAEX,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;;;;;KAKvD,CAAC;IACJ,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,YAAY,GAAG,MAAM,CACzB,IAAI,CAAC,QAAQ,EACb,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,WAAW,EAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CACvB,CAAC;QACF,OAAO,IAAI,CAAA;;UAEL,YAAY;;;KAGjB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC;IAChE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkGF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAnM6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAkC;AAEjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAyC;AAExC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAwB;AAExB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6DAAmC;AAEjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iEAAsB;AATtD,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAoMvC","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { ~~customElement,~~ property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\nimport viewableFilesUrl from './icons/viewable-files.svg';\nimport type { FileSortOption, ViewableFileInfo } from './models';\n\n/** Icon for the viewable-files menu shortcut / menu entry. /\nexport const viewableFilesIcon = maskedIcon(viewableFilesUrl);\n\n/\n The \"viewable files\" side panel: a scrollable list of the item's viewable\n * files/volumes, linking each to its page on the host and highlighting the one\n * matching the current `subPrefix`. Populated by the host via `fileList`\n * (typically re-ordered by an `ia-itemnav-sort-files-button`).\n /\n@customElement('ia-itemnav-viewable-files-panel')\nexport class IAItemNavViewableFilesPanel extends LitElement {\n @property({ type: String }) baseHost: string = 'archive.org';\n\n @property({ type: String }) sortOrderBy: FileSortOption = 'default';\n\n @property({ type: String }) subPrefix: string = '';\n\n @property({ type: Array }) fileList: ViewableFileInfo[] = [];\n\n @property({ type: Boolean, reflect: true }) addSortToUrl = false;\n\n /\n Keeps the active file in view whenever the list or the selection changes.\n \n Both are needed: hosts commonly build this panel once and hand it a\n * `fileList` afterwards, and the selection can move while the panel stays\n * open. Reacting to the change means there is nothing to wait on — the row\n * exists by the time the update completes.\n /\n protected updated(changed: PropertyValues): void {\n if (changed.has('fileList') \|\| changed.has('subPrefix')) {\n this.revealActiveFile();\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n // Hosts reuse this element across opens, and the scroll container it sits\n // in may have been reset while it was away.\n this.revealActiveFile();\n }\n\n private async revealActiveFile(): Promise<void> {\n await this.updateComplete;\n // `nearest` leaves an already-visible row alone, which is what the\n // Chrome-only `scrollIntoViewIfNeeded` used to buy us.\n this.shadowRoot\n ?.querySelector<HTMLElement>('.content.active')\n ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }\n\n fileUrl(item: ViewableFileInfo): string {\n const baseUrl = `//${this.baseHost}${item.url_path}`;\n if (this.addSortToUrl && this.sortOrderBy !== 'default') {\n return `${baseUrl}?sort=${this.sortOrderBy}`;\n }\n return baseUrl;\n }\n\n get pdfLabel(): TemplateResult {\n return html`<span class=\"pdf-label\"\n ><span class=\"sr-only\">view this</span> PDF</span\n >`;\n }\n\n fileLi(item: ViewableFileInfo): TemplateResult {\n const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';\n const hrefUrl = this.fileUrl(item);\n const isPdf = (item.file_source ?? '').match(/^[^+]+\\.pdf$/i);\n\n return html`\n <li>\n <div class=\"separator\"></div>\n <div class=\"content${activeClass}\">\n <a href=${hrefUrl}>\n <p class=\"item-title\">\n ${item.title}${isPdf ? this.pdfLabel : nothing}\n </p>\n </a>\n </div>\n </li>\n `;\n }\n\n get fileListTemplate(): TemplateResult {\n const filesDisplay = repeat(\n this.fileList,\n (file) => file?.file_prefix,\n this.fileLi.bind(this),\n );\n return html`\n <ul>\n ${filesDisplay}\n <div class=\"separator\"></div>\n </ul>\n `;\n }\n\n render(): TemplateResult \| typeof nothing {\n return this.fileList.length ? this.fileListTemplate : nothing;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n --item-navigator-active-file-border-color--: var(\n --item-navigator-active-file-border-color,\n #538bc5\n );\n\n display: block;\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--item-navigator-text-color--);\n margin-top: 14px;\n margin-bottom: 2em;\n --active-border-width--: 2px;\n / 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n a {\n color: var(--item-navigator-text-color--);\n text-decoration: none;\n }\n\n ul {\n padding: 0;\n list-style: none;\n margin: var(--active-border-width--) 0.5em 1em 0;\n }\n\n ul > li:first-child .separator {\n display: none;\n }\n\n li {\n cursor: pointer;\n position: relative;\n }\n\n li .content {\n border: var(--active-border-width--) solid transparent;\n padding: 0.2em 0 0.4em 0.2em;\n }\n\n li .content.active {\n border: var(--active-border-width--) solid\n var(--item-navigator-active-file-border-color--);\n }\n\n li.content a {\n display: flex;\n }\n\n .item-title {\n margin-block-start: 0em;\n margin-block-end: 0em;\n font-size: 14px;\n font-weight: bold;\n word-wrap: break-word;\n padding-left: 5px;\n }\n\n .separator {\n background-color: var(--item-navigator-border-color--);\n width: 98%;\n margin: 1px auto;\n height: 1px;\n }\n\n .pdf-label {\n border: 1px solid;\n padding: 2px 5px;\n border-radius: 20px;\n display: inline-block;\n margin-left: 5px;\n font-size: 0.9em;\n }\n\n .pdf-label .sr-only {\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n padding: 0;\n border: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-viewable-files-panel': IAItemNavViewableFilesPanel;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-itemnav-viewable-files-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { repeat } from 'lit/directives/repeat.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\nimport viewableFilesUrl from './icons/viewable-files.svg';\nimport type { FileSortOption, ViewableFileInfo } from './models';\n\n/** Icon for the viewable-files menu shortcut / menu entry. /\nexport const viewableFilesIcon = maskedIcon(viewableFilesUrl);\n\n/\n The \"viewable files\" side panel: a scrollable list of the item's viewable\n * files/volumes, linking each to its page on the host and highlighting the one\n * matching the current `subPrefix`. Populated by the host via `fileList`\n * (typically re-ordered by an `ia-itemnav-sort-files-button`).\n /\n@customElement('ia-itemnav-viewable-files-panel')\nexport class IAItemNavViewableFilesPanel extends LitElement {\n @property({ type: String }) baseHost: string = 'archive.org';\n\n @property({ type: String }) sortOrderBy: FileSortOption = 'default';\n\n @property({ type: String }) subPrefix: string = '';\n\n @property({ type: Array }) fileList: ViewableFileInfo[] = [];\n\n @property({ type: Boolean, reflect: true }) addSortToUrl = false;\n\n /\n Keeps the active file in view whenever the list or the selection changes.\n \n Both are needed: hosts commonly build this panel once and hand it a\n * `fileList` afterwards, and the selection can move while the panel stays\n * open. Reacting to the change means there is nothing to wait on — the row\n * exists by the time the update completes.\n /\n protected updated(changed: PropertyValues): void {\n if (changed.has('fileList') \|\| changed.has('subPrefix')) {\n this.revealActiveFile();\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n // Hosts reuse this element across opens, and the scroll container it sits\n // in may have been reset while it was away.\n this.revealActiveFile();\n }\n\n private async revealActiveFile(): Promise<void> {\n await this.updateComplete;\n // `nearest` leaves an already-visible row alone, which is what the\n // Chrome-only `scrollIntoViewIfNeeded` used to buy us.\n this.shadowRoot\n ?.querySelector<HTMLElement>('.content.active')\n ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }\n\n fileUrl(item: ViewableFileInfo): string {\n const baseUrl = `//${this.baseHost}${item.url_path}`;\n if (this.addSortToUrl && this.sortOrderBy !== 'default') {\n return `${baseUrl}?sort=${this.sortOrderBy}`;\n }\n return baseUrl;\n }\n\n get pdfLabel(): TemplateResult {\n return html`<span class=\"pdf-label\"\n ><span class=\"sr-only\">view this</span> PDF</span\n >`;\n }\n\n fileLi(item: ViewableFileInfo): TemplateResult {\n const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';\n const hrefUrl = this.fileUrl(item);\n const isPdf = (item.file_source ?? '').match(/^[^+]+\\.pdf$/i);\n\n return html`\n <li>\n <div class=\"separator\"></div>\n <div class=\"content${activeClass}\">\n <a href=${hrefUrl}>\n <p class=\"item-title\">\n ${item.title}${isPdf ? this.pdfLabel : nothing}\n </p>\n </a>\n </div>\n </li>\n `;\n }\n\n get fileListTemplate(): TemplateResult {\n const filesDisplay = repeat(\n this.fileList,\n (file) => file?.file_prefix,\n this.fileLi.bind(this),\n );\n return html`\n <ul>\n ${filesDisplay}\n <div class=\"separator\"></div>\n </ul>\n `;\n }\n\n render(): TemplateResult \| typeof nothing {\n return this.fileList.length ? this.fileListTemplate : nothing;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n --item-navigator-active-file-border-color--: var(\n --item-navigator-active-file-border-color,\n #538bc5\n );\n\n display: block;\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--item-navigator-text-color--);\n margin-top: 14px;\n margin-bottom: 2em;\n --active-border-width--: 2px;\n / 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n a {\n color: var(--item-navigator-text-color--);\n text-decoration: none;\n }\n\n ul {\n padding: 0;\n list-style: none;\n margin: var(--active-border-width--) 0.5em 1em 0;\n }\n\n ul > li:first-child .separator {\n display: none;\n }\n\n li {\n cursor: pointer;\n position: relative;\n }\n\n li .content {\n border: var(--active-border-width--) solid transparent;\n padding: 0.2em 0 0.4em 0.2em;\n }\n\n li .content.active {\n border: var(--active-border-width--) solid\n var(--item-navigator-active-file-border-color--);\n }\n\n li.content a {\n display: flex;\n }\n\n .item-title {\n margin-block-start: 0em;\n margin-block-end: 0em;\n font-size: 14px;\n font-weight: bold;\n word-wrap: break-word;\n padding-left: 5px;\n }\n\n .separator {\n background-color: var(--item-navigator-border-color--);\n width: 98%;\n margin: 1px auto;\n height: 1px;\n }\n\n .pdf-label {\n border: 1px solid;\n padding: 2px 5px;\n border-radius: 20px;\n display: inline-block;\n margin-left: 5px;\n font-size: 0.9em;\n }\n\n .pdf-label .sr-only {\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n padding: 0;\n border: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-viewable-files-panel': IAItemNavViewableFilesPanel;\n }\n}\n"]}