@m3e/web 2.3.1 → 2.3.2
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/LICENSE +1 -1
- package/dist/all.js +195 -11
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +44 -44
- package/dist/all.min.js.map +1 -1
- package/dist/app-bar.js +1 -1
- package/dist/app-bar.min.js +1 -1
- package/dist/autocomplete.js +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/avatar.js +1 -1
- package/dist/avatar.min.js +1 -1
- package/dist/badge.js +1 -1
- package/dist/badge.min.js +1 -1
- package/dist/bottom-sheet.js +1 -1
- package/dist/bottom-sheet.min.js +1 -1
- package/dist/button-group.js +1 -1
- package/dist/button-group.min.js +1 -1
- package/dist/button.js +1 -1
- package/dist/button.min.js +1 -1
- package/dist/calendar.js +1 -1
- package/dist/calendar.min.js +1 -1
- package/dist/card.js +1 -1
- package/dist/card.min.js +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/checkbox.min.js +1 -1
- package/dist/chips.js +1 -1
- package/dist/chips.min.js +1 -1
- package/dist/core-a11y.js +5 -3
- package/dist/core-a11y.js.map +1 -1
- package/dist/core-a11y.min.js +6 -6
- package/dist/core-a11y.min.js.map +1 -1
- package/dist/core-anchoring.js +1 -1
- package/dist/core-anchoring.min.js +1 -1
- package/dist/core-bidi.js +1 -1
- package/dist/core-bidi.min.js +1 -1
- package/dist/core-layout.js +1 -1
- package/dist/core-layout.min.js +1 -1
- package/dist/core-platform.js +1 -1
- package/dist/core-platform.min.js +1 -1
- package/dist/core.js +4 -4
- 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 +85 -85
- package/dist/custom-elements.json +1551 -1466
- package/dist/datepicker.js +1 -1
- package/dist/datepicker.min.js +1 -1
- package/dist/dialog.js +1 -1
- package/dist/dialog.min.js +1 -1
- package/dist/divider.js +1 -1
- package/dist/divider.min.js +1 -1
- package/dist/drawer-container.js +1 -1
- package/dist/drawer-container.min.js +1 -1
- package/dist/expansion-panel.js +1 -1
- package/dist/expansion-panel.min.js +1 -1
- package/dist/fab-menu.js +1 -1
- package/dist/fab-menu.min.js +1 -1
- package/dist/fab.js +1 -1
- package/dist/fab.min.js +1 -1
- package/dist/form-field.js +1 -1
- package/dist/form-field.min.js +1 -1
- package/dist/heading.js +1 -1
- package/dist/heading.min.js +1 -1
- package/dist/html-custom-data.json +79 -79
- package/dist/icon-button.js +1 -1
- package/dist/icon-button.min.js +1 -1
- package/dist/icon.js +146 -6
- package/dist/icon.js.map +1 -1
- package/dist/icon.min.js +2 -2
- package/dist/icon.min.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.min.js +1 -1
- package/dist/list.js +1 -1
- package/dist/list.min.js +1 -1
- package/dist/loading-indicator.js +1 -1
- package/dist/loading-indicator.min.js +1 -1
- package/dist/menu.js +1 -1
- package/dist/menu.min.js +1 -1
- package/dist/nav-bar.js +1 -1
- package/dist/nav-bar.min.js +1 -1
- package/dist/nav-menu.js +1 -1
- package/dist/nav-menu.min.js +1 -1
- package/dist/nav-rail.js +1 -1
- package/dist/nav-rail.min.js +1 -1
- package/dist/option.js +1 -1
- package/dist/option.min.js +1 -1
- package/dist/paginator.js +1 -1
- package/dist/paginator.min.js +1 -1
- package/dist/progress-indicator.js +1 -1
- package/dist/progress-indicator.min.js +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.min.js +1 -1
- package/dist/search.js +1 -1
- package/dist/search.min.js +1 -1
- package/dist/segmented-button.js +1 -1
- package/dist/segmented-button.min.js +1 -1
- package/dist/select.js +1 -1
- package/dist/select.min.js +1 -1
- package/dist/shape.js +1 -1
- package/dist/shape.min.js +1 -1
- package/dist/skeleton.js +48 -4
- package/dist/skeleton.js.map +1 -1
- package/dist/skeleton.min.js +2 -2
- package/dist/skeleton.min.js.map +1 -1
- package/dist/slide-group.js +1 -1
- package/dist/slide-group.min.js +1 -1
- package/dist/slider.js +1 -1
- package/dist/slider.min.js +1 -1
- package/dist/snackbar.js +1 -1
- package/dist/snackbar.min.js +1 -1
- package/dist/split-button.js +1 -1
- package/dist/split-button.min.js +1 -1
- package/dist/split-pane.js +1 -1
- package/dist/split-pane.min.js +1 -1
- package/dist/src/core/a11y/list-key/ListKeyManager.d.ts.map +1 -1
- package/dist/src/core/shared/primitives/ElevationElement.d.ts +1 -1
- package/dist/src/core/shared/primitives/FocusRingElement.d.ts +1 -1
- package/dist/src/core/shared/primitives/RippleElement.d.ts +1 -1
- package/dist/src/icon/IconElement.d.ts +7 -1
- package/dist/src/icon/IconElement.d.ts.map +1 -1
- package/dist/src/icon/IconRegistry.d.ts +54 -0
- package/dist/src/icon/IconRegistry.d.ts.map +1 -0
- package/dist/src/icon/IconWeight.d.ts +3 -0
- package/dist/src/icon/IconWeight.d.ts.map +1 -0
- package/dist/src/icon/index.d.ts +1 -0
- package/dist/src/icon/index.d.ts.map +1 -1
- package/dist/src/icon/registerIcon.d.ts +14 -0
- package/dist/src/icon/registerIcon.d.ts.map +1 -0
- package/dist/src/skeleton/SkeletonElement.d.ts.map +1 -1
- package/dist/stepper.js +1 -1
- package/dist/stepper.min.js +1 -1
- package/dist/switch.js +1 -1
- package/dist/switch.min.js +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tabs.min.js +1 -1
- package/dist/textarea-autosize.js +1 -1
- package/dist/textarea-autosize.min.js +1 -1
- package/dist/theme.js +1 -1
- package/dist/theme.min.js +1 -1
- package/dist/toc.js +1 -1
- package/dist/toc.min.js +1 -1
- package/dist/toolbar.js +1 -1
- package/dist/toolbar.min.js +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.min.js +1 -1
- package/package.json +1 -1
package/dist/tabs.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
|
-
* Copyright (c) 2025 matraic
|
|
3
|
+
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as a,html as o,css as s,nothing as r,unsafeCSS as l}from"lit";import{query as n,state as c,property as d}from"lit/decorators.js";import{Selected as h,HtmlFor as b,KeyboardClick as p,Focusable as v,Disabled as m,AttachInternals as u,Role as f,DesignToken as g,customElement as y,ResizeController as x,addCustomState as _,hasCustomState as $,deleteCustomState as w}from"@m3e/web/core";import{addAriaReferencedId as k,removeAriaReferencedId as I,selectionManager as P,SelectionManager as S}from"@m3e/web/core/a11y";import{ifDefined as C}from"lit/directives/if-defined.js";import{M3eDirectionality as z}from"@m3e/web/core/bidi";import"@m3e/web/slide-group";var L,T,B,E;let W=E=class extends(h(b(p(v(m(u(f(a,"tab"),!0))))))){constructor(){super(...arguments),L.add(this),T.set(this,t=>e(this,L,"m",B).call(this,t))}attach(e){super.attach(e),e.id=e.id||"m3e-tab-panel-"+E.__nextId++,k(this,"aria-controls",e.id)}detach(){this.control&&this.control.id&&I(this,"aria-controls",this.control.id),super.detach()}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,T,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,T,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-tabs")?.[P].notifySelectionChange(this)}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span></div></div>`}};T=new WeakMap,L=new WeakSet,B=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation()),e.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-tabs")?.[P].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},W.styles=s`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${g.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${g.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${g.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${g.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${g.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${g.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${g.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${g.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${g.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${g.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${g.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${g.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${g.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`,W.__nextId=0,t([n(".focus-ring")],W.prototype,"_focusRing",void 0),t([n(".state-layer")],W.prototype,"_stateLayer",void 0),t([n(".ripple")],W.prototype,"_ripple",void 0),t([n(".label")],W.prototype,"label",void 0),W=E=t([y("m3e-tab")],W);let j=class extends(f(a,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return o`<slot></slot>`}};var M,Z,q,A,D,U,V,G,H;j.styles=s`:host { display: block; overflow-y: auto; scrollbar-width: ${g.scrollbar.width}; scrollbar-color: ${g.scrollbar.color}; }`,j=t([y("m3e-tab-panel")],j);let O=class extends(u(a)){constructor(){super(),M.add(this),Z.set(this,void 0),this._selectedIndex=null,this[H]=(new S).onSelectedItemsChange(()=>e(this,M,"m",V).call(this)).withHomeAndEnd().withWrap().withDirectionality(z.current),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new x(this,{skipInitial:!0,callback:()=>{_(this,"-no-animate"),e(this,M,"m",G).call(this)}})}get tabs(){return this[P]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(e){if(e>=0&&e<this.tabs.length)this.tabs[e].selected=!0;else{const e=this.selectedTab;e&&(e.selected=!1)}}connectedCallback(){super.connectedCallback(),_(this,"-no-animate"),i(this,Z,z.observe(()=>{this.requestUpdate(),this[P].directionality=z.current}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,Z,"f")?.call(this)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&e(this,M,"m",G).call(this)}render(){let t;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=void 0)),o`${"before"===this.headerPosition?e(this,M,"m",q).call(this):r}<m3e-slide class="tabs" selected-index="${C(t)}"><slot name="panel"></slot></m3e-slide>${"after"===this.headerPosition?e(this,M,"m",q).call(this):r}`}};Z=new WeakMap,M=new WeakSet,H=P,q=function(){return o`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${"ltr"===z.current?o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${"ltr"===z.current?o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${e(this,M,"m",A)}" @keydown="${e(this,M,"m",D)}" @change="${e(this,M,"m",U)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`},A=function(){this[P].setItems([...this.querySelectorAll("m3e-tab")])},D=function(e){this[P].onKeyDown(e)},U=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},V=function(){const t=this[P].selectedItems[0];let i=t?this.tabs.indexOf(t):null;-1===i&&(i=null),this._selectedIndex=i,e(this,M,"m",G).call(this)},G=function(){if(!this._tablist)return;const e=this[P].selectedItems[0];let t=0,i=0;if(e&&null!==this._selectedIndex){for(let e=0;e<this._selectedIndex;e++)t+=this.tabs[e].clientWidth;i=e.clientWidth,"primary"===this.variant&&e.label&&(t+=e.label.offsetLeft,i=e.label.clientWidth,i<24&&(t-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${t}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&$(this,"-no-animate")&&setTimeout(()=>w(this,"-no-animate"))},O.styles=s`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${g.color.primary}); transition: ${l(`left var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard},\n width var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${g.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${g.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${g.color.onSurface}; --_tab-selected-container-hover-color: ${g.color.onSurface}; --_tab-selected-container-focus-color: ${g.color.onSurface}; --_tab-selected-ripple-color: ${g.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`,t([n(".tablist")],O.prototype,"_tablist",void 0),t([c()],O.prototype,"_selectedIndex",void 0),t([d({attribute:"disable-pagination",type:Boolean})],O.prototype,"disablePagination",void 0),t([d({attribute:"header-position",reflect:!0})],O.prototype,"headerPosition",void 0),t([d({reflect:!0})],O.prototype,"variant",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"stretch",void 0),t([d({attribute:"previous-page-label"})],O.prototype,"previousPageLabel",void 0),t([d({attribute:"next-page-label"})],O.prototype,"nextPageLabel",void 0),O=t([y("m3e-tabs")],O);export{W as M3eTabElement,j as M3eTabPanelElement,O as M3eTabsElement};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
|
-
* Copyright (c) 2025 matraic
|
|
3
|
+
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import{__classPrivateFieldSet as t,__classPrivateFieldGet as e,__decorate as i}from"tslib";import{LitElement as s,css as o}from"lit";import{property as n}from"lit/decorators.js";import{HtmlFor as h,Role as l,debounce as r,customElement as a}from"@m3e/web/core";
|
package/dist/theme.js
CHANGED
package/dist/theme.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
|
-
* Copyright (c) 2025 matraic
|
|
3
|
+
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as r}from"tslib";import{css as a,LitElement as n,html as o}from"lit";import{property as i}from"lit/decorators.js";import{DesignToken as s,customElement as c}from"@m3e/web/core";
|
package/dist/toc.js
CHANGED
package/dist/toc.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
|
-
* Copyright (c) 2025 matraic
|
|
3
|
+
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as n,css as s,nothing as l}from"lit";import{query as r,state as c,property as d}from"lit/decorators.js";import{Selected as h,Disabled as m,AttachInternals as p,Role as v,DesignToken as g,customElement as f,getTextContent as u,guid as b,HtmlFor as y,setCustomState as w,scrollIntoViewIfNeeded as $,hasCustomState as k,IntersectionController as x,ScrollController as I,MutationController as _,hasAssignedNodes as z,debounce as S}from"@m3e/web/core";import{SelectionManager as W}from"@m3e/web/core/a11y";let T=class extends(h(m(p(v(o,"link"))))){update(e){super.update(e),e.has("selected")&&(this.ariaSelected=null,this.ariaCurrent=this.selected?"true":null),e.has("node")&&(this.node?this._base?.style.setProperty("--_level",""+(this.node.level-1)):this._base?.style.removeProperty("--_level"))}firstUpdated(e){super.firstUpdated(e),this._stateLayer?.attach(this)}render(){return a`<m3e-state-layer class="state-layer"></m3e-state-layer><div class="base"><slot></slot></div>`}};var M,A,H,N,E,V,D,U,C,L,P,j,q;T.styles=s`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${g.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { padding-inline-start: calc( var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0)) ); padding-inline-end: var(--m3e-toc-item-padding, 1rem); transition: ${n(`color var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1}) ${g.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${g.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${g.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${g.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${g.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${g.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${g.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${g.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${g.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${g.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${g.color.onSecondaryContainer}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`,e([r(".base")],T.prototype,"_base",void 0),e([r(".state-layer")],T.prototype,"_stateLayer",void 0),e([c()],T.prototype,"node",void 0),T=e([f("m3e-toc-item")],T);class O{static generate(e,i=6){let o=6;const a=new Array;e.querySelectorAll("h1:not([m3e-toc-ignore]),h2:not([m3e-toc-ignore]),h3:not([m3e-toc-ignore]),h4:not([m3e-toc-ignore]),h5:not([m3e-toc-ignore]),h6:not([m3e-toc-ignore]),m3e-heading[level]:not([m3e-toc-ignore])").forEach(e=>{const i=t(M,M,"m",A).call(M,e);o=Math.min(i,o),a.push({id:e.id||b(),element:e,level:i,label:u(e,!0),nodes:new Array})});for(let e=o+i-1;e>o;e--)for(let t=0;t<a.length;t++){const i=a[t];if(i.level===e)for(let o=t;o>=0;o--){const t=a[o];if(t.level<e){t.nodes.push(i);break}}}return a.forEach(e=>e.level-=o-1),a.filter(e=>1===e.level)}}M=O,A=function(e){return e.tagName.startsWith("H")?parseInt(e.tagName.substring(1)):parseInt(e.getAttribute("level")??"0")};let R=class extends(y(p(v(o,"navigation")))){constructor(){super(...arguments),H.add(this),this._toc=[],N.set(this,!1),E.set(this,(new W).withHomeAndEnd().withVerticalOrientation().disableRovingTabIndex().onSelectedItemsChange(()=>{if(this._activeIndicator){const e=t(this,E,"f").selectedItems[0];e?($(e,this,{block:"nearest",behavior:"smooth"}),this._activeIndicator.style.top=`${e.offsetTop}px`,this._activeIndicator.style.height=`${e.clientHeight}px`,this._activeIndicator.style.visibility=0==e.clientHeight?"hidden":"",k(this,"-no-animate")&&setTimeout(()=>w(this,"-no-animate",!1),40)):(w(this,"-no-animate",!0),this._activeIndicator.style.top="0px",this._activeIndicator.style.height="0px",this._activeIndicator.style.visibility="hidden")}})),V.set(this,new x(this,{target:null,callback:e=>{if(!this.control||t(this,N,"f"))return;const i=this.control.scrollTop;let o=null,a=Number.POSITIVE_INFINITY;if(e.filter(e=>e.isIntersecting).map(e=>e.target).forEach(e=>{const t=e.offsetTop,n=Math.abs(t-i);n<a&&(a=n,o=e)}),o){const e=t(this,E,"f").items.find(e=>e.node?.element===o);e&&t(this,E,"f").select(e)}}})),D.set(this,new I(this,{target:null,callback:()=>i(this,N,!1,"f"),debounce:!0})),U.set(this,new _(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>this._updateToc()})),this.maxDepth=2}attach(e){super.attach(e),t(this,U,"f").observe(e),t(this,D,"f").observe(e),t(this,H,"m",q).call(this)}detach(){this.control&&(t(this,U,"f").unobserve(this.control),t(this,D,"f").unobserve(this.control)),super.detach(),t(this,H,"m",q).call(this)}willUpdate(e){super.willUpdate(e),e.has("maxDepth")&&t(this,H,"m",q).call(this)}updated(e){if(super.updated(e),e.has("_toc")){const{added:e,removed:i}=t(this,E,"f").setItems([...this.shadowRoot?.querySelectorAll("m3e-toc-item")??[]]);t(this,E,"f").activeItem||(w(this,"-no-animate",!0),t(this,E,"f").updateActiveItem(e.find(e=>!e.disabled)));for(const i of e)i.node&&t(this,V,"f").observe(i.node.element);for(const e of i)e.node&&t(this,V,"f").unobserve(e.node.element)}}render(){return a`<div class="header"><div class="overline"><slot name="overline" @slotchange="${t(this,H,"m",L)}"></slot></div><div class="title"><slot name="title" @slotchange="${t(this,H,"m",P)}"></slot></div></div><slot></slot><ul class="list">${this._toc.map(e=>t(this,H,"m",C).call(this,e))}</ul><div class="active-indicator" aria-hidden="true"></div>`}_updateToc(){t(this,H,"m",q).call(this)}};N=new WeakMap,E=new WeakMap,V=new WeakMap,D=new WeakMap,U=new WeakMap,H=new WeakSet,C=function e(i){return a`<li><m3e-toc-item tabindex="-1" .node="${i}" @click="${t(this,H,"m",j)}">${i.label}</m3e-toc-item>${0==i.nodes.length?l:a`<ul>${i.nodes.map(i=>t(this,H,"m",e).call(this,i))}</ul>`}</li>`},L=function(e){w(this,"-with-overline",z(e.target))},P=function(e){w(this,"-with-title",z(e.target))},j=function(e){e.target instanceof T&&!e.target.disabled&&e.target.node?.element&&(i(this,N,!0,"f"),e.target.node.element.scrollIntoView({block:"start",behavior:"smooth"}),t(this,E,"f").updateActiveItem(e.target),t(this,E,"f").select(e.target))},q=function(){this._toc=this.control?O.generate(this.control,Math.max(1,Math.min(this.maxDepth,6))):[]},R.styles=s`:host { display: inline-block; position: relative; overflow-y: auto; scrollbar-width: ${g.scrollbar.thinWidth}; scrollbar-color: ${g.scrollbar.color}; width: var(--m3e-toc-width, 9.75rem); } ul { list-style: none; padding-inline-start: unset; margin-block-start: unset; margin-block-end: unset; } ul, li { display: flex; flex-direction: column; align-items: stretch; } m3e-toc-item { flex: none; } .active-indicator { position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; border-radius: var(--m3e-toc-item-shape, ${g.shape.corner.largeIncreased}); border: 1px solid var(--m3e-toc-active-indicator-color, ${g.color.outline}); transition: ${n(`visibility var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n ${g.motion.easing.standard},\n height var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n ${g.motion.easing.standard},\n top var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n ${g.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:state(-with-overline))) .overline, :host(:not(:state(-with-title))) .title, :host(:not(:state(-with-overline)):not(:state(-with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${g.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${g.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${g.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${g.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${g.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${g.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${g.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${g.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${g.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${g.color.onSurface}); } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`,e([c()],R.prototype,"_toc",void 0),e([r(".active-indicator")],R.prototype,"_activeIndicator",void 0),e([d({attribute:"max-depth",type:Number})],R.prototype,"maxDepth",void 0),e([S(40)],R.prototype,"_updateToc",null),R=e([f("m3e-toc")],R);export{R as M3eTocElement,T as M3eTocItemElement,O as TocGenerator};
|
package/dist/toolbar.js
CHANGED
package/dist/toolbar.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
|
-
* Copyright (c) 2025 matraic
|
|
3
|
+
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import{__classPrivateFieldSet as e,__classPrivateFieldGet as t,__decorate as a}from"tslib";import{LitElement as o,html as r,css as i}from"lit";import{property as s}from"lit/decorators.js";import{Vertical as n,Role as l,DesignToken as c,customElement as d}from"@m3e/web/core";import{RovingTabIndexManager as h,M3eInteractivityChecker as v}from"@m3e/web/core/a11y";import{M3eDirectionality as m}from"@m3e/web/core/bidi";var b,p,u,f,y,g;let k=class extends(n(l(o,"toolbar"))){constructor(){super(...arguments),b.add(this),p.set(this,void 0),u.set(this,(new h).withHomeAndEnd().withDirectionality(m.current)),this.variant="standard",this.shape="square",this.elevated=!1}connectedCallback(){super.connectedCallback(),e(this,p,m.observe(()=>t(this,u,"f").directionality=m.current),"f")}disconnectedCallback(){super.disconnectedCallback(),t(this,p,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(t(this,u,"f").vertical=this.vertical)}render(){return r`<m3e-state-layer class="state-layer"></m3e-state-layer><m3e-elevation class="elevation" level="${this.elevated?3:0}"></m3e-elevation><div class="base"><slot @click="${t(this,b,"m",g)}" @keydown="${t(this,b,"m",y)}" @slotchange="${t(this,b,"m",f)}"></slot></div>`}};p=new WeakMap,u=new WeakMap,b=new WeakSet,f=function(){const{added:e}=t(this,u,"f").setItems(v.findInteractiveElements(this));if(!t(this,u,"f").activeItem){const a=e.find(e=>!e.hasAttribute("disabled"));a&&t(this,u,"f").updateActiveItem(a)}},y=function(e){t(this,u,"f").onKeyDown(e)},g=function(e){const a=e.composedPath().find(e=>e instanceof HTMLElement&&t(this,u,"f").items.includes(e));a&&t(this,u,"f").updateActiveItem(a)},k.styles=i`:host { display: inline-block; position: relative; } .base { display: flex; align-items: center; box-sizing: border-box; border-radius: inherit; } :host(:not([vertical])) { height: fit-content; } :host(:not([vertical])) .base { height: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); column-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([vertical]) { width: fit-content; } :host([vertical]) .base { width: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); } :host([vertical]) .base { flex-direction: column; justify-content: center; row-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([shape="rounded"]) { border-radius: var(--m3e-toolbar-rounded-shape, ${c.shape.corner.full}); } :host([shape="rounded"]) .base { padding: var(--m3e-toolbar-rounded-padding, 0.5rem); } :host(:not([vertical])[shape="square"]) .base { padding-inline: var(--m3e-toolbar-square-padding, 1rem); } :host([vertical][shape="square"]) .base { padding-block: var(--m3e-toolbar-square-padding, 1rem); } :host([variant="standard"]) .state-layer { background-color: var(--m3e-toolbar-standard-container-color, ${c.color.surfaceContainer}); } :host([variant="standard"]) .base { color: var(--m3e-toolbar-standard-color, ${c.color.onSurface}); } :host([variant="vibrant"]) .state-layer { background-color: var(--m3e-toolbar-vibrant-container-color, ${c.color.primaryContainer}); } :host([variant="vibrant"]) .base { color: var(--m3e-toolbar-vibrant-color, ${c.color.onPrimaryContainer}); } @media (forced-colors: active) { :host([variant]) .state-layer { background-color: Canvas; } :host([variant]) .base { color: CanvasText; outline: 1px solid CanvasText; } }`,a([s({reflect:!0})],k.prototype,"variant",void 0),a([s({reflect:!0})],k.prototype,"shape",void 0),a([s({type:Boolean,reflect:!0})],k.prototype,"elevated",void 0),k=a([d("m3e-toolbar")],k);export{k as M3eToolbarElement};
|
package/dist/tooltip.js
CHANGED
package/dist/tooltip.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license MIT
|
|
3
|
-
* Copyright (c) 2025 matraic
|
|
3
|
+
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as i}from"tslib";import{property as o,query as s,state as a}from"lit/decorators.js";import{customElement as r,ActionElementBase as n,HtmlFor as l,ReconnectedCallback as h,AttachInternals as c,HoverController as d,LongPressController as p,isDisabledMixin as m,DesignToken as u,hasAssignedNodes as b,getTextContent as f,setCustomState as g}from"@m3e/web/core";import{LitElement as v,unsafeCSS as y,css as w,html as _}from"lit";import{ifDefined as $}from"lit/directives/if-defined.js";import{M3eInteractivityChecker as k,M3eAriaDescriber as x}from"@m3e/web/core/a11y";import{M3eDirectionality as S}from"@m3e/web/core/bidi";import{M3ePlatform as W}from"@m3e/web/core/platform";import{positionAnchor as T}from"@m3e/web/core/anchoring";let D=class extends n{constructor(){super(...arguments),this.disableRestoreFocus=!1}_onClick(){this.closest("m3e-rich-tooltip")?.hide(!this.disableRestoreFocus)}};var C,z,E,M,P,I,H,R,U,L,A;t([o({attribute:"disable-restore-focus",type:Boolean})],D.prototype,"disableRestoreFocus",void 0),D=t([r("m3e-rich-tooltip-action")],D);class F extends(l(h(c(v)))){constructor(){super(...arguments),C.add(this),E.set(this,null),M.set(this,void 0),P.set(this,!1),I.set(this,()=>e(this,C,"m",L).call(this)),H.set(this,new d(this,{target:null,endDelay:200,callback:(t,o)=>{if(!this._isInteractive)if(t){if(o===this._base)return void i(this,P,!0,"f");this.show()}else e(this,P,"f")&&o!==this._base||(i(this,P,!1,"f"),this.hide())}})),R.set(this,new p(this,{target:null,callback:t=>{this._isInteractive||(t?this.show():this.hide())}})),this.disabled=!1,this.touchGestures="auto"}get showDelay(){return e(this,H,"f").startDelay}set showDelay(t){e(this,H,"f").startDelay=t}get hideDelay(){return e(this,H,"f").endDelay}set hideDelay(t){e(this,H,"f").endDelay=t}get isOpen(){return z.__openTooltips.includes(this)}get _isInteractive(){return!1}attach(t){super.attach(t),W.iOS||W.Android?(e(this,R,"f").observe(t),e(this,C,"m",A).call(this)):e(this,H,"f").observe(t),t.addEventListener("click",e(this,I,"f"))}detach(){this.control&&(e(this,H,"f").unobserve(this.control),e(this,R,"f").unobserve(this.control),this.control.removeEventListener("click",e(this,I,"f")),this.hide()),super.detach()}update(t){super.update(t),t.has("disabled")&&this.disabled&&this.hide()}reconnectedCallback(){super.reconnectedCallback(),e(this,C,"m",U).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,C,"m",U).call(this)}async show(){!this.control||this.disabled||m(this.control)&&this.control.disabled||(z.__openTooltips.filter(t=>t!==this).forEach(t=>t.hide()),this._base.showPopover(),i(this,M,await T(this._base,this.control,{position:this._anchorPosition,inline:!0,flip:!0,shift:"main",offset:4},(t,e)=>this._updatePosition(this._base,t,e)),"f"),z.__openTooltips.includes(this)||z.__openTooltips.push(this))}hide(){this._base.hidePopover(),e(this,M,"f")?.call(this),i(this,M,void 0,"f"),e(this,H,"f").clearDelays(),z.__openTooltips.includes(this)&&(z.__openTooltips=z.__openTooltips.filter(t=>t!==this))}}var G,N,j,B,O,q,K,V,X,J,Q,Y,Z,tt,et,it;z=F,E=new WeakMap,M=new WeakMap,P=new WeakMap,I=new WeakMap,H=new WeakMap,R=new WeakMap,C=new WeakSet,U=function(){this._base&&e(this,H,"f").observe(this._base)},L=function(){this._isInteractive?z.__openTooltips.includes(this)?this.hide():this.show():this.hide()},A=function(){if("off"!==this.touchGestures&&e(this,E,"f")){const t=e(this,E,"f").style;("on"===this.touchGestures||"INPUT"!==e(this,E,"f").nodeName&&"TEXTAREA"!==e(this,E,"f").nodeName)&&(t.userSelect=t.msUserSelect=t.webkitUserSelect=t.MozUserSelect="none"),"on"!==this.touchGestures&&e(this,E,"f").draggable||(t.webkitUserDrag="none"),t.touchAction="none",t.webkitTapHighlightColor="transparent"}},F.__openTooltips=new Array,t([s(".base")],F.prototype,"_base",void 0),t([o({type:Boolean,reflect:!0})],F.prototype,"disabled",void 0),t([o({attribute:"show-delay",type:Number})],F.prototype,"showDelay",null),t([o({attribute:"hide-delay",type:Number})],F.prototype,"hideDelay",null),t([o({attribute:"touch-gestures"})],F.prototype,"touchGestures",void 0);let ot=it=class extends F{constructor(){super(...arguments),G.add(this),N.set(this,it.__nextId++),j.set(this,""),B.set(this,""),O.set(this,""),q.set(this,!1),this._hasSubhead=!1,this._interactive=!1,K.set(this,t=>e(this,G,"m",J).call(this,t)),this.position="below-after"}get _isInteractive(){return this._interactive}get _anchorPosition(){switch(this.position){case"above":return"top";case"above-after":return"rtl"===S.current?"top-start":"top-end";case"above-before":return"rtl"===S.current?"top-end":"top-start";case"after":return"rtl"===S.current?"left":"right";case"before":return"rtl"===S.current?"right":"left";case"below":return"bottom";case"below-after":return"rtl"===S.current?"bottom-start":"bottom-end";case"below-before":return"rtl"===S.current?"bottom-end":"bottom-start"}}render(){const t=this._interactive&&this._hasSubhead?`m3e-rich-tooltip-${e(this,N,"f")}-subhead`:void 0;return _`<div class="base" popover="manual" role="${$(this._interactive?"dialog":void 0)}" aria-labelledby="${$(t)}" @keydown="${e(this,G,"m",Q)}" @beforetoggle="${e(this,G,"m",V)}" @toggle="${e(this,G,"m",X)}"><m3e-elevation level="3"></m3e-elevation><div class="subhead" id="${$(t)}"><slot name="subhead" @slotchange="${e(this,G,"m",Y)}"></slot></div><div class="content"><slot @slotchange="${e(this,G,"m",Z)}"></slot></div><div class="actions"><slot name="actions" @slotchange="${e(this,G,"m",tt)}"></slot></div></div>`}show(){return this._interactive&&document.addEventListener("click",e(this,K,"f")),super.show()}hide(t=!0){this._interactive&&document.removeEventListener("click",e(this,K,"f")),super.hide(),t&&this._interactive&&this.control&&k.isFocusable(this.control)&&this.control.focus()}attach(t){super.attach(t),e(this,G,"m",et).call(this),this._interactive&&(t.ariaHasPopup="dialog")}update(t){super.update(t),t.has("_interactive")&&(this.ariaHidden=this._interactive?null:"true",e(this,G,"m",et).call(this),this.control&&this._interactive&&(this.control.ariaHasPopup="dialog"))}_updatePosition(t,e,i){this.position.includes("before")&&"before"!==this.position&&("rtl"===S.current?e+=this.control?.clientWidth??0:e-=this.control?.clientWidth??0),this.position.includes("after")&&"after"!==this.position&&("rtl"===S.current?e-=this.control?.clientWidth??0:e+=this.control?.clientWidth??0),"rtl"===S.current?(t.style.right=window.innerWidth-e-t.clientWidth+"px",t.style.left=""):(t.style.left=`${e}px`,t.style.right=""),t.style.top=`${i}px`}};var st,at,rt,nt;N=new WeakMap,j=new WeakMap,B=new WeakMap,O=new WeakMap,q=new WeakMap,K=new WeakMap,G=new WeakSet,V=function(t){const e=new ToggleEvent("beforetoggle",{oldState:t.oldState,newState:t.newState,bubbles:!0,composed:!0,cancelable:t.cancelable});this.dispatchEvent(e)||(t.preventDefault(),this.hide())},X=function(t){const e=new ToggleEvent("toggle",{oldState:t.oldState,newState:t.newState,bubbles:!0,composed:!0});this.dispatchEvent(e)},J=function(t){t.composedPath().some(t=>t instanceof it||t===this.control)||this.hide()},Q=function(t){"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),this.hide())},Y=function(t){this._hasSubhead=b(t.target),this.shadowRoot?.querySelector(".base")?.classList.toggle("has-subhead",this._hasSubhead),i(this,j,this._hasSubhead?f(t.target,!0):"","f"),e(this,G,"m",et).call(this)},Z=function(t){this._interactive=k.findInteractiveElements(this).length>0,i(this,B,f(t.target,!0),"f"),e(this,G,"m",et).call(this)},tt=function(t){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",b(t.target)),this._interactive=k.findInteractiveElements(this).length>0,e(this,G,"m",et).call(this)},et=function(){const t=e(this,j,"f")?`${e(this,j,"f")}/n${e(this,B,"f")}`:e(this,B,"f");this.isConnected&&this.control&&(e(this,O,"f")&&e(this,q,"f")&&(x.removeDescription(this.control,e(this,O,"f")),i(this,q,!1,"f")),i(this,O,t,"f"),e(this,O,"f")&&!this._interactive&&(x.describe(this.control,e(this,O,"f")),i(this,q,!0,"f")))},ot.styles=w`:host { display: contents; } .base { flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${u.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${u.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${y(`opacity ${u.motion.duration.short3} ${u.motion.easing.standard}, \n transform ${u.motion.duration.short3} ${u.motion.easing.standard},\n overlay ${u.motion.duration.short3} ${u.motion.easing.standard} allow-discrete,\n display ${u.motion.duration.short3} ${u.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:popover-open { display: flex; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${u.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${u.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${u.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${u.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${u.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${u.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${u.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${u.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${u.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${u.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`,ot.__nextId=0,t([a()],ot.prototype,"_hasSubhead",void 0),t([a()],ot.prototype,"_interactive",void 0),t([o()],ot.prototype,"position",void 0),ot=it=t([r("m3e-rich-tooltip")],ot);let lt=class extends F{constructor(){super(...arguments),st.add(this),at.set(this,void 0),this.position="below"}get _anchorPosition(){return"above"===this.position?"top":"below"===this.position?"bottom":"before"===this.position?"ltr"===S.current?"left":"right":"ltr"===S.current?"right":"left"}attach(t){super.attach(t),e(this,at,"f")&&x.describe(t,e(this,at,"f"))}detach(){this.control&&e(this,at,"f")&&x.removeDescription(this.control,e(this,at,"f")),super.detach()}connectedCallback(){super.connectedCallback(),this.ariaHidden="true"}render(){return _`<div class="base" popover="manual" @toggle="${e(this,st,"m",nt)}"><slot @slotchange="${e(this,st,"m",rt)}"></slot></div>`}_updatePosition(t,e,i){"rtl"===S.current?(t.style.right=window.innerWidth-e-t.clientWidth+"px",t.style.left=""):(t.style.left=`${e}px`,t.style.right=""),t.style.top=`${i}px`}};at=new WeakMap,st=new WeakSet,rt=function(t){const o=f(t.target,!0);this.isConnected&&this.control?(e(this,at,"f")&&x.removeDescription(this.control,e(this,at,"f")),i(this,at,o,"f"),e(this,at,"f")&&x.describe(this.control,e(this,at,"f"))):i(this,at,o,"f")},nt=function(t){if("open"===t.newState){const t=this._base.getBoundingClientRect().height>parseFloat(getComputedStyle(this._base).minHeight);g(this,"-multiline",t)}},lt.styles=w`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: anywhere; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${u.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${u.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${u.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${u.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${u.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${u.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${u.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${y(`opacity ${u.motion.duration.short3} ${u.motion.easing.standard}, \n transform ${u.motion.duration.short3} ${u.motion.easing.standard},\n overlay ${u.motion.duration.short3} ${u.motion.easing.standard} allow-discrete,\n display ${u.motion.duration.short3} ${u.motion.easing.standard} allow-discrete`)}; } :host(:state(-multiline)) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`,t([o()],lt.prototype,"position",void 0),lt=t([r("m3e-tooltip")],lt);export{D as M3eRichTooltipActionElement,ot as M3eRichTooltipElement,lt as M3eTooltipElement,F as TooltipElementBase};
|