@m3e/web 2.5.14 → 2.5.15
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.
- package/dist/all.js +133 -81
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +35 -35
- package/dist/all.min.js.map +1 -1
- package/dist/core.js +46 -11
- package/dist/core.js.map +1 -1
- package/dist/core.min.js +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +20 -0
- package/dist/custom-elements.json +89 -30
- package/dist/datepicker.js +0 -2
- package/dist/datepicker.js.map +1 -1
- package/dist/datepicker.min.js +1 -1
- package/dist/datepicker.min.js.map +1 -1
- package/dist/form-field.js +1 -1
- package/dist/form-field.js.map +1 -1
- package/dist/form-field.min.js +1 -1
- package/dist/form-field.min.js.map +1 -1
- package/dist/html-custom-data.json +2 -2
- package/dist/nav-bar.js +4 -2
- package/dist/nav-bar.js.map +1 -1
- package/dist/nav-bar.min.js +1 -1
- package/dist/nav-bar.min.js.map +1 -1
- package/dist/nav-rail.js +1 -1
- package/dist/nav-rail.js.map +1 -1
- package/dist/nav-rail.min.js +1 -1
- package/dist/nav-rail.min.js.map +1 -1
- package/dist/skeleton.js +81 -65
- package/dist/skeleton.js.map +1 -1
- package/dist/skeleton.min.js +1 -1
- package/dist/skeleton.min.js.map +1 -1
- package/dist/slider.js +1 -0
- package/dist/slider.js.map +1 -1
- package/dist/slider.min.js +1 -1
- package/dist/slider.min.js.map +1 -1
- package/dist/src/core/shared/primitives/CollapsibleElement.d.ts +1 -1
- package/dist/src/core/shared/primitives/CollapsibleElement.d.ts.map +1 -1
- package/dist/src/core/shared/primitives/CollapsibleOrientation.d.ts +1 -1
- package/dist/src/core/shared/primitives/CollapsibleOrientation.d.ts.map +1 -1
- package/dist/src/datepicker/DatepickerElement.d.ts.map +1 -1
- package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
- package/dist/src/nav-bar/NavBarElement.d.ts +2 -0
- package/dist/src/nav-bar/NavBarElement.d.ts.map +1 -1
- package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
- package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
- package/dist/src/skeleton/SkeletonElement.d.ts +12 -6
- package/dist/src/skeleton/SkeletonElement.d.ts.map +1 -1
- package/dist/src/slider/SliderElement.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/nav-rail.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-rail.js","sources":["../../src/nav-rail/NavRailElement.ts","../../src/nav-rail/NavRailToggleElement.ts"],"sourcesContent":["import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport {\r\n customElement,\r\n DesignToken,\r\n registerStyleSheet,\r\n setCustomState,\r\n SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eInteractivityChecker, RovingTabIndexManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eNavBarElement, NavItemOrientation } from \"@m3e/web/nav-bar\";\r\n\r\n/**\r\n * A vertical bar, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-rail` component provides a vertical navigation rail for switching between views in\r\n * an application. Designed for larger devices, it supports compact and expanded modes, interactive\r\n * items, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail\r\n *\r\n * @attr mode - The mode in which items in the rail are presented.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state of an item changes.\r\n * @fires input - Dispatched when the selected state of an item changes.\r\n * @fires change - Dispatched when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-compact-width - Width of the nav rail in compact mode.\r\n * @cssprop --m3e-nav-rail-inline-padding - Inline padding for nav rail.\r\n * @cssprop --m3e-nav-rail-expanded-width - Width of the nav rail in expanded mode.\r\n * @cssprop --m3e-nav-rail-expanded-item-height - Height of nav items in expanded mode.\r\n * @cssprop --m3e-nav-rail-button-item-space - Space below icon buttons and FABs.\r\n * @cssprop --m3e-nav-rail-icon-button-inset - Inset for icon buttons.\r\n * @cssprop --m3e-nav-rail-expanded-inline-padding - Deprecated, use `--m3e-nav-rail-inline-padding`.\r\n * @cssprop --m3e-nav-rail-expanded-min-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-max-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Deprecated, use `--m3e-nav-rail-icon-button-inset`.\r\n */\r\n@customElement(\"m3e-nav-rail\")\r\nexport class M3eNavRailElement extends SuppressInitialAnimation(M3eNavBarElement) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-rail > m3e-icon-button,\r\n m3e-nav-rail > m3e-fab {\r\n margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem);\r\n }\r\n m3e-nav-rail > m3e-icon-button {\r\n margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem);\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: ${unsafeCSS(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n .base {\r\n contain: layout style;\r\n display: flex;\r\n width: inherit;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n box-sizing: border-box;\r\n padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem);\r\n padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem);\r\n padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem);\r\n }\r\n :host(:is(:state(--compact), :--compact)) {\r\n width: var(--m3e-nav-rail-compact-width, 6rem);\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n width: var(--m3e-nav-rail-expanded-width, 13.75rem);\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem);\r\n --_nav-item-align-self: stretch;\r\n --_nav-item-justify-content: flex-start;\r\n }\r\n ::slotted(*) {\r\n flex: none;\r\n }\r\n ::slotted(m3e-fab) {\r\n --m3e-fab-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1};\r\n --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1};\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ #focusKeyManager = new RovingTabIndexManager().withHomeAndEnd().withWrap();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n this[selectionManager].onSelectedItemsChange(() => {\r\n this.#focusKeyManager.updateActiveItem(this[selectionManager].activeItem);\r\n });\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n this.#focusKeyManager.onKeyDown(e);\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateItems(): void {\r\n const items = M3eInteractivityChecker.findInteractiveElements(this, true);\r\n const { added } = this.#focusKeyManager.setItems(items);\r\n if (!this.#focusKeyManager.activeItem) {\r\n const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n if (active) {\r\n this.#focusKeyManager.updateActiveItem(active);\r\n }\r\n }\r\n\r\n this.items.forEach((x, i) => setCustomState(x, \"--first\", i === 0));\r\n\r\n super._updateItems();\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateOrientation(orientation: NavItemOrientation): void {\r\n super._updateOrientation(orientation);\r\n this.querySelectorAll(\"m3e-fab\").forEach((x) => x.toggleAttribute(\"extended\", orientation === \"horizontal\"));\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail\": M3eNavRailElement;\r\n }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor, MutationController } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eNavRailElement } from \"./NavRailElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail-toggle\r\n */\r\n@customElement(\"m3e-nav-rail-toggle\")\r\nexport class M3eNavRailToggleElement extends HtmlFor(ActionElementBase) {\r\n /** @private */ readonly #mutationController = new MutationController(this, {\r\n target: null,\r\n config: { attributeFilter: [\"class\"] },\r\n callback: () => this.#updateToggle(),\r\n });\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (control instanceof M3eNavRailElement) {\r\n this.#mutationController.observe(control);\r\n }\r\n if (this.htmlFor && this.parentElement) {\r\n addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n super.attach(control);\r\n this.#updateToggle();\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n for (const target of this.#mutationController.targets) {\r\n this.#mutationController.unobserve(target);\r\n }\r\n\r\n if (this.parentElement) {\r\n if (this.htmlFor) {\r\n removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n this.parentElement.ariaExpanded = null;\r\n }\r\n\r\n super.detach();\r\n }\r\n\r\n /** @inheritdoc */\r\n override _onClick(): void {\r\n if (this.control instanceof M3eNavRailElement) {\r\n this.control.currentMode = this.control.currentMode === \"compact\" ? \"expanded\" : \"compact\";\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateToggle(): Promise<void> {\r\n if (!this.parentElement) return;\r\n\r\n const selected = this.control instanceof M3eNavRailElement && this.control.currentMode === \"expanded\";\r\n this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n if (this.parentElement.hasAttribute(\"toggle\")) {\r\n this.parentElement.toggleAttribute(\"selected\", selected);\r\n }\r\n\r\n if (this.parentElement instanceof LitElement) {\r\n // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n await (this.parentElement as LitElement).updateComplete;\r\n this.parentElement.ariaPressed = null;\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail-toggle\": M3eNavRailToggleElement;\r\n }\r\n}\r\n"],"names":["M3eNavRailElement","SuppressInitialAnimation","M3eNavBarElement","constructor","_M3eNavRailElement_focusKeyManager","set","RovingTabIndexManager","withHomeAndEnd","withWrap","_M3eNavRailElement_keyDownHandler","e","__classPrivateFieldGet","call","selectionManager","onSelectedItemsChange","updateActiveItem","activeItem","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","_updateItems","items","M3eInteractivityChecker","findInteractiveElements","added","setItems","active","find","x","hasAttribute","forEach","i","setCustomState","_updateOrientation","orientation","querySelectorAll","toggleAttribute","onKeyDown","registerStyleSheet","css","styles","DesignToken","scrollbar","thinWidth","color","unsafeCSS","motion","duration","medium2","easing","standard","elevation","level0","level1","__decorate","customElement","M3eNavRailToggleElement","HtmlFor","ActionElementBase","_M3eNavRailToggleElement_mutationController","MutationController","target","config","attributeFilter","callback","_M3eNavRailToggleElement_instances","_M3eNavRailToggleElement_updateToggle","attach","control","observe","htmlFor","parentElement","addAriaReferencedId","detach","targets","unobserve","removeAriaReferencedId","ariaExpanded","_onClick","currentMode","selected","LitElement","updateComplete","ariaPressed"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nav-rail.js","sources":["../../src/nav-rail/NavRailElement.ts","../../src/nav-rail/NavRailToggleElement.ts"],"sourcesContent":["import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport {\r\n customElement,\r\n DesignToken,\r\n registerStyleSheet,\r\n setCustomState,\r\n SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eInteractivityChecker, RovingTabIndexManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eNavBarElement, NavItemOrientation } from \"@m3e/web/nav-bar\";\r\n\r\n/**\r\n * A vertical bar, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-rail` component provides a vertical navigation rail for switching between views in\r\n * an application. Designed for larger devices, it supports compact and expanded modes, interactive\r\n * items, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail\r\n *\r\n * @attr mode - The mode in which items in the rail are presented.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state of an item changes.\r\n * @fires input - Dispatched when the selected state of an item changes.\r\n * @fires change - Dispatched when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-compact-width - Width of the nav rail in compact mode.\r\n * @cssprop --m3e-nav-rail-inline-padding - Inline padding for nav rail.\r\n * @cssprop --m3e-nav-rail-expanded-width - Width of the nav rail in expanded mode.\r\n * @cssprop --m3e-nav-rail-expanded-item-height - Height of nav items in expanded mode.\r\n * @cssprop --m3e-nav-rail-button-item-space - Space below icon buttons and FABs.\r\n * @cssprop --m3e-nav-rail-icon-button-inset - Inset for icon buttons.\r\n * @cssprop --m3e-nav-rail-expanded-inline-padding - Deprecated, use `--m3e-nav-rail-inline-padding`.\r\n * @cssprop --m3e-nav-rail-expanded-min-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-max-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Deprecated, use `--m3e-nav-rail-icon-button-inset`.\r\n */\r\n@customElement(\"m3e-nav-rail\")\r\nexport class M3eNavRailElement extends SuppressInitialAnimation(M3eNavBarElement) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-rail > m3e-icon-button,\r\n m3e-nav-rail > m3e-fab {\r\n margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem);\r\n }\r\n m3e-nav-rail > m3e-icon-button {\r\n margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem);\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: ${unsafeCSS(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n .base {\r\n contain: layout style;\r\n display: flex;\r\n width: inherit;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n box-sizing: border-box;\r\n padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem);\r\n padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem);\r\n padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem);\r\n }\r\n :host(:is(:state(--compact), :--compact)) {\r\n width: var(--m3e-nav-rail-compact-width, 6rem);\r\n }\r\n :host(:is(:state(--compact), :--compact)) .base {\r\n --_vertical-nav-item-width: var(--m3e-nav-rail-compact-width, 6rem);\r\n --_vertical-nav-item-margin-inline: calc(0px - var(--m3e-nav-rail-inline-padding, 1.25rem));\r\n --_vertical-nav-item-inset-start: calc(\r\n 50% - calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)) / 2\r\n );\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n width: var(--m3e-nav-rail-expanded-width, 13.75rem);\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem);\r\n --_nav-item-align-self: stretch;\r\n --_nav-item-justify-content: flex-start;\r\n }\r\n ::slotted(*) {\r\n flex: none;\r\n }\r\n ::slotted(m3e-fab) {\r\n --m3e-fab-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1};\r\n --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1};\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ #focusKeyManager = new RovingTabIndexManager().withHomeAndEnd().withWrap();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n this[selectionManager].onSelectedItemsChange(() => {\r\n this.#focusKeyManager.updateActiveItem(this[selectionManager].activeItem);\r\n });\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n this.#focusKeyManager.onKeyDown(e);\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateItems(): void {\r\n const items = M3eInteractivityChecker.findInteractiveElements(this, true);\r\n const { added } = this.#focusKeyManager.setItems(items);\r\n if (!this.#focusKeyManager.activeItem) {\r\n const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n if (active) {\r\n this.#focusKeyManager.updateActiveItem(active);\r\n }\r\n }\r\n\r\n this.items.forEach((x, i) => setCustomState(x, \"--first\", i === 0));\r\n\r\n super._updateItems();\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateOrientation(orientation: NavItemOrientation): void {\r\n super._updateOrientation(orientation);\r\n this.querySelectorAll(\"m3e-fab\").forEach((x) => x.toggleAttribute(\"extended\", orientation === \"horizontal\"));\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail\": M3eNavRailElement;\r\n }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor, MutationController } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eNavRailElement } from \"./NavRailElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail-toggle\r\n */\r\n@customElement(\"m3e-nav-rail-toggle\")\r\nexport class M3eNavRailToggleElement extends HtmlFor(ActionElementBase) {\r\n /** @private */ readonly #mutationController = new MutationController(this, {\r\n target: null,\r\n config: { attributeFilter: [\"class\"] },\r\n callback: () => this.#updateToggle(),\r\n });\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (control instanceof M3eNavRailElement) {\r\n this.#mutationController.observe(control);\r\n }\r\n if (this.htmlFor && this.parentElement) {\r\n addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n super.attach(control);\r\n this.#updateToggle();\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n for (const target of this.#mutationController.targets) {\r\n this.#mutationController.unobserve(target);\r\n }\r\n\r\n if (this.parentElement) {\r\n if (this.htmlFor) {\r\n removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n this.parentElement.ariaExpanded = null;\r\n }\r\n\r\n super.detach();\r\n }\r\n\r\n /** @inheritdoc */\r\n override _onClick(): void {\r\n if (this.control instanceof M3eNavRailElement) {\r\n this.control.currentMode = this.control.currentMode === \"compact\" ? \"expanded\" : \"compact\";\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateToggle(): Promise<void> {\r\n if (!this.parentElement) return;\r\n\r\n const selected = this.control instanceof M3eNavRailElement && this.control.currentMode === \"expanded\";\r\n this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n if (this.parentElement.hasAttribute(\"toggle\")) {\r\n this.parentElement.toggleAttribute(\"selected\", selected);\r\n }\r\n\r\n if (this.parentElement instanceof LitElement) {\r\n // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n await (this.parentElement as LitElement).updateComplete;\r\n this.parentElement.ariaPressed = null;\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail-toggle\": M3eNavRailToggleElement;\r\n }\r\n}\r\n"],"names":["M3eNavRailElement","SuppressInitialAnimation","M3eNavBarElement","constructor","_M3eNavRailElement_focusKeyManager","set","RovingTabIndexManager","withHomeAndEnd","withWrap","_M3eNavRailElement_keyDownHandler","e","__classPrivateFieldGet","call","selectionManager","onSelectedItemsChange","updateActiveItem","activeItem","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","_updateItems","items","M3eInteractivityChecker","findInteractiveElements","added","setItems","active","find","x","hasAttribute","forEach","i","setCustomState","_updateOrientation","orientation","querySelectorAll","toggleAttribute","onKeyDown","registerStyleSheet","css","styles","DesignToken","scrollbar","thinWidth","color","unsafeCSS","motion","duration","medium2","easing","standard","elevation","level0","level1","__decorate","customElement","M3eNavRailToggleElement","HtmlFor","ActionElementBase","_M3eNavRailToggleElement_mutationController","MutationController","target","config","attributeFilter","callback","_M3eNavRailToggleElement_instances","_M3eNavRailToggleElement_updateToggle","attach","control","observe","htmlFor","parentElement","addAriaReferencedId","detach","targets","unobserve","removeAriaReferencedId","ariaExpanded","_onClick","currentMode","selected","LitElement","updateComplete","ariaPressed"],"mappings":"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"}
|
package/dist/nav-rail.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{css as a,unsafeCSS as
|
|
6
|
+
import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{css as a,unsafeCSS as i,LitElement as n}from"lit";import{SuppressInitialAnimation as o,setCustomState as r,registerStyleSheet as l,DesignToken as s,customElement as c,HtmlFor as m,ActionElementBase as d,MutationController as h}from"@m3e/web/core";import{RovingTabIndexManager as v,selectionManager as p,M3eInteractivityChecker as f,addAriaReferencedId as b,removeAriaReferencedId as u}from"@m3e/web/core/a11y";import{M3eNavBarElement as w}from"@m3e/web/nav-bar";var g,E,x,k;let $=class extends(o(w)){constructor(){super(),g.add(this),E.set(this,(new v).withHomeAndEnd().withWrap()),x.set(this,t=>e(this,g,"m",k).call(this,t)),this[p].onSelectedItemsChange(()=>{e(this,E,"f").updateActiveItem(this[p].activeItem)})}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e(this,x,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,x,"f"))}_updateItems(){const t=f.findInteractiveElements(this,!0),{added:a}=e(this,E,"f").setItems(t);if(!e(this,E,"f").activeItem){const t=a.find(e=>!e.hasAttribute("disabled"));t&&e(this,E,"f").updateActiveItem(t)}this.items.forEach((e,t)=>r(e,"--first",0===t)),super._updateItems()}_updateOrientation(e){super._updateOrientation(e),this.querySelectorAll("m3e-fab").forEach(t=>t.toggleAttribute("extended","horizontal"===e))}};var y,_,I;E=new WeakMap,x=new WeakMap,g=new WeakSet,k=function(t){e(this,E,"f").onKeyDown(t)},l(a`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem); }`),$.styles=a`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${s.scrollbar.thinWidth}; scrollbar-color: ${s.scrollbar.color}; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${i(`width ${s.motion.duration.medium2} ${s.motion.easing.standard}`)}; } .base { contain: layout style; display: flex; width: inherit; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem); } :host(:is(:state(--compact), :--compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:is(:state(--compact), :--compact)) .base { --_vertical-nav-item-width: var(--m3e-nav-rail-compact-width, 6rem); --_vertical-nav-item-margin-inline: calc(0px - var(--m3e-nav-rail-inline-padding, 1.25rem)); --_vertical-nav-item-inset-start: calc( 50% - calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)) / 2 ); } :host(:not(:is(:state(--compact), :--compact))) { width: var(--m3e-nav-rail-expanded-width, 13.75rem); } :host(:not(:is(:state(--compact), :--compact))) { --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${s.elevation.level0}; --m3e-fab-disabled-container-elevation: ${s.elevation.level0}; --m3e-fab-focus-container-elevation: ${s.elevation.level0}; --m3e-fab-pressed-container-elevation: ${s.elevation.level0}; --m3e-fab-hover-container-elevation: ${s.elevation.level1}; --m3e-fab-lowered-container-elevation: ${s.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${s.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${s.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${s.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${s.elevation.level1}; } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } }`,$=t([c("m3e-nav-rail")],$);let A=class extends(m(d)){constructor(){super(...arguments),y.add(this),_.set(this,new h(this,{target:null,config:{attributeFilter:["class"]},callback:()=>e(this,y,"m",I).call(this)}))}attach(t){t instanceof $&&e(this,_,"f").observe(t),this.htmlFor&&this.parentElement&&b(this.parentElement,"aria-controls",this.htmlFor),super.attach(t),e(this,y,"m",I).call(this)}detach(){for(const t of e(this,_,"f").targets)e(this,_,"f").unobserve(t);this.parentElement&&(this.htmlFor&&u(this.parentElement,"aria-controls",this.htmlFor),this.parentElement.ariaExpanded=null),super.detach()}_onClick(){this.control instanceof $&&(this.control.currentMode="compact"===this.control.currentMode?"expanded":"compact")}};_=new WeakMap,y=new WeakSet,I=async function(){if(!this.parentElement)return;const e=this.control instanceof $&&"expanded"===this.control.currentMode;this.parentElement.ariaExpanded=`${e}`,this.parentElement.hasAttribute("toggle")&&this.parentElement.toggleAttribute("selected",e),this.parentElement instanceof n&&(await this.parentElement.updateComplete,this.parentElement.ariaPressed=null)},A=t([c("m3e-nav-rail-toggle")],A);export{$ as M3eNavRailElement,A as M3eNavRailToggleElement};
|
|
7
7
|
//# sourceMappingURL=nav-rail.min.js.map
|
package/dist/nav-rail.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-rail.min.js","sources":["../../src/nav-rail/NavRailElement.ts","../../src/nav-rail/NavRailToggleElement.ts"],"sourcesContent":["import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport {\r\n customElement,\r\n DesignToken,\r\n registerStyleSheet,\r\n setCustomState,\r\n SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eInteractivityChecker, RovingTabIndexManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eNavBarElement, NavItemOrientation } from \"@m3e/web/nav-bar\";\r\n\r\n/**\r\n * A vertical bar, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-rail` component provides a vertical navigation rail for switching between views in\r\n * an application. Designed for larger devices, it supports compact and expanded modes, interactive\r\n * items, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail\r\n *\r\n * @attr mode - The mode in which items in the rail are presented.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state of an item changes.\r\n * @fires input - Dispatched when the selected state of an item changes.\r\n * @fires change - Dispatched when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-compact-width - Width of the nav rail in compact mode.\r\n * @cssprop --m3e-nav-rail-inline-padding - Inline padding for nav rail.\r\n * @cssprop --m3e-nav-rail-expanded-width - Width of the nav rail in expanded mode.\r\n * @cssprop --m3e-nav-rail-expanded-item-height - Height of nav items in expanded mode.\r\n * @cssprop --m3e-nav-rail-button-item-space - Space below icon buttons and FABs.\r\n * @cssprop --m3e-nav-rail-icon-button-inset - Inset for icon buttons.\r\n * @cssprop --m3e-nav-rail-expanded-inline-padding - Deprecated, use `--m3e-nav-rail-inline-padding`.\r\n * @cssprop --m3e-nav-rail-expanded-min-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-max-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Deprecated, use `--m3e-nav-rail-icon-button-inset`.\r\n */\r\n@customElement(\"m3e-nav-rail\")\r\nexport class M3eNavRailElement extends SuppressInitialAnimation(M3eNavBarElement) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-rail > m3e-icon-button,\r\n m3e-nav-rail > m3e-fab {\r\n margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem);\r\n }\r\n m3e-nav-rail > m3e-icon-button {\r\n margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem);\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: ${unsafeCSS(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n .base {\r\n contain: layout style;\r\n display: flex;\r\n width: inherit;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n box-sizing: border-box;\r\n padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem);\r\n padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem);\r\n padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem);\r\n }\r\n :host(:is(:state(--compact), :--compact)) {\r\n width: var(--m3e-nav-rail-compact-width, 6rem);\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n width: var(--m3e-nav-rail-expanded-width, 13.75rem);\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem);\r\n --_nav-item-align-self: stretch;\r\n --_nav-item-justify-content: flex-start;\r\n }\r\n ::slotted(*) {\r\n flex: none;\r\n }\r\n ::slotted(m3e-fab) {\r\n --m3e-fab-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1};\r\n --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1};\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ #focusKeyManager = new RovingTabIndexManager().withHomeAndEnd().withWrap();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n this[selectionManager].onSelectedItemsChange(() => {\r\n this.#focusKeyManager.updateActiveItem(this[selectionManager].activeItem);\r\n });\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n this.#focusKeyManager.onKeyDown(e);\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateItems(): void {\r\n const items = M3eInteractivityChecker.findInteractiveElements(this, true);\r\n const { added } = this.#focusKeyManager.setItems(items);\r\n if (!this.#focusKeyManager.activeItem) {\r\n const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n if (active) {\r\n this.#focusKeyManager.updateActiveItem(active);\r\n }\r\n }\r\n\r\n this.items.forEach((x, i) => setCustomState(x, \"--first\", i === 0));\r\n\r\n super._updateItems();\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateOrientation(orientation: NavItemOrientation): void {\r\n super._updateOrientation(orientation);\r\n this.querySelectorAll(\"m3e-fab\").forEach((x) => x.toggleAttribute(\"extended\", orientation === \"horizontal\"));\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail\": M3eNavRailElement;\r\n }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor, MutationController } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eNavRailElement } from \"./NavRailElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail-toggle\r\n */\r\n@customElement(\"m3e-nav-rail-toggle\")\r\nexport class M3eNavRailToggleElement extends HtmlFor(ActionElementBase) {\r\n /** @private */ readonly #mutationController = new MutationController(this, {\r\n target: null,\r\n config: { attributeFilter: [\"class\"] },\r\n callback: () => this.#updateToggle(),\r\n });\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (control instanceof M3eNavRailElement) {\r\n this.#mutationController.observe(control);\r\n }\r\n if (this.htmlFor && this.parentElement) {\r\n addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n super.attach(control);\r\n this.#updateToggle();\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n for (const target of this.#mutationController.targets) {\r\n this.#mutationController.unobserve(target);\r\n }\r\n\r\n if (this.parentElement) {\r\n if (this.htmlFor) {\r\n removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n this.parentElement.ariaExpanded = null;\r\n }\r\n\r\n super.detach();\r\n }\r\n\r\n /** @inheritdoc */\r\n override _onClick(): void {\r\n if (this.control instanceof M3eNavRailElement) {\r\n this.control.currentMode = this.control.currentMode === \"compact\" ? \"expanded\" : \"compact\";\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateToggle(): Promise<void> {\r\n if (!this.parentElement) return;\r\n\r\n const selected = this.control instanceof M3eNavRailElement && this.control.currentMode === \"expanded\";\r\n this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n if (this.parentElement.hasAttribute(\"toggle\")) {\r\n this.parentElement.toggleAttribute(\"selected\", selected);\r\n }\r\n\r\n if (this.parentElement instanceof LitElement) {\r\n // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n await (this.parentElement as LitElement).updateComplete;\r\n this.parentElement.ariaPressed = null;\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail-toggle\": M3eNavRailToggleElement;\r\n }\r\n}\r\n"],"names":["M3eNavRailElement","SuppressInitialAnimation","M3eNavBarElement","constructor","super","_M3eNavRailElement_focusKeyManager","set","this","RovingTabIndexManager","withHomeAndEnd","withWrap","_M3eNavRailElement_keyDownHandler","e","__classPrivateFieldGet","call","selectionManager","onSelectedItemsChange","updateActiveItem","activeItem","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","_updateItems","items","M3eInteractivityChecker","findInteractiveElements","added","setItems","active","find","x","hasAttribute","forEach","i","setCustomState","_updateOrientation","orientation","querySelectorAll","toggleAttribute","onKeyDown","registerStyleSheet","css","styles","DesignToken","scrollbar","thinWidth","color","unsafeCSS","motion","duration","medium2","easing","standard","elevation","level0","level1","__decorate","customElement","M3eNavRailToggleElement","HtmlFor","ActionElementBase","_M3eNavRailToggleElement_mutationController","MutationController","target","config","attributeFilter","callback","_M3eNavRailToggleElement_instances","_M3eNavRailToggleElement_updateToggle","attach","control","observe","htmlFor","parentElement","addAriaReferencedId","detach","targets","unobserve","removeAriaReferencedId","ariaExpanded","_onClick","currentMode","async","selected","LitElement","updateComplete","ariaPressed"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nav-rail.min.js","sources":["../../src/nav-rail/NavRailElement.ts","../../src/nav-rail/NavRailToggleElement.ts"],"sourcesContent":["import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport {\r\n customElement,\r\n DesignToken,\r\n registerStyleSheet,\r\n setCustomState,\r\n SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eInteractivityChecker, RovingTabIndexManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eNavBarElement, NavItemOrientation } from \"@m3e/web/nav-bar\";\r\n\r\n/**\r\n * A vertical bar, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-rail` component provides a vertical navigation rail for switching between views in\r\n * an application. Designed for larger devices, it supports compact and expanded modes, interactive\r\n * items, and theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail\r\n *\r\n * @attr mode - The mode in which items in the rail are presented.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state of an item changes.\r\n * @fires input - Dispatched when the selected state of an item changes.\r\n * @fires change - Dispatched when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.\r\n * @cssprop --m3e-nav-rail-compact-width - Width of the nav rail in compact mode.\r\n * @cssprop --m3e-nav-rail-inline-padding - Inline padding for nav rail.\r\n * @cssprop --m3e-nav-rail-expanded-width - Width of the nav rail in expanded mode.\r\n * @cssprop --m3e-nav-rail-expanded-item-height - Height of nav items in expanded mode.\r\n * @cssprop --m3e-nav-rail-button-item-space - Space below icon buttons and FABs.\r\n * @cssprop --m3e-nav-rail-icon-button-inset - Inset for icon buttons.\r\n * @cssprop --m3e-nav-rail-expanded-inline-padding - Deprecated, use `--m3e-nav-rail-inline-padding`.\r\n * @cssprop --m3e-nav-rail-expanded-min-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-max-width - Deprecated, use `--m3e-nav-rail-expanded-width`.\r\n * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Deprecated, use `--m3e-nav-rail-icon-button-inset`.\r\n */\r\n@customElement(\"m3e-nav-rail\")\r\nexport class M3eNavRailElement extends SuppressInitialAnimation(M3eNavBarElement) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-rail > m3e-icon-button,\r\n m3e-nav-rail > m3e-fab {\r\n margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem);\r\n }\r\n m3e-nav-rail > m3e-icon-button {\r\n margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem);\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: ${unsafeCSS(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n .base {\r\n contain: layout style;\r\n display: flex;\r\n width: inherit;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n box-sizing: border-box;\r\n padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem);\r\n padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem);\r\n padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem);\r\n }\r\n :host(:is(:state(--compact), :--compact)) {\r\n width: var(--m3e-nav-rail-compact-width, 6rem);\r\n }\r\n :host(:is(:state(--compact), :--compact)) .base {\r\n --_vertical-nav-item-width: var(--m3e-nav-rail-compact-width, 6rem);\r\n --_vertical-nav-item-margin-inline: calc(0px - var(--m3e-nav-rail-inline-padding, 1.25rem));\r\n --_vertical-nav-item-inset-start: calc(\r\n 50% - calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)) / 2\r\n );\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n width: var(--m3e-nav-rail-expanded-width, 13.75rem);\r\n }\r\n :host(:not(:is(:state(--compact), :--compact))) {\r\n --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem);\r\n --_nav-item-align-self: stretch;\r\n --_nav-item-justify-content: flex-start;\r\n }\r\n ::slotted(*) {\r\n flex: none;\r\n }\r\n ::slotted(m3e-fab) {\r\n --m3e-fab-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1};\r\n --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0};\r\n --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1};\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ #focusKeyManager = new RovingTabIndexManager().withHomeAndEnd().withWrap();\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n this[selectionManager].onSelectedItemsChange(() => {\r\n this.#focusKeyManager.updateActiveItem(this[selectionManager].activeItem);\r\n });\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n this.#focusKeyManager.onKeyDown(e);\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateItems(): void {\r\n const items = M3eInteractivityChecker.findInteractiveElements(this, true);\r\n const { added } = this.#focusKeyManager.setItems(items);\r\n if (!this.#focusKeyManager.activeItem) {\r\n const active = added.find((x) => !x.hasAttribute(\"disabled\"));\r\n if (active) {\r\n this.#focusKeyManager.updateActiveItem(active);\r\n }\r\n }\r\n\r\n this.items.forEach((x, i) => setCustomState(x, \"--first\", i === 0));\r\n\r\n super._updateItems();\r\n }\r\n\r\n /** @inheritdoc @internal */\r\n protected override _updateOrientation(orientation: NavItemOrientation): void {\r\n super._updateOrientation(orientation);\r\n this.querySelectorAll(\"m3e-fab\").forEach((x) => x.toggleAttribute(\"extended\", orientation === \"horizontal\"));\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail\": M3eNavRailElement;\r\n }\r\n}\r\n","import { LitElement } from \"lit\";\r\n\r\nimport { ActionElementBase, customElement, HtmlFor, MutationController } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eNavRailElement } from \"./NavRailElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.\r\n *\r\n * @example\r\n * The following example illustrates a nav rail whose expanded state is automatically determined by the\r\n * current screen size. In addition, a toggle button is used to allow the user to manually toggle the\r\n * expanded state.\r\n *\r\n * ```html\r\n * <m3e-nav-rail id=\"nav-rail\" mode=\"auto\">\r\n * <m3e-icon-button toggle>\r\n * <m3e-icon name=\"menu\"></m3e-icon>\r\n * <m3e-icon slot=\"selected\" name=\"menu_open\"></m3e-icon>\r\n * <m3e-nav-rail-toggle for=\"nav-rail\"></m3e-nav-rail-toggle>\r\n * </m3e-icon-button>\r\n * <m3e-fab size=\"small\">\r\n * <m3e-icon name=\"edit\"></m3e-icon>\r\n * <span slot=\"label\">Extended</span>\r\n * </m3e-fab>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n * <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-rail>\r\n * ```\r\n *\r\n * @tag m3e-nav-rail-toggle\r\n */\r\n@customElement(\"m3e-nav-rail-toggle\")\r\nexport class M3eNavRailToggleElement extends HtmlFor(ActionElementBase) {\r\n /** @private */ readonly #mutationController = new MutationController(this, {\r\n target: null,\r\n config: { attributeFilter: [\"class\"] },\r\n callback: () => this.#updateToggle(),\r\n });\r\n\r\n /** @inheritdoc */\r\n override attach(control: HTMLElement): void {\r\n if (control instanceof M3eNavRailElement) {\r\n this.#mutationController.observe(control);\r\n }\r\n if (this.htmlFor && this.parentElement) {\r\n addAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n super.attach(control);\r\n this.#updateToggle();\r\n }\r\n\r\n /** @inheritdoc */\r\n override detach(): void {\r\n for (const target of this.#mutationController.targets) {\r\n this.#mutationController.unobserve(target);\r\n }\r\n\r\n if (this.parentElement) {\r\n if (this.htmlFor) {\r\n removeAriaReferencedId(this.parentElement, \"aria-controls\", this.htmlFor);\r\n }\r\n this.parentElement.ariaExpanded = null;\r\n }\r\n\r\n super.detach();\r\n }\r\n\r\n /** @inheritdoc */\r\n override _onClick(): void {\r\n if (this.control instanceof M3eNavRailElement) {\r\n this.control.currentMode = this.control.currentMode === \"compact\" ? \"expanded\" : \"compact\";\r\n }\r\n }\r\n\r\n /** @private */\r\n async #updateToggle(): Promise<void> {\r\n if (!this.parentElement) return;\r\n\r\n const selected = this.control instanceof M3eNavRailElement && this.control.currentMode === \"expanded\";\r\n this.parentElement.ariaExpanded = `${selected}`;\r\n\r\n if (this.parentElement.hasAttribute(\"toggle\")) {\r\n this.parentElement.toggleAttribute(\"selected\", selected);\r\n }\r\n\r\n if (this.parentElement instanceof LitElement) {\r\n // Wait for update and remove aria-pressed due to use of aria-expanded.\r\n await (this.parentElement as LitElement).updateComplete;\r\n this.parentElement.ariaPressed = null;\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-rail-toggle\": M3eNavRailToggleElement;\r\n }\r\n}\r\n"],"names":["M3eNavRailElement","SuppressInitialAnimation","M3eNavBarElement","constructor","super","_M3eNavRailElement_focusKeyManager","set","this","RovingTabIndexManager","withHomeAndEnd","withWrap","_M3eNavRailElement_keyDownHandler","e","__classPrivateFieldGet","call","selectionManager","onSelectedItemsChange","updateActiveItem","activeItem","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","_updateItems","items","M3eInteractivityChecker","findInteractiveElements","added","setItems","active","find","x","hasAttribute","forEach","i","setCustomState","_updateOrientation","orientation","querySelectorAll","toggleAttribute","onKeyDown","registerStyleSheet","css","styles","DesignToken","scrollbar","thinWidth","color","unsafeCSS","motion","duration","medium2","easing","standard","elevation","level0","level1","__decorate","customElement","M3eNavRailToggleElement","HtmlFor","ActionElementBase","_M3eNavRailToggleElement_mutationController","MutationController","target","config","attributeFilter","callback","_M3eNavRailToggleElement_instances","_M3eNavRailToggleElement_updateToggle","attach","control","observe","htmlFor","parentElement","addAriaReferencedId","detach","targets","unobserve","removeAriaReferencedId","ariaExpanded","_onClick","currentMode","async","selected","LitElement","updateComplete","ariaPressed"],"mappings":"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"}
|
package/dist/skeleton.js
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import { __classPrivateFieldGet, __decorate } from 'tslib';
|
|
6
|
+
import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
|
|
7
7
|
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
8
8
|
import { property } from 'lit/decorators.js';
|
|
9
9
|
import { ReconnectedCallback, waitForUpgrade, registerStyleSheet, DesignToken, customElement } from '@m3e/web/core';
|
|
10
10
|
import { positionAnchor } from '@m3e/web/core/anchoring';
|
|
11
11
|
|
|
12
|
-
var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape, _M3eSkeletonElement_updateLoading,
|
|
12
|
+
var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_animation, _M3eSkeletonElement_animationMode, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape, _M3eSkeletonElement_updateLoading, _M3eSkeletonElement_startMotion, _M3eSkeletonElement_stopMotion, _M3eSkeletonElement_syncMotionState;
|
|
13
13
|
var M3eSkeletonElement_1;
|
|
14
14
|
/**
|
|
15
15
|
* A visual placeholder that mimics the layout of content while it's still loading.
|
|
@@ -53,6 +53,10 @@ let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends
|
|
|
53
53
|
_M3eSkeletonElement_instances.add(this);
|
|
54
54
|
/** @private */
|
|
55
55
|
_M3eSkeletonElement_anchoringCleanupMap.set(this, new Map());
|
|
56
|
+
/** @private */
|
|
57
|
+
_M3eSkeletonElement_animation.set(this, null);
|
|
58
|
+
/** The animation mode `#animation` was created for, so mode changes recreate it. @private */
|
|
59
|
+
_M3eSkeletonElement_animationMode.set(this, null);
|
|
56
60
|
/**
|
|
57
61
|
* The shape of the skeleton.
|
|
58
62
|
* @default "auto"
|
|
@@ -73,7 +77,7 @@ let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends
|
|
|
73
77
|
disconnectedCallback() {
|
|
74
78
|
super.disconnectedCallback();
|
|
75
79
|
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
|
|
76
|
-
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m",
|
|
80
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_stopMotion).call(this);
|
|
77
81
|
}
|
|
78
82
|
/** @inheritdoc */
|
|
79
83
|
reconnectedCallback() {
|
|
@@ -92,22 +96,24 @@ let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends
|
|
|
92
96
|
render() {
|
|
93
97
|
return html`<slot ?inert="${!this.loaded}" @slotchange="${__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_handleSlotChange)}"></slot>`;
|
|
94
98
|
}
|
|
95
|
-
/** @private */
|
|
96
|
-
static
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
99
|
+
/** Whether motion is currently suppressed for accessibility or forced-colors reasons. @private */
|
|
100
|
+
static __motionDisabled() {
|
|
101
|
+
return M3eSkeletonElement_1.__reducedMediaQuery.matches || M3eSkeletonElement_1.__forcedColorsMediaQuery.matches;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Re-applies the current motion preference to every animating skeleton. Invoked when
|
|
105
|
+
* the reduced-motion or forced-colors preference changes.
|
|
106
|
+
* @private
|
|
107
|
+
*/
|
|
108
|
+
static __updateMotion() {
|
|
109
|
+
for (const skeleton of M3eSkeletonElement_1.__animating) {
|
|
110
|
+
__classPrivateFieldGet(skeleton, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_syncMotionState).call(skeleton);
|
|
107
111
|
}
|
|
108
112
|
}
|
|
109
113
|
};
|
|
110
114
|
_M3eSkeletonElement_anchoringCleanupMap = new WeakMap();
|
|
115
|
+
_M3eSkeletonElement_animation = new WeakMap();
|
|
116
|
+
_M3eSkeletonElement_animationMode = new WeakMap();
|
|
111
117
|
_M3eSkeletonElement_instances = new WeakSet();
|
|
112
118
|
_M3eSkeletonElement_handleSlotChange = /** @private */
|
|
113
119
|
async function _M3eSkeletonElement_handleSlotChange() {
|
|
@@ -160,68 +166,78 @@ async function _M3eSkeletonElement_createShape(element) {
|
|
|
160
166
|
this.shadowRoot?.appendChild(shape);
|
|
161
167
|
};
|
|
162
168
|
_M3eSkeletonElement_updateLoading = function _M3eSkeletonElement_updateLoading() {
|
|
163
|
-
if (!this.loaded && this.animation
|
|
164
|
-
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m",
|
|
169
|
+
if (this.isConnected && !this.loaded && (this.animation === "wave" || this.animation === "pulse")) {
|
|
170
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_startMotion).call(this);
|
|
165
171
|
} else {
|
|
166
|
-
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m",
|
|
172
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_stopMotion).call(this);
|
|
167
173
|
}
|
|
168
174
|
};
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
case "wave":
|
|
179
|
-
M3eSkeletonElement_1.__pulseLoading.delete(this);
|
|
180
|
-
if (!M3eSkeletonElement_1.__waveLoading.has(this)) {
|
|
181
|
-
M3eSkeletonElement_1.__waveLoading.add(this);
|
|
182
|
-
M3eSkeletonElement_1.__updateAnimations();
|
|
183
|
-
}
|
|
184
|
-
break;
|
|
175
|
+
_M3eSkeletonElement_startMotion = function _M3eSkeletonElement_startMotion() {
|
|
176
|
+
if (__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f")) {
|
|
177
|
+
if (__classPrivateFieldGet(this, _M3eSkeletonElement_animationMode, "f") === this.animation) {
|
|
178
|
+
// Already running for the current mode; nothing to do but re-sync motion state.
|
|
179
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_syncMotionState).call(this);
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
// Effect mode changed (wave <-> pulse); tear down and recreate below.
|
|
183
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_stopMotion).call(this);
|
|
185
184
|
}
|
|
185
|
+
M3eSkeletonElement_1.__motionOrigin ??= document.timeline.currentTime ?? 0;
|
|
186
|
+
const animation = this.animation === "pulse" ? this.animate([{
|
|
187
|
+
["--_m3e-skeleton-pulse-norm"]: 0
|
|
188
|
+
}, {
|
|
189
|
+
["--_m3e-skeleton-pulse-norm"]: 1
|
|
190
|
+
}, {
|
|
191
|
+
["--_m3e-skeleton-pulse-norm"]: 0
|
|
192
|
+
}], {
|
|
193
|
+
duration: 1200,
|
|
194
|
+
iterations: Infinity,
|
|
195
|
+
easing: "ease-in-out"
|
|
196
|
+
}) : this.animate([{
|
|
197
|
+
["--_m3e-skeleton-wave-pct"]: 0
|
|
198
|
+
}, {
|
|
199
|
+
["--_m3e-skeleton-wave-pct"]: 1
|
|
200
|
+
}], {
|
|
201
|
+
duration: 2100,
|
|
202
|
+
iterations: Infinity,
|
|
203
|
+
easing: "linear"
|
|
204
|
+
});
|
|
205
|
+
animation.startTime = M3eSkeletonElement_1.__motionOrigin;
|
|
206
|
+
__classPrivateFieldSet(this, _M3eSkeletonElement_animation, animation, "f");
|
|
207
|
+
__classPrivateFieldSet(this, _M3eSkeletonElement_animationMode, this.animation, "f");
|
|
208
|
+
M3eSkeletonElement_1.__animating.add(this);
|
|
209
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_syncMotionState).call(this);
|
|
210
|
+
};
|
|
211
|
+
_M3eSkeletonElement_stopMotion = function _M3eSkeletonElement_stopMotion() {
|
|
212
|
+
if (!__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f")) {
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f").cancel();
|
|
216
|
+
__classPrivateFieldSet(this, _M3eSkeletonElement_animation, null, "f");
|
|
217
|
+
__classPrivateFieldSet(this, _M3eSkeletonElement_animationMode, null, "f");
|
|
218
|
+
M3eSkeletonElement_1.__animating.delete(this);
|
|
186
219
|
};
|
|
187
|
-
|
|
188
|
-
if (
|
|
189
|
-
|
|
220
|
+
_M3eSkeletonElement_syncMotionState = function _M3eSkeletonElement_syncMotionState() {
|
|
221
|
+
if (!__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f")) {
|
|
222
|
+
return;
|
|
223
|
+
}
|
|
224
|
+
if (M3eSkeletonElement_1.__motionDisabled()) {
|
|
225
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f").pause();
|
|
226
|
+
} else {
|
|
227
|
+
__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f").play();
|
|
190
228
|
}
|
|
191
229
|
};
|
|
192
|
-
/** @private */
|
|
193
|
-
M3eSkeletonElement.
|
|
194
|
-
/** @private */
|
|
195
|
-
M3eSkeletonElement.
|
|
230
|
+
/** Skeletons with a live per-instance animation, so preference changes re-sync them all. @private */
|
|
231
|
+
M3eSkeletonElement.__animating = new Set();
|
|
232
|
+
/** Shared timeline origin so every skeleton's wave/pulse stays in phase. @private */
|
|
233
|
+
M3eSkeletonElement.__motionOrigin = null;
|
|
196
234
|
(() => {
|
|
197
235
|
if (typeof window !== "undefined") {
|
|
198
236
|
registerStyleSheet(css`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`);
|
|
199
|
-
M3eSkeletonElement_1.__waveAnimation = document.documentElement.animate([{
|
|
200
|
-
["--_m3e-skeleton-wave-pct"]: 0
|
|
201
|
-
}, {
|
|
202
|
-
["--_m3e-skeleton-wave-pct"]: 1
|
|
203
|
-
}], {
|
|
204
|
-
duration: 2100,
|
|
205
|
-
iterations: Infinity,
|
|
206
|
-
easing: "linear"
|
|
207
|
-
});
|
|
208
|
-
M3eSkeletonElement_1.__pulseAnimation = document.documentElement.animate([{
|
|
209
|
-
["--_m3e-skeleton-pulse-norm"]: 0
|
|
210
|
-
}, {
|
|
211
|
-
["--_m3e-skeleton-pulse-norm"]: 1
|
|
212
|
-
}, {
|
|
213
|
-
["--_m3e-skeleton-pulse-norm"]: 0
|
|
214
|
-
}], {
|
|
215
|
-
duration: 1200,
|
|
216
|
-
iterations: Infinity,
|
|
217
|
-
easing: "ease-in-out"
|
|
218
|
-
});
|
|
219
|
-
M3eSkeletonElement_1.__waveAnimation.pause();
|
|
220
|
-
M3eSkeletonElement_1.__pulseAnimation.pause();
|
|
221
237
|
M3eSkeletonElement_1.__reducedMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
222
238
|
M3eSkeletonElement_1.__forcedColorsMediaQuery = window.matchMedia("(forced-colors: active)");
|
|
223
|
-
M3eSkeletonElement_1.__reducedMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.
|
|
224
|
-
M3eSkeletonElement_1.__forcedColorsMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.
|
|
239
|
+
M3eSkeletonElement_1.__reducedMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateMotion());
|
|
240
|
+
M3eSkeletonElement_1.__forcedColorsMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateMotion());
|
|
225
241
|
}
|
|
226
242
|
})();
|
|
227
243
|
/** The styles of the element. */
|
package/dist/skeleton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","sources":["../../src/skeleton/SkeletonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, registerStyleSheet, waitForUpgrade } from \"@m3e/web/core\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { SkeletonShape } from \"./SkeletonShape\";\r\nimport { SkeletonAnimation } from \"./SkeletonAnimation\";\r\n\r\n/**\r\n * A visual placeholder that mimics the layout of content while it's still loading.\r\n * @description\r\n * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and\r\n * motion-based animations that communicate loading state while preserving layout stability. It mimics\r\n * the layout of content while it's still loading, ensuring a smooth user experience during data fetching\r\n * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and\r\n * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the\r\n * content is loaded, the skeleton fades out with a smooth transition.\r\n *\r\n * @example\r\n * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.\r\n * ```html\r\n * <m3e-skeleton>\r\n * <m3e-card></m3e-card>\r\n * </m3e-skeleton>\r\n * ```\r\n *\r\n * @tag m3e-skeleton\r\n *\r\n * @attr animation - The animation effect of the skeleton.\r\n * @attr shape - The shape of the skeleton.\r\n * @attr loaded - Whether the content of the skeleton has been loaded.\r\n *\r\n * @slot - Renders the content to be mimicked by the skeleton.\r\n *\r\n * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.\r\n * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.\r\n * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.\r\n * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.\r\n * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.\r\n * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.\r\n * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.\r\n */\r\n@customElement(\"m3e-skeleton\")\r\nexport class M3eSkeletonElement extends ReconnectedCallback(LitElement) {\r\n /** @private */ private static __pulseLoading = new Set<M3eSkeletonElement>();\r\n /** @private */ private static __pulseAnimation: Animation;\r\n\r\n /** @private */ private static __waveLoading = new Set<M3eSkeletonElement>();\r\n /** @private */ private static __waveAnimation: Animation;\r\n\r\n /** @private */ private static __reducedMediaQuery: MediaQueryList;\r\n /** @private */ private static __forcedColorsMediaQuery: MediaQueryList;\r\n\r\n static {\r\n if (typeof window !== \"undefined\") {\r\n registerStyleSheet(css`\r\n @property --_m3e-skeleton-wave-pct {\r\n syntax: \"<number>\";\r\n inherits: true;\r\n initial-value: 0;\r\n }\r\n @property --_m3e-skeleton-pulse-norm {\r\n syntax: \"<number>\";\r\n inherits: true;\r\n initial-value: 0;\r\n }\r\n :root {\r\n --_m3e-skeleton-wave-span: 40vw;\r\n --_m3e-skeleton-pulse-min: 0.06;\r\n }\r\n `);\r\n\r\n M3eSkeletonElement.__waveAnimation = document.documentElement.animate(\r\n [{ [\"--_m3e-skeleton-wave-pct\"]: 0 }, { [\"--_m3e-skeleton-wave-pct\"]: 1 }],\r\n {\r\n duration: 2100,\r\n iterations: Infinity,\r\n easing: \"linear\",\r\n },\r\n );\r\n\r\n M3eSkeletonElement.__pulseAnimation = document.documentElement.animate(\r\n [\r\n { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n { [\"--_m3e-skeleton-pulse-norm\"]: 1 },\r\n { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n ],\r\n {\r\n duration: 1200,\r\n iterations: Infinity,\r\n easing: \"ease-in-out\",\r\n },\r\n );\r\n\r\n M3eSkeletonElement.__waveAnimation.pause();\r\n M3eSkeletonElement.__pulseAnimation.pause();\r\n\r\n M3eSkeletonElement.__reducedMediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n M3eSkeletonElement.__forcedColorsMediaQuery = window.matchMedia(\"(forced-colors: active)\");\r\n\r\n M3eSkeletonElement.__reducedMediaQuery.addEventListener(\"change\", () => M3eSkeletonElement.__updateAnimations());\r\n M3eSkeletonElement.__forcedColorsMediaQuery.addEventListener(\"change\", () =>\r\n M3eSkeletonElement.__updateAnimations(),\r\n );\r\n }\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n .shape {\r\n position: absolute;\r\n overflow: hidden;\r\n pointer-events: none;\r\n opacity: 1;\r\n background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface});\r\n }\r\n .shape::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: color-mix(\r\n in srgb,\r\n var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%),\r\n transparent\r\n );\r\n }\r\n :host(:not([loaded])) {\r\n contain: layout style paint;\r\n }\r\n :host(:not([loaded])) slot {\r\n visibility: hidden;\r\n }\r\n :host([loaded]) .shape {\r\n opacity: 0;\r\n transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host([shape=\"rounded\"]) .shape {\r\n border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large}));\r\n }\r\n :host([shape=\"circular\"]) .shape {\r\n border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full}));\r\n }\r\n :host([shape=\"square\"]) .shape {\r\n border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px));\r\n }\r\n :host([animation=\"pulse\"]:not([loaded])) .shape::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: calc(\r\n var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) *\r\n var(--_m3e-skeleton-pulse-norm)\r\n );\r\n background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim});\r\n }\r\n :host([animation=\"wave\"]:not([loaded])) .shape::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: linear-gradient(\r\n 90deg,\r\n transparent 0%,\r\n transparent 35%,\r\n var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%,\r\n transparent 65%,\r\n transparent 100%\r\n );\r\n background-attachment: fixed;\r\n background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%;\r\n background-position-x: calc(\r\n var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span)\r\n );\r\n\r\n opacity: var(--m3e-skeleton-accent-opacity, 0.06);\r\n }\r\n @media (forced-colors: active) {\r\n :host([loaded]) .shape {\r\n transition: none;\r\n }\r\n .shape::after {\r\n display: none;\r\n }\r\n .shape {\r\n background-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host([loaded]) .shape {\r\n transition: none;\r\n }\r\n .shape::after {\r\n display: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ readonly #anchoringCleanupMap = new Map<HTMLElement, () => void>();\r\n\r\n /**\r\n * The shape of the skeleton.\r\n * @default \"auto\"\r\n */\r\n @property({ reflect: true }) shape: SkeletonShape = \"auto\";\r\n\r\n /**\r\n * The animation effect of the skeleton.\r\n * @default \"wave\"\r\n */\r\n @property({ reflect: true }) animation: SkeletonAnimation = \"wave\";\r\n\r\n /**\r\n * Whether the content of the skeleton has been loaded.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) loaded = false;\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#clearShapes();\r\n this.#unregisterLoading();\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#createShapes();\r\n this.#updateLoading();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override willUpdate(_changedProperties: PropertyValues<this>): void {\r\n super.willUpdate(_changedProperties);\r\n\r\n if (_changedProperties.has(\"loaded\") || _changedProperties.has(\"animation\")) {\r\n this.#updateLoading();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<slot ?inert=\"${!this.loaded}\" @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n }\r\n\r\n /** @private */\r\n async #handleSlotChange(): Promise<void> {\r\n this.#createShapes();\r\n }\r\n\r\n /** @private */\r\n #clearShapes(): void {\r\n for (const item of this.#anchoringCleanupMap) {\r\n item[0].remove();\r\n item[1]();\r\n }\r\n this.#anchoringCleanupMap.clear();\r\n }\r\n\r\n /** @private */\r\n async #createShapes(): Promise<void> {\r\n this.#clearShapes();\r\n\r\n const slot = this.shadowRoot?.querySelector(\"slot\");\r\n if (!slot) return;\r\n\r\n for (const element of slot.assignedElements({ flatten: true }).filter((x) => x instanceof HTMLElement)) {\r\n await this.#createShape(element);\r\n }\r\n }\r\n\r\n /** @private */\r\n async #createShape(element: HTMLElement): Promise<void> {\r\n await waitForUpgrade(element);\r\n\r\n const shape = document.createElement(\"div\");\r\n shape.classList.add(\"shape\");\r\n\r\n if (this.shape === \"auto\") {\r\n let borderRadius = getComputedStyle(element).borderRadius;\r\n if (!borderRadius || borderRadius === \"0px\") {\r\n const firstElement = element.shadowRoot?.firstElementChild;\r\n if (firstElement && !firstElement.nextElementSibling) {\r\n borderRadius = getComputedStyle(firstElement).borderRadius;\r\n }\r\n }\r\n\r\n if (borderRadius && borderRadius !== \"0px\") {\r\n shape.style.borderRadius = borderRadius;\r\n }\r\n }\r\n\r\n const anchoringCleanup = await positionAnchor(\r\n shape,\r\n element,\r\n {\r\n position: \"bottom\",\r\n },\r\n (x, y) => {\r\n shape.style.left = `${x}px`;\r\n shape.style.top = `${y - element.clientHeight}px`;\r\n shape.style.width = `${element.clientWidth}px`;\r\n shape.style.height = `${element.clientHeight}px`;\r\n },\r\n );\r\n\r\n this.#anchoringCleanupMap.set(shape, anchoringCleanup);\r\n this.shadowRoot?.appendChild(shape);\r\n }\r\n\r\n /** @private */\r\n #updateLoading(): void {\r\n if (!this.loaded && this.animation !== \"none\") {\r\n this.#registerLoading();\r\n } else {\r\n this.#unregisterLoading();\r\n }\r\n }\r\n\r\n /** @private */\r\n #registerLoading(): void {\r\n switch (this.animation) {\r\n case \"pulse\":\r\n M3eSkeletonElement.__waveLoading.delete(this);\r\n if (!M3eSkeletonElement.__pulseLoading.has(this)) {\r\n M3eSkeletonElement.__pulseLoading.add(this);\r\n M3eSkeletonElement.__updateAnimations();\r\n }\r\n break;\r\n\r\n case \"wave\":\r\n M3eSkeletonElement.__pulseLoading.delete(this);\r\n if (!M3eSkeletonElement.__waveLoading.has(this)) {\r\n M3eSkeletonElement.__waveLoading.add(this);\r\n M3eSkeletonElement.__updateAnimations();\r\n }\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #unregisterLoading(): void {\r\n if (M3eSkeletonElement.__pulseLoading.delete(this) || M3eSkeletonElement.__waveLoading.delete(this)) {\r\n M3eSkeletonElement.__updateAnimations();\r\n }\r\n }\r\n\r\n /** @private */\r\n static __updateAnimations(): void {\r\n const pause = M3eSkeletonElement.__forcedColorsMediaQuery.matches || M3eSkeletonElement.__reducedMediaQuery.matches;\r\n if (M3eSkeletonElement.__pulseLoading.size === 0 || pause) {\r\n M3eSkeletonElement.__pulseAnimation.pause();\r\n } else if (\r\n M3eSkeletonElement.__pulseLoading.size > 0 &&\r\n M3eSkeletonElement.__pulseAnimation.playState === \"paused\"\r\n ) {\r\n M3eSkeletonElement.__pulseAnimation.play();\r\n }\r\n\r\n if (M3eSkeletonElement.__waveLoading.size === 0 || pause) {\r\n M3eSkeletonElement.__waveAnimation.pause();\r\n } else if (M3eSkeletonElement.__waveLoading.size > 0 && M3eSkeletonElement.__waveAnimation.playState === \"paused\") {\r\n M3eSkeletonElement.__waveAnimation.play();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-skeleton\": M3eSkeletonElement;\r\n }\r\n}\r\n"],"names":["M3eSkeletonElement","ReconnectedCallback","LitElement","constructor","_M3eSkeletonElement_anchoringCleanupMap","set","Map","shape","animation","loaded","disconnectedCallback","__classPrivateFieldGet","_M3eSkeletonElement_instances","_M3eSkeletonElement_clearShapes","call","_M3eSkeletonElement_unregisterLoading","reconnectedCallback","_M3eSkeletonElement_createShapes","_M3eSkeletonElement_updateLoading","willUpdate","_changedProperties","has","render","html","_M3eSkeletonElement_handleSlotChange","__updateAnimations","pause","M3eSkeletonElement_1","__forcedColorsMediaQuery","matches","__reducedMediaQuery","__pulseLoading","size","__pulseAnimation","playState","play","__waveLoading","__waveAnimation","item","remove","clear","slot","shadowRoot","querySelector","element","assignedElements","flatten","filter","x","HTMLElement","_M3eSkeletonElement_createShape","waitForUpgrade","document","createElement","classList","add","borderRadius","getComputedStyle","firstElement","firstElementChild","nextElementSibling","style","anchoringCleanup","positionAnchor","position","y","left","top","clientHeight","width","clientWidth","height","appendChild","_M3eSkeletonElement_registerLoading","delete","Set","window","registerStyleSheet","css","documentElement","animate","duration","iterations","Infinity","easing","matchMedia","addEventListener","styles","DesignToken","color","surface","onSurface","unsafeCSS","motion","short3","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"skeleton.js","sources":["../../src/skeleton/SkeletonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, registerStyleSheet, waitForUpgrade } from \"@m3e/web/core\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { SkeletonShape } from \"./SkeletonShape\";\r\nimport { SkeletonAnimation } from \"./SkeletonAnimation\";\r\n\r\n/**\r\n * A visual placeholder that mimics the layout of content while it's still loading.\r\n * @description\r\n * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and\r\n * motion-based animations that communicate loading state while preserving layout stability. It mimics\r\n * the layout of content while it's still loading, ensuring a smooth user experience during data fetching\r\n * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and\r\n * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the\r\n * content is loaded, the skeleton fades out with a smooth transition.\r\n *\r\n * @example\r\n * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.\r\n * ```html\r\n * <m3e-skeleton>\r\n * <m3e-card></m3e-card>\r\n * </m3e-skeleton>\r\n * ```\r\n *\r\n * @tag m3e-skeleton\r\n *\r\n * @attr animation - The animation effect of the skeleton.\r\n * @attr shape - The shape of the skeleton.\r\n * @attr loaded - Whether the content of the skeleton has been loaded.\r\n *\r\n * @slot - Renders the content to be mimicked by the skeleton.\r\n *\r\n * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.\r\n * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.\r\n * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.\r\n * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.\r\n * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.\r\n * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.\r\n * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.\r\n */\r\n@customElement(\"m3e-skeleton\")\r\nexport class M3eSkeletonElement extends ReconnectedCallback(LitElement) {\r\n /** Skeletons with a live per-instance animation, so preference changes re-sync them all. @private */\r\n private static __animating = new Set<M3eSkeletonElement>();\r\n\r\n /** Shared timeline origin so every skeleton's wave/pulse stays in phase. @private */\r\n private static __motionOrigin: number | null = null;\r\n\r\n /** @private */ private static __reducedMediaQuery: MediaQueryList;\r\n /** @private */ private static __forcedColorsMediaQuery: MediaQueryList;\r\n\r\n static {\r\n if (typeof window !== \"undefined\") {\r\n registerStyleSheet(css`\r\n @property --_m3e-skeleton-wave-pct {\r\n syntax: \"<number>\";\r\n inherits: true;\r\n initial-value: 0;\r\n }\r\n @property --_m3e-skeleton-pulse-norm {\r\n syntax: \"<number>\";\r\n inherits: true;\r\n initial-value: 0;\r\n }\r\n :root {\r\n --_m3e-skeleton-wave-span: 40vw;\r\n --_m3e-skeleton-pulse-min: 0.06;\r\n }\r\n `);\r\n\r\n M3eSkeletonElement.__reducedMediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n M3eSkeletonElement.__forcedColorsMediaQuery = window.matchMedia(\"(forced-colors: active)\");\r\n M3eSkeletonElement.__reducedMediaQuery.addEventListener(\"change\", () => M3eSkeletonElement.__updateMotion());\r\n M3eSkeletonElement.__forcedColorsMediaQuery.addEventListener(\"change\", () => M3eSkeletonElement.__updateMotion());\r\n }\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n .shape {\r\n position: absolute;\r\n overflow: hidden;\r\n pointer-events: none;\r\n opacity: 1;\r\n background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface});\r\n }\r\n .shape::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: color-mix(\r\n in srgb,\r\n var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%),\r\n transparent\r\n );\r\n }\r\n :host(:not([loaded])) {\r\n contain: layout style paint;\r\n }\r\n :host(:not([loaded])) slot {\r\n visibility: hidden;\r\n }\r\n :host([loaded]) .shape {\r\n opacity: 0;\r\n transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host([shape=\"rounded\"]) .shape {\r\n border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large}));\r\n }\r\n :host([shape=\"circular\"]) .shape {\r\n border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full}));\r\n }\r\n :host([shape=\"square\"]) .shape {\r\n border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px));\r\n }\r\n :host([animation=\"pulse\"]:not([loaded])) .shape::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: calc(\r\n var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) *\r\n var(--_m3e-skeleton-pulse-norm)\r\n );\r\n background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim});\r\n }\r\n :host([animation=\"wave\"]:not([loaded])) .shape::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: linear-gradient(\r\n 90deg,\r\n transparent 0%,\r\n transparent 35%,\r\n var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%,\r\n transparent 65%,\r\n transparent 100%\r\n );\r\n background-attachment: fixed;\r\n background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%;\r\n background-position-x: calc(\r\n var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span)\r\n );\r\n\r\n opacity: var(--m3e-skeleton-accent-opacity, 0.06);\r\n }\r\n @media (forced-colors: active) {\r\n :host([loaded]) .shape {\r\n transition: none;\r\n }\r\n .shape::after {\r\n display: none;\r\n }\r\n .shape {\r\n background-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host([loaded]) .shape {\r\n transition: none;\r\n }\r\n .shape::after {\r\n display: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ readonly #anchoringCleanupMap = new Map<HTMLElement, () => void>();\r\n\r\n /** @private */ #animation: Animation | null = null;\r\n\r\n /** The animation mode `#animation` was created for, so mode changes recreate it. @private */\r\n #animationMode: SkeletonAnimation | null = null;\r\n\r\n /**\r\n * The shape of the skeleton.\r\n * @default \"auto\"\r\n */\r\n @property({ reflect: true }) shape: SkeletonShape = \"auto\";\r\n\r\n /**\r\n * The animation effect of the skeleton.\r\n * @default \"wave\"\r\n */\r\n @property({ reflect: true }) animation: SkeletonAnimation = \"wave\";\r\n\r\n /**\r\n * Whether the content of the skeleton has been loaded.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) loaded = false;\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#clearShapes();\r\n this.#stopMotion();\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#createShapes();\r\n this.#updateLoading();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override willUpdate(_changedProperties: PropertyValues<this>): void {\r\n super.willUpdate(_changedProperties);\r\n\r\n if (_changedProperties.has(\"loaded\") || _changedProperties.has(\"animation\")) {\r\n this.#updateLoading();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<slot ?inert=\"${!this.loaded}\" @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n }\r\n\r\n /** @private */\r\n async #handleSlotChange(): Promise<void> {\r\n this.#createShapes();\r\n }\r\n\r\n /** @private */\r\n #clearShapes(): void {\r\n for (const item of this.#anchoringCleanupMap) {\r\n item[0].remove();\r\n item[1]();\r\n }\r\n this.#anchoringCleanupMap.clear();\r\n }\r\n\r\n /** @private */\r\n async #createShapes(): Promise<void> {\r\n this.#clearShapes();\r\n\r\n const slot = this.shadowRoot?.querySelector(\"slot\");\r\n if (!slot) return;\r\n\r\n for (const element of slot.assignedElements({ flatten: true }).filter((x) => x instanceof HTMLElement)) {\r\n await this.#createShape(element);\r\n }\r\n }\r\n\r\n /** @private */\r\n async #createShape(element: HTMLElement): Promise<void> {\r\n await waitForUpgrade(element);\r\n\r\n const shape = document.createElement(\"div\");\r\n shape.classList.add(\"shape\");\r\n\r\n if (this.shape === \"auto\") {\r\n let borderRadius = getComputedStyle(element).borderRadius;\r\n if (!borderRadius || borderRadius === \"0px\") {\r\n const firstElement = element.shadowRoot?.firstElementChild;\r\n if (firstElement && !firstElement.nextElementSibling) {\r\n borderRadius = getComputedStyle(firstElement).borderRadius;\r\n }\r\n }\r\n\r\n if (borderRadius && borderRadius !== \"0px\") {\r\n shape.style.borderRadius = borderRadius;\r\n }\r\n }\r\n\r\n const anchoringCleanup = await positionAnchor(\r\n shape,\r\n element,\r\n {\r\n position: \"bottom\",\r\n },\r\n (x, y) => {\r\n shape.style.left = `${x}px`;\r\n shape.style.top = `${y - element.clientHeight}px`;\r\n shape.style.width = `${element.clientWidth}px`;\r\n shape.style.height = `${element.clientHeight}px`;\r\n },\r\n );\r\n\r\n this.#anchoringCleanupMap.set(shape, anchoringCleanup);\r\n this.shadowRoot?.appendChild(shape);\r\n }\r\n\r\n /**\r\n * Starts or stops this skeleton's own wave/pulse animation to reflect its current\r\n * loaded/animation/connected state, then aligns its play/pause with the active\r\n * accessibility and forced-colors preferences.\r\n * @private\r\n */\r\n #updateLoading(): void {\r\n if (this.isConnected && !this.loaded && (this.animation === \"wave\" || this.animation === \"pulse\")) {\r\n this.#startMotion();\r\n } else {\r\n this.#stopMotion();\r\n }\r\n }\r\n\r\n /**\r\n * Starts the wave/pulse animation on this skeleton itself rather than on\r\n * `document.documentElement`. The `--_m3e-skeleton-*` properties are registered\r\n * `inherits: true`, so animating them on the document root recalculates style for the\r\n * whole document every frame; scoping to the instance limits that to its own subtree.\r\n * Aligned to a shared timeline origin so multiple skeletons animate in phase, and\r\n * re-created when the effect mode (wave vs pulse) changes.\r\n * @private\r\n */\r\n #startMotion(): void {\r\n if (this.#animation) {\r\n if (this.#animationMode === this.animation) {\r\n // Already running for the current mode; nothing to do but re-sync motion state.\r\n this.#syncMotionState();\r\n return;\r\n }\r\n // Effect mode changed (wave <-> pulse); tear down and recreate below.\r\n this.#stopMotion();\r\n }\r\n\r\n M3eSkeletonElement.__motionOrigin ??= (document.timeline.currentTime as number | null) ?? 0;\r\n\r\n const animation =\r\n this.animation === \"pulse\"\r\n ? this.animate(\r\n [\r\n { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n { [\"--_m3e-skeleton-pulse-norm\"]: 1 },\r\n { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n ],\r\n {\r\n duration: 1200,\r\n iterations: Infinity,\r\n easing: \"ease-in-out\",\r\n },\r\n )\r\n : this.animate([{ [\"--_m3e-skeleton-wave-pct\"]: 0 }, { [\"--_m3e-skeleton-wave-pct\"]: 1 }], {\r\n duration: 2100,\r\n iterations: Infinity,\r\n easing: \"linear\",\r\n });\r\n\r\n animation.startTime = M3eSkeletonElement.__motionOrigin;\r\n\r\n this.#animation = animation;\r\n this.#animationMode = this.animation;\r\n M3eSkeletonElement.__animating.add(this);\r\n this.#syncMotionState();\r\n }\r\n\r\n /** @private */\r\n #stopMotion(): void {\r\n if (!this.#animation) {\r\n return;\r\n }\r\n this.#animation.cancel();\r\n this.#animation = null;\r\n this.#animationMode = null;\r\n M3eSkeletonElement.__animating.delete(this);\r\n }\r\n\r\n /** Whether motion is currently suppressed for accessibility or forced-colors reasons. @private */\r\n private static __motionDisabled(): boolean {\r\n return M3eSkeletonElement.__reducedMediaQuery.matches || M3eSkeletonElement.__forcedColorsMediaQuery.matches;\r\n }\r\n\r\n /**\r\n * Re-applies the current motion preference to every animating skeleton. Invoked when\r\n * the reduced-motion or forced-colors preference changes.\r\n * @private\r\n */\r\n private static __updateMotion(): void {\r\n for (const skeleton of M3eSkeletonElement.__animating) {\r\n skeleton.#syncMotionState();\r\n }\r\n }\r\n\r\n /**\r\n * Aligns this skeleton's animation play state with the current reduced-motion and\r\n * forced-colors preferences.\r\n * @private\r\n */\r\n #syncMotionState(): void {\r\n if (!this.#animation) {\r\n return;\r\n }\r\n if (M3eSkeletonElement.__motionDisabled()) {\r\n this.#animation.pause();\r\n } else {\r\n this.#animation.play();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-skeleton\": M3eSkeletonElement;\r\n }\r\n}\r\n"],"names":["M3eSkeletonElement","ReconnectedCallback","LitElement","constructor","_M3eSkeletonElement_anchoringCleanupMap","set","Map","_M3eSkeletonElement_animation","_M3eSkeletonElement_animationMode","shape","animation","loaded","disconnectedCallback","__classPrivateFieldGet","_M3eSkeletonElement_instances","_M3eSkeletonElement_clearShapes","call","_M3eSkeletonElement_stopMotion","reconnectedCallback","_M3eSkeletonElement_createShapes","_M3eSkeletonElement_updateLoading","willUpdate","_changedProperties","has","render","html","_M3eSkeletonElement_handleSlotChange","__motionDisabled","M3eSkeletonElement_1","__reducedMediaQuery","matches","__forcedColorsMediaQuery","__updateMotion","skeleton","__animating","_M3eSkeletonElement_syncMotionState","item","remove","clear","slot","shadowRoot","querySelector","element","assignedElements","flatten","filter","x","HTMLElement","_M3eSkeletonElement_createShape","waitForUpgrade","document","createElement","classList","add","borderRadius","getComputedStyle","firstElement","firstElementChild","nextElementSibling","style","anchoringCleanup","positionAnchor","position","y","left","top","clientHeight","width","clientWidth","height","appendChild","isConnected","_M3eSkeletonElement_startMotion","__motionOrigin","timeline","currentTime","animate","duration","iterations","Infinity","easing","startTime","__classPrivateFieldSet","cancel","delete","pause","play","Set","window","registerStyleSheet","css","matchMedia","addEventListener","styles","DesignToken","color","surface","onSurface","unsafeCSS","motion","short3","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}
|
package/dist/skeleton.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{__classPrivateFieldGet as e,__decorate as
|
|
6
|
+
import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as o}from"tslib";import{LitElement as a,html as i,css as n,unsafeCSS as s}from"lit";import{property as r}from"lit/decorators.js";import{ReconnectedCallback as l,waitForUpgrade as c,registerStyleSheet as d,DesignToken as h,customElement as p}from"@m3e/web/core";import{positionAnchor as m}from"@m3e/web/core/anchoring";var u,f,_,v,k,y,w,g,b,x,M,$,C;let S=C=class extends(l(a)){constructor(){super(...arguments),u.add(this),f.set(this,new Map),_.set(this,null),v.set(this,null),this.shape="auto",this.animation="wave",this.loaded=!1}disconnectedCallback(){super.disconnectedCallback(),e(this,u,"m",y).call(this),e(this,u,"m",M).call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,u,"m",w).call(this),e(this,u,"m",b).call(this)}willUpdate(t){super.willUpdate(t),(t.has("loaded")||t.has("animation"))&&e(this,u,"m",b).call(this)}render(){return i`<slot ?inert="${!this.loaded}" @slotchange="${e(this,u,"m",k)}"></slot>`}static __motionDisabled(){return C.__reducedMediaQuery.matches||C.__forcedColorsMediaQuery.matches}static __updateMotion(){for(const t of C.__animating)e(t,u,"m",$).call(t)}};f=new WeakMap,_=new WeakMap,v=new WeakMap,u=new WeakSet,k=async function(){e(this,u,"m",w).call(this)},y=function(){for(const t of e(this,f,"f"))t[0].remove(),t[1]();e(this,f,"f").clear()},w=async function(){e(this,u,"m",y).call(this);const t=this.shadowRoot?.querySelector("slot");if(t)for(const o of t.assignedElements({flatten:!0}).filter(e=>e instanceof HTMLElement))await e(this,u,"m",g).call(this,o)},g=async function(t){await c(t);const o=document.createElement("div");if(o.classList.add("shape"),"auto"===this.shape){let e=getComputedStyle(t).borderRadius;if(!e||"0px"===e){const o=t.shadowRoot?.firstElementChild;o&&!o.nextElementSibling&&(e=getComputedStyle(o).borderRadius)}e&&"0px"!==e&&(o.style.borderRadius=e)}const a=await m(o,t,{position:"bottom"},(e,a)=>{o.style.left=`${e}px`,o.style.top=a-t.clientHeight+"px",o.style.width=`${t.clientWidth}px`,o.style.height=`${t.clientHeight}px`});e(this,f,"f").set(o,a),this.shadowRoot?.appendChild(o)},b=function(){!this.isConnected||this.loaded||"wave"!==this.animation&&"pulse"!==this.animation?e(this,u,"m",M).call(this):e(this,u,"m",x).call(this)},x=function(){if(e(this,_,"f")){if(e(this,v,"f")===this.animation)return void e(this,u,"m",$).call(this);e(this,u,"m",M).call(this)}C.__motionOrigin??=document.timeline.currentTime??0;const o="pulse"===this.animation?this.animate([{"--_m3e-skeleton-pulse-norm":0},{"--_m3e-skeleton-pulse-norm":1},{"--_m3e-skeleton-pulse-norm":0}],{duration:1200,iterations:1/0,easing:"ease-in-out"}):this.animate([{"--_m3e-skeleton-wave-pct":0},{"--_m3e-skeleton-wave-pct":1}],{duration:2100,iterations:1/0,easing:"linear"});o.startTime=C.__motionOrigin,t(this,_,o,"f"),t(this,v,this.animation,"f"),C.__animating.add(this),e(this,u,"m",$).call(this)},M=function(){e(this,_,"f")&&(e(this,_,"f").cancel(),t(this,_,null,"f"),t(this,v,null,"f"),C.__animating.delete(this))},$=function(){e(this,_,"f")&&(C.__motionDisabled()?e(this,_,"f").pause():e(this,_,"f").play())},S.__animating=new Set,S.__motionOrigin=null,"undefined"!=typeof window&&(d(n`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`),C.__reducedMediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),C.__forcedColorsMediaQuery=window.matchMedia("(forced-colors: active)"),C.__reducedMediaQuery.addEventListener("change",()=>C.__updateMotion()),C.__forcedColorsMediaQuery.addEventListener("change",()=>C.__updateMotion())),S.styles=n`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${h.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${h.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) { contain: layout style paint; } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${s(`opacity ${h.motion.duration.short3} ${h.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${h.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${h.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${h.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${h.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`,o([r({reflect:!0})],S.prototype,"shape",void 0),o([r({reflect:!0})],S.prototype,"animation",void 0),o([r({type:Boolean,reflect:!0})],S.prototype,"loaded",void 0),S=C=o([p("m3e-skeleton")],S);export{S as M3eSkeletonElement};
|
|
7
7
|
//# sourceMappingURL=skeleton.min.js.map
|